Skip to content

Instantly share code, notes, and snippets.

@chenzx
Created October 31, 2014 09:41
Show Gist options
  • Save chenzx/719274618067fc3cdc68 to your computer and use it in GitHub Desktop.
Save chenzx/719274618067fc3cdc68 to your computer and use it in GitHub Desktop.
AngularJS权威教程 笔记(AngularJS是一个很有意思的库,基于函数形参的依赖注入?酷!还有奇怪的$scope和指令)
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