码迷,mamicode.com
首页 > Web开发 > 详细

angularjs学习大纲

时间:2015-11-13 18:49:33      阅读:551      评论:0      收藏:0      [点我收藏+]

标签:

 
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
–安装

 

angularjs学习大纲

标签:

原文地址:http://www.cnblogs.com/newh5/p/4962957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!