Created
October 31, 2014 09:41
-
-
Save chenzx/719274618067fc3cdc68 to your computer and use it in GitHub Desktop.
AngularJS权威教程 笔记（AngularJS是一个很有意思的库，基于函数形参的依赖注入？酷！还有奇怪的$scope和指令）
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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生成器 | |
| 总结 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment