AngularJS权威教程 笔记（AngularJS是一个很有意思的库，基于函数形参的依赖注入？酷！还有奇怪的$scope和指令）
2015-07-21 17:06
381 查看
目录(?)[+]
导航、
搜索
初识AngularJS
脏检查？$digest()循环
ng-controller="MyController"（控制器管辖视图）
模块
angular.module('myApp', ['deps']);
作用域
ng-app关联到$rootScope，而ng-controller创建一个新的$scope
$injector
控制器
app.controller("MyController", function($scope){ $scope.xxx=...; });
表达式
app.controller("MyController", function($scope, $parse){
$scope.$watch('expr', function(newVal, oldVal, scope){
var parseFunc = $parse(newVal);
$scope.parsedValue = parseFunc(scope); //靠
app.controller("MyController", function($scope, $interpolate){
//这里的第2个参数到底是怎么回事？注入服务？它不应该与前面的$parse一样属于同一个形参吗？
自定义不同于｛｛｝｝的符号（略）
过滤器
｛｛ name | uppercase ｝｝
在失去焦点时验证：app.directive('ngFocus', ... --> <input ... ng-focus/>
1.3+ ngMessages（去除复杂的ng-show指令？）
指令简介
指令就是自定义html元素／属性／类／注释？
app.directive(myDirective', function(){ return { restrict: 'EACM', replace: true, template: '...'}; });
创建新的作用域？
scope: { someProperty: '@someAttr' }
内置指令
基础ng属性指令：
ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
指令中使用子作用域：ng-app和ng-controller
ng-include
ng-switch
ng-repeat
ng-view
ng-if
ng-init
ng-bind
ng-cloak
ng-bind-template
ng-model
ng-show/hide
ng-change
ng-form（在一个表单里嵌套另一个？）
ng-click
ng-select
ng-submit
ng-attr-(suffix)
指令详解
定义
作用域
隔离作用域？
绑定策略
本地作用域属性：@attr =attr &attr
translude？
生命周期*
compile（对模板DOM进行转换）
link（将作用域与DOM链接）
自定义验证（发送Ajax请求）
ngModel
自定义验证
模块加载
app.config/run( ...
标签：/#!/...
HTML5：通过$location服务使用History API
路由事件
$routeChangeStart
$routeChangeSuccess
$routeChangeError
$routeUpdate
更多
$window.location.href = "/reload/page";
依赖注入
p109 通过annotate，在实例化时将传入函数的参数列表提取出来（怎么做到的？）
> injector.annotate( function($q, greeter){} )
["$q", "greeter"]
injector.invoke( function($http, greeter){} ) //参数顺序就没有意义了（靠！）
显示注入声明
aControllerFactory.$inject = ['$scope', 'greeter'];
行内注入声明
app.controller('MyController', ['$scope', 'greeter', function($scope, greeter){...}];
ngMin：预压缩并设置依赖注入？
服务
app.factory('githubService', function($http){ ... });
$http返回的是promise对象...
app.controller('ServiceController', function($scope, githubService){...}); //靠，ng的依赖注入真的很精妙～
5种方法创建服务：factory service constant value provider
略
拦截器
... $httpProvider.interceptors.push('MyInterceptor');
$resource：访问REST
Restangular库
XHR实践
JSONP
CORS
服务器端支持：Access-Control-Allow-Origin
promise
var deferred = $q.defer();
resolve
reject
notify
then(successFun, errorFun, notifyFun)
.catch(function(reason){...})
测试
p270 Karma与持续集成服务（JenkinsCI, TravisCI）协作得很好
Protractor
事件
架构
AngularJS动画
$animate服务：ng-[EVENT]-active CSS类
ngRepeat
ngView
ngInclude
ngSwitch
ngIf
ngClass
ngShow/Hide
CSS3过渡与@keyframes动画
第3方库：Animate.css, TweenMax/Lite
$watch列表
脏值检查：只要有任何值发生变化，应用将退回到$watch循环中，直到检测不到更新
$watchCollection
$evalAsync列表（$$asyncQueue）
$apply
揭秘AngularJS
移动应用
ngTouch
移动设备首先会检测到一个tap，然后等待300ms去检测其他事件（doubletap），之后才会触发click
ng-click：快速点击？
ngSwipeLeft/Right
$swipe服务
angular-gestures和多点触控（基于Hammer.js）
Cordova中的原生应用（有点像Rails）
使用Yeoman构建
本地化
angular-translate（略）
运行时切换语言＊
angular-gettext：.pot => .js？
缓存
$cacheFactory
安全性？
严格的上下文转义：$sce服务
IE是唯一缓存XHR请求的？
p393 Web爬虫通常不会抓取JS应用（需要包含JS解释器）？
Google会把hashbang（#!）转换为?+escaped_fragment_=... ？
获取快照（？）
PhantomJS
Zombie.js
Prerender.io Node服务器
调试AngularJS
Chrome扩展Batarang
下一步
jqLite和jQuery
Grunt
grunt-angular-templates
Lineman
Bower
Yeoman
配置Angular生成器
AngularJS权威教程
跳转至：导航、
搜索
初识AngularJS
数据绑定和第一个应用
实时模板：<html ng-app> ... <input ng-model="name" .../> --> <h1>Hello, ｛｛ name ｝｝</h1>脏检查？$digest()循环
ng-controller="MyController"（控制器管辖视图）
模块
angular.module('myApp', ['deps']);作用域
ng-app关联到$rootScope，而ng-controller创建一个新的$scope$injector
控制器
app.controller("MyController", function($scope){ $scope.xxx=...; });表达式
app.controller("MyController", function($scope, $parse){$scope.$watch('expr', function(newVal, oldVal, scope){
var parseFunc = $parse(newVal);
$scope.parsedValue = parseFunc(scope); //靠
app.controller("MyController", function($scope, $interpolate){
//这里的第2个参数到底是怎么回事？注入服务？它不应该与前面的$parse一样属于同一个形参吗？
自定义不同于｛｛｝｝的符号（略）
过滤器
｛｛ name | uppercase ｝｝在失去焦点时验证：app.directive('ngFocus', ... --> <input ... ng-focus/>
1.3+ ngMessages（去除复杂的ng-show指令？）
指令简介
指令就是自定义html元素／属性／类／注释？app.directive(myDirective', function(){ return { restrict: 'EACM', replace: true, template: '...'}; });
创建新的作用域？
scope: { someProperty: '@someAttr' }
内置指令
基础ng属性指令：ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
指令中使用子作用域：ng-app和ng-controller
ng-include
ng-switch
ng-repeat
ng-view
ng-if
ng-init
ng-bind
ng-cloak
ng-bind-template
ng-model
ng-show/hide
ng-change
ng-form（在一个表单里嵌套另一个？）
ng-click
ng-select
ng-submit
ng-attr-(suffix)
指令详解
定义作用域
隔离作用域？
绑定策略
本地作用域属性：@attr =attr &attr
translude？
生命周期*
compile（对模板DOM进行转换）
link（将作用域与DOM链接）
自定义验证（发送Ajax请求）
ngModel
自定义验证
模块加载
app.config/run( ...多重视图和路由
路由模式标签：/#!/...
HTML5：通过$location服务使用History API
路由事件
$routeChangeStart
$routeChangeSuccess
$routeChangeError
$routeUpdate
更多
$window.location.href = "/reload/page";
依赖注入
p109 通过annotate，在实例化时将传入函数的参数列表提取出来（怎么做到的？）> injector.annotate( function($q, greeter){} )
["$q", "greeter"]
injector.invoke( function($http, greeter){} ) //参数顺序就没有意义了（靠！）
显示注入声明
aControllerFactory.$inject = ['$scope', 'greeter'];
行内注入声明
app.controller('MyController', ['$scope', 'greeter', function($scope, greeter){...}];
ngMin：预压缩并设置依赖注入？
服务
app.factory('githubService', function($http){ ... });$http返回的是promise对象...
app.controller('ServiceController', function($scope, githubService){...}); //靠，ng的依赖注入真的很精妙～
5种方法创建服务：factory service constant value provider
略
XHR和服务器通信
$http拦截器
... $httpProvider.interceptors.push('MyInterceptor');
$resource：访问REST
Restangular库
XHR实践
JSONPCORS
服务器端支持：Access-Control-Allow-Origin
promise
var deferred = $q.defer();resolve
reject
notify
then(successFun, errorFun, notifyFun)
.catch(function(reason){...})
服务器通信
测试
p270 Karma与持续集成服务（JenkinsCI, TravisCI）协作得很好Protractor
事件
架构
AngularJS动画
$animate服务：ng-[EVENT]-active CSS类ngRepeat
ngView
ngInclude
ngSwitch
ngIf
ngClass
ngShow/Hide
CSS3过渡与@keyframes动画
第3方库：Animate.css, TweenMax/Lite
digest循环和$apply
$digest循环$watch列表
脏值检查：只要有任何值发生变化，应用将退回到$watch循环中，直到检测不到更新
$watchCollection
$evalAsync列表（$$asyncQueue）
$apply
揭秘AngularJS
AngularJS精华扩展
移动应用
ngTouch移动设备首先会检测到一个tap，然后等待300ms去检测其他事件（doubletap），之后才会触发click
ng-click：快速点击？
ngSwipeLeft/Right
$swipe服务
angular-gestures和多点触控（基于Hammer.js）
Cordova中的原生应用（有点像Rails）
使用Yeoman构建
本地化
angular-translate（略）运行时切换语言＊
angular-gettext：.pot => .js？
缓存
$cacheFactory安全性？
严格的上下文转义：$sce服务AngularJS和IE浏览器
IE不希望元素名以ng开头，除非声明了名字空间：<html xmlns:ng="http://angularjs.org">IE是唯一缓存XHR请求的？
p393 Web爬虫通常不会抓取JS应用（需要包含JS解释器）？
Google会把hashbang（#!）转换为?+escaped_fragment_=... ？
获取快照（？）
PhantomJS
Zombie.js
Prerender.io Node服务器
构建AngularJS Chrome应用
优化AngularJS应用
bindonce调试AngularJS
Chrome扩展Batarang下一步
jqLite和jQueryGrunt
grunt-angular-templates
Lineman
Bower
Yeoman
配置Angular生成器
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angularjs路由.让人激动的技术.真给前端长脸了.
- AngularJS学习笔记
- AngularJs教程地址
- Angularjs过滤器的开发.
- Angular2 Decorator
- Angular2 How to Repeat a List
- Angular2 inject a Component into a Component
- Angular2 Template Syntax
- 1 Angular2 Set up
- 简话Angular 03 Angular内置表达式大全
- angular directive详解
- 创建 AngularJS 自定义过滤器，带自定义参数
- AngularJs记录学习04
- AngularJs记录学习03
- AngularJs记录学习02
- 【AngularJS】Yeoman安装
- 【AngularJS】【03】使用AngularJS进行开发
- angularjs 分页精华代码
- AngularJS学习笔记<1>环境配置
- 现在就开始使用AngularJS的三个重要原因