您當前位置：
首頁 >
互聯網 > AngularJS權威教程 筆記（AngularJS是一個很有意思的庫，基于函數形參的依賴注入？酷！還有奇怪的$scope和指令）
AngularJS權威教程 筆記（AngularJS是一個很有意思的庫，基于函數形參的依賴注入？酷！還有奇怪的$scope和指令）
來源：程序員人生 發布時間：2014-11-03 09:22:34 閱讀次數：9167次
AngularJS權威教程
跳轉至：
導航、
搜索
|
目錄
- 1
初識AngularJS
- 2
數據綁定和第1個利用
- 3
模塊
- 4
作用域
- 5
控制器
- 6
表達式
- 7
過濾器
- 8
指令簡介
- 9
內置指令
- 10
指令詳解
- 11
模塊加載
- 12
多重視圖和路由
- 13
依賴注入
- 14
服務
- 15
XHR和http://www.vxbq.cn/server/通訊
- 16
XHR實踐
- 17
promise
- 18
http://www.vxbq.cn/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>
- 臟檢查？$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){
- $scope.$watch('expr', function(newVal, oldVal, scope){
- var parseFunc = $parse(newVal);
- $scope.parsedValue = parseFunc(scope); //靠
- app.controller("MyController", function($scope, $interpolate){
- //這里的第2個參數究竟是怎樣回事？注入服務？它不應當與前面的$parse1樣屬于同1個形參嗎？
- 自定義不同于｛｛｝｝的符號（略）
過濾器
- ｛｛ 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（在1個表單里嵌套另外一個？）
- 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){} ) //參數順序就沒成心義了（靠?。?/li>
- 顯示注入聲明
- 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://www.vxbq.cn/server/通訊
- $http
- 攔截器
- ... $httpProvider.interceptors.push('MyInterceptor');
- $resource：訪問REST
- Restangular庫
XHR實踐
- JSONP
- CORS
- http://www.vxbq.cn/server/端支持：Access-Control-Allow-Origin
promise
- var deferred = $q.defer();
- resolve
- reject
- notify
- then(successFun, errorFun, notifyFun)
- .catch(function(reason){...})
http://www.vxbq.cn/server/通訊
測試
- 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
- 移動裝備首先會檢測到1個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是唯1緩存XHR要求的？
- p393 Web爬蟲通常不會抓取JS利用（需要包括JS解釋器）？
- Google會把hashbang（#!）轉換為?+escaped_fragment_=... ？
- 獲得快照（？）
- PhantomJS
- Zombie.js
- Prerender.io Nodehttp://www.vxbq.cn/server/
構建AngularJS Chrome利用
優化AngularJS利用
- bindonce
調試AngularJS
- Chrome擴大Batarang
下1步
- jqLite和jQuery
- Grunt
- grunt-angular-templates
- Lineman
- Bower
- Yeoman
- 配置Angular生成器
總結
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
------分隔線----------------------------
------分隔線----------------------------
