chenzx/20141031-AngularJS权威教程

## 20141031-AngularJS权威教程
AngularJS权威教程
跳转至： 导航、 搜索
目录

    1 初识AngularJS
    2 数据绑定和第一个应用
    3 模块
    4 作用域
    5 控制器
    6 表达式
    7 过滤器
    8 指令简介
    9 内置指令
    10 指令详解
    11 模块加载
    12 多重视图和路由
    13 依赖注入
    14 服务
    15 XHR和服务器通信
    16 XHR实践
    17 promise
    18 服务器通信
    19 测试
    20 事件
    21 架构
    22 AngularJS动画
    23 digest循环和$apply
    24 揭秘AngularJS
    25 AngularJS精华扩展
    26 移动应用
    27 本地化
    28 缓存
    29 安全性？
    30 AngularJS和IE浏览器
    31 构建AngularJS Chrome应用
    32 优化AngularJS应用
    33 调试AngularJS
    34 下一步
    35 总结

初识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实践

    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

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和jQuery
    Grunt
    grunt-angular-templates
    Lineman
    Bower
    Yeoman
    配置Angular生成器

总结
	AngularJS权威教程
	跳转至：导航、搜索
	目录

	1 初识AngularJS
	2 数据绑定和第一个应用
	3 模块
	4 作用域
	5 控制器
	6 表达式
	7 过滤器
	8 指令简介
	9 内置指令
	10 指令详解
	11 模块加载
	12 多重视图和路由
	13 依赖注入
	14 服务
	15 XHR和服务器通信
	16 XHR实践
	17 promise
	18 服务器通信
	19 测试
	20 事件
	21 架构
	22 AngularJS动画
	23 digest循环和$apply
	24 揭秘AngularJS
	25 AngularJS精华扩展
	26 移动应用
	27 本地化
	28 缓存
	29 安全性？
	30 AngularJS和IE浏览器
	31 构建AngularJS Chrome应用
	32 优化AngularJS应用
	33 调试AngularJS
	34 下一步
	35 总结

	初识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实践

	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

	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和jQuery
	Grunt
	grunt-angular-templates
	Lineman
	Bower
	Yeoman
	配置Angular生成器

	总结