l什么是angularJs？
•基于javascript开发的客户端应用框架，使我们可以更加快捷，简单的开发web应用。
•诞生于2009年，后来被google收购，用在了很多项目中。
•适用于CRUD应用或者SPA单页面网站的开发。
langularJs资源
•http://www.angularjs.org/
•https://www.github.com/angular/
•http://www.angularjs.cn/
•http://www.ngnice.com/
•http://woxx.sinaapp.com/
langularJs下载
•http://www.bootcdn.cn/angular.js/
•npm install angular
langularJs有哪些特性？
•MVC模式
•模块系统
•指令系统
•依赖注入
•双向数据绑定
langularJs的MVC方式
•数据的挂载
•ng-controller
•双大括号表达式
langularJs的作用域
•$scope
•$rootScope
•依赖注入
•服务
langularJs的指令系统
•ng-app
•ng-controller
langularJs的双向数据绑定
•MVVM
•$timeout
•ng-click
•ng-model
langularJs的小例子
•购物金额计算
•过滤器
–currency
•$watch
–监听数据变化
–三个参数
langularJs的模块化
•angular.module
•压缩的问题
langularJs的工具方法
•angular.bind
•angular.copy
•angular.extend
•angular.isArray
•angular.isDate
•angular.isDefined
•angular.isUndefined
•angular.isFunction
•angular.isNumber
•angular.isObject
•angular.isString
•angular.isElement
•angular.version
•angular.equals
•angular.forEach
•angular.fromJson/toJson
•angular.identity/noop
•angular.lowercase/uppercase
•angular.element
•angular.bootstrap
•angular.injector
l$scope
•$scope.$watch
•$scope.$apply
langular.module
•controller
•run
langularJs的过滤器
•currency
•number
•lowercase/uppercase
•json
•limitTo
•date
•orderBy
•filter
l过滤器扩展部分
•可组合使用过滤器
•JS中使用过滤器
–$scope/$rootScope/$timeout
–$filter
•自定义过滤器
–angular.module
»controller/run
»filter
lng-repeat 指令
•学过的指令有：
–ng-app
–ng-controller
–ng-model
–ng-click
•遍历集合
–通过in的方式遍历每一项
•实例
–表格的操作
lng-repeat 指令
•扩展部分
–$index
–$first
–$middle
–$last
–$even
–$odd
–ng-repeat-start
–ng-repeat-end
l事件指令
•ng-click/dblclick
•ng-mousedown/up
•ng-mouseenter/leave
•ng-mousemove/over/out
•ng-keydown/up/press
•ng-focus/blur
•ng-submit
l事件指令
•ng-selected
•ng-change
•ng-copy
•ng-cut
•ng-paste
langularJs的指令
•ng-disabled
–服务 $interval
•ng-readonly
•ng-checked
•ng-value
•ng-bind
•ng-cloak
•ng-bind-template
•ng-bind-html
–http://www.bootcdn.cn/angular.js/
•ng-non-bindable
•ng-class
•ng-style
•ng-href
•ng-src
•ng-attr-(suffix)
•ng-show
•ng-hide
•ng-if
•ng-swtich
–on
–default
–when
•ng-open
•ng-init
•ng-include
•ng-model
–ng-model-options
–updateOn
•ng-controller
–as
•<a>
•<select>
–ng-options
»for in
•<textarea>
•<input>
•<form>
–novalidate
langularJs的表单验证
•$valid
•$invalid
•$pristine
•$dirty
•$error
•注意点
–name的方式进行查找
–要写ng-model
•type
–email
–number
–url
•required
•ng-minlength
•ng-maxlength
•ng-pattern
•class
–.ng-valid{}
–.ng-invalid{}
–.ng-pristine{}
–.ng-dirty{}
•实例
–实战中的表单验证方式
langularJs的自定义指令
–angular.module
»controller
»run
»filter
»directive
•restrict的四种定义方式
•replace
•template
•templateUrl
–directive
»scope
•独立作用域true
•隔离作用域{}
•@
•=
•&
langularJs的自定义指令
–directive
»controller
»link
•scope
•element
•attr
•reController
–directive
»transclude
•ng-transclude
»require
•^
•?
langularJs的服务
•$scope
–$watch
–$apply
•$rootScope
•$timeout
•$interval
•$filter
langularJs的服务
•$http
–method
–url
–success
–error
–简写方式
»jsonp
»JSON_CALLBACK
–例子 : 百度下拉搜索
langularJs的服务
•$location
–absUrl()
–path()
–replace()
–hash()
–search()
–url()
–host()
–port()
–protocol()
langularJs的服务
•$anchorScroll
–例子 : 锚点跳转
–
•$cacheFactory
–info()
–put()
–get()
–remove()
–配置capacity
langularJs的服务
•$log
–log()
–info()
–warn()
–error()
–
•$interpolate
–例子 : 插值计算
langularJs的服务
•$q
–promise的实现
–defer()
–resolve()
–reject()
–notify()
–then()
–
langularJs的供应商
•服务的相关初始配置操作
•config
–provider
–$interpolate
»startSymbol()
»endSymbol()
–$log
»debugEnabled()
–$anchorScroll
»disableAutoScrolling()
langularJs的自定义服务
•module
–filter()
–directive()
–factory()
–provider()
»区别
»$get
langularJs的自定义服务
•模块之间的通信
–provide好处
•service()
–构造函数
•constant()
–设置常量
•value()
–区别
langularJs的插件
•ngSanitize
•ngRoute
–版本的问题
–ng-view
–$routeProvider
»when
•template
•templateUrl
langularJs的插件
•ngRoute
–$routeProvider
»when
•controller
»otherwise
•redirectTo
–$routeParams
–事件
»$on
»$routeChangeStart
»$routeChangeSuccess/Error
langularJs的事件
•$emit
•$broadcast
•event
–targetScope
–currentScope
–name
–stopPropagation()
•内部传播方式
–$routeChangeStart
–$viewContentLoaded
langularJs的插件
•ngAnimate
–CSS3的方式
–ng-enter
–ng-enter-active
–ng-leave
–ng-leave-active
–支持的指令
»if,view,repeat,include,swtich
»repeat
•ng-enter-stagger
•animation-delay
langularJs的插件
•ngAnimate
–ng-hide-add
–ng-hide-add-active
–ng-hide-remove
–ng-hide-remove-active
–支持的指令
»class,show,hide,model等
–JS方式
»animation()
•enter/leave
•removeClass/addClass
langularJs的插件
•ngResource
–支持 RESTful 架构模式
–get()
–query()
»区别
–save()
–delete()
langularJs的架构
•参考官方实例
–phonecat
–安装