您当前位置：首页 > 互联网 > AngularJS权威教程笔记（AngularJS是一个很有意思的库，基于函数形参的依赖注入？酷！还有奇怪的$scope和指令）

AngularJS权威教程笔记（AngularJS是一个很有意思的库，基于函数形参的依赖注入？酷！还有奇怪的$scope和指令）

来源：程序员人生发布时间：2014-11-03 09:22:34 阅读次数：8554次

AngularJS权威教程

跳转至：导航、搜索

1 初识AngularJS
2 数据绑定和第1个利用
3 模块
4 作用域
5 控制器
6 表达式
7 过滤器
8 指令简介
9 内置指令
10 指令详解
11 模块加载
12 多重视图和路由
13 依赖注入
14 服务
15 XHR和http://www.wfuyu.com/server/通讯
16 XHR实践
17 promise
18 http://www.wfuyu.com/server/通讯
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 下1步
35 总结

初识AngularJS

数据绑定和第1个利用

实时模板：<html ng-app> ... <input ng-model="name" .../> --> <h1>Hello, ｛｛ name ｝｝</h1>
1. 脏检查？$digest()循环
ng-controller="MyController"（控制器管辖视图）

模块

angular.module('myApp', ['deps']);

作用域

ng-app关联到$rootScope，而ng-controller创建1个新的$scope
$injector

控制器

app.controller("MyController", function($scope){ $scope.xxx=...; });

表达式

app.controller("MyController", function($scope, $parse){
1. $scope.$watch('expr', function(newVal, oldVal, scope){
  1. var parseFunc = $parse(newVal);
  2. $scope.parsedValue = parseFunc(scope); //靠
app.controller("MyController", function($scope, $interpolate){
1. //这里的第2个参数究竟是怎样回事？注入服务？它不应当与前面的$parse1样属于同1个形参吗？
自定义不同于｛｛｝｝的符号（略）

过滤器

｛｛ name | uppercase ｝｝
在失去焦点时验证：app.directive('ngFocus', ... --> <input ... ng-focus/>
1.3+ ngMessages（去除复杂的ng-show指令？）

指令简介

指令就是自定义html元素／属性／类／注释？
1. app.directive(myDirective', function(){ return { restrict: 'EACM', replace: true, template: '...'}; });
2. 创建新的作用域？
  1. scope: { someProperty: '@someAttr' }

内置指令

基础ng属性指令：
1. ng-href
2. ng-src
3. ng-disabled
4. ng-checked
5. ng-readonly
6. ng-selected
7. ng-class
8. ng-style
指令中使用子作用域：ng-app和ng-controller
1. ng-include
2. ng-switch
3. ng-repeat
4. ng-view
5. ng-if
6. ng-init
7. ng-bind
8. ng-cloak
9. ng-bind-template
10. ng-model
11. ng-show/hide
12. ng-change
13. ng-form（在1个表单里嵌套另外一个？）
14. ng-click
15. ng-select
16. ng-submit
17. ng-attr-(suffix)

指令详解

定义
作用域
1. 隔离作用域？
绑定策略
1. 本地作用域属性：@attr =attr &attr
2. translude？
生命周期*
1. compile（对模板DOM进行转换）
2. link（将作用域与DOM链接）
  1. 自定义验证（发送Ajax要求）
ngModel
自定义验证

模块加载

app.config/run( ...

多重视图和路由

路由模式
1. 标签：/#!/...
2. HTML5：通过$location服务使用History API
路由事件
1. $routeChangeStart
2. $routeChangeSuccess
3. $routeChangeError
4. $routeUpdate
更多
1. $window.location.href = "/reload/page";

依赖注入

p109 通过annotate，在实例化时将传入函数的参数列表提取出来（怎样做到的？）
1. > injector.annotate( function($q, greeter){} )
2. ["$q", "greeter"]
injector.invoke( function($http, greeter){} ) //参数顺序就没成心义了（靠！）
显示注入声明
1. aControllerFactory.$inject = ['$scope', 'greeter'];
行内注入声明
1. app.controller('MyController', ['$scope', 'greeter', function($scope, greeter){...}];
ngMin：预紧缩并设置依赖注入？

服务

app.factory('githubService', function($http){ ... });
1. $http返回的是promise对象...
app.controller('ServiceController', function($scope, githubService){...}); //靠，ng的依赖注入真的很精巧～
5种方法创建服务：factory service constant value provider
1. 略

XHR和http://www.wfuyu.com/server/通讯

$http
拦截器
1. ... $httpProvider.interceptors.push('MyInterceptor');
$resource：访问REST
Restangular库

XHR实践

JSONP
CORS
1. http://www.wfuyu.com/server/端支持：Access-Control-Allow-Origin

promise

var deferred = $q.defer();
1. resolve
2. reject
3. notify
then(successFun, errorFun, notifyFun)
1. .catch(function(reason){...})

http://www.wfuyu.com/server/通讯

测试

p270 Karma与延续集成服务（JenkinsCI, TravisCI）协作得很好
Protractor

事件

架构

AngularJS动画

$animate服务：ng-[EVENT]-active CSS类
1. ngRepeat
2. ngView
3. ngInclude
4. ngSwitch
5. ngIf
6. ngClass
7. ngShow/Hide
CSS3过渡与@keyframes动画
第3方库：Animate.css, TweenMax/Lite

digest循环和$apply

$digest循环
1. $watch列表
  1. 脏值检查：只要有任何值产生变化，利用将退回到$watch循环中，直到检测不到更新
  2. $watchCollection
2. $evalAsync列表（$$asyncQueue）
$apply

揭秘AngularJS

AngularJS精华扩大

移动利用

ngTouch
1. 移动装备首先会检测到1个tap，然后等待300ms去检测其他事件（doubletap），以后才会触发click
2. ng-click：快速点击？
3. ngSwipeLeft/Right
4. $swipe服务
angular-gestures和多点触控（基于Hammer.js）
Cordova中的原生利用（有点像Rails）
1. 使用Yeoman构建

本地化

angular-translate（略）
1. 运行时切换语言＊
angular-gettext：.pot => .js？

缓存

$cacheFactory

安全性？

严格的上下文转义：$sce服务

AngularJS和IE阅读器

IE不希望元素名以ng开头，除非声明了名字空间：<html xmlns:ng="http://angularjs.org">
IE是唯1缓存XHR要求的？
p393 Web爬虫通常不会抓取JS利用（需要包括JS解释器）？
Google会把hashbang（#!）转换为?+escaped_fragment_=... ？
获得快照（？）
1. PhantomJS
2. Zombie.js
Prerender.io Nodehttp://www.wfuyu.com/server/

构建AngularJS Chrome利用

优化AngularJS利用

bindonce

调试AngularJS

Chrome扩大Batarang

下1步

jqLite和jQuery
Grunt
grunt-angular-templates
Lineman
Bower
Yeoman
配置Angular生成器

总结

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 android 常见 action 使用

下一篇 一个Flash开发者从入门到放弃的成长之路

分享到: