一、AngularJS 初始化加載流程
?
1、瀏覽器載入HTML,然后把它解析成DOM。
2、瀏覽器載入angular.js腳本。
3、AngularJS等到DOMContentLoaded事件觸發。
4、AngularJS尋找ng-app指令,這個指令指示了應用的邊界。
5、使用ng-app中指定的模塊來配置注入器($injector)。
6、注入器($injector)是用來創建“編譯服務($compile service)”和“根作用域($rootScope)”的。
7、編譯服務($compile service)是用來編譯DOM并把它鏈接到根作用域($rootScope)的。
8、ng-init指令將“World”賦給作用域里的name這個變量。
9、通過{{name}}的替換,整個表達式變成了“Hello World”。
?
二、AngularJS Provider/Service/Factory
?
1、什么是 provider ?
provider 可以為應用提供通用的服務,形式可以是常量,也可以是對象。
比如我們在 controller 里注入進來的 $http, $scope 都可以認為是 provider。
1 2 3 4 5 | app.controller( 'MainCtrl' , function ($scope, $http) { ?? $http.get(....).then(.....); } |
?
2、provider
現在讓我們自己來定制一個 provider
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // 方法 1 $provide.provider( 'test' , { ??? n:1; ??? $get: function () { ?????? return n; ???? }; }); // 方法 2 $provide.provider( 'test' , function () { ??? this .n = 2; ??? this .$get = function () { ??? return n; }; }); // 使用 app.controller( 'MainCtrl' , function ($scope, test) { ???? $scope.test = test; }); |
讓我們看看 provider 的內部實現代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function provider(name, provider_) { ?? if (isFunction(provider_)) { ?????? provider_ = providerInjector.instantiate(provider_); ?? } ??? if (!provider_.$get) { ??????? throw Error( 'Provider ' + name + ' must define $get factory method.' ); ??? } ??? return providerCache[name + providerSuffix] = provider_; } |
?
可以看到 provider 的基本原則就是通過實現 $get 方法來進行單例注入,使用時獲得的就是 $get 執行后的結果。
3、factory
那如果每次都要寫一個 $get 是不是很麻煩? OK,所以我們有了 factory。 factory 可以說是 provider 的變種, 方法中的第二個參數就是 $get 中的內容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 定義 factory $provide.factory( 'dd' , function () { ??? return new Date(); }); // 使用 app.controller( 'MainCtrl' , function ($scope, dd) { ???? $scope.mydate = dd; }); |
factory 的實現源代碼:
1 2 3 4 5 6 7 8 9 | function factory(name, factoryFn) { ? return provider(name, { ??? $get: factoryFn }); } |
4、service
在 factory 的例子中我們還是需要 new 一個對象返回,而 service 就更簡單了,這一步都幫你省了, 他的第二個參數就是你要返回的對象類, 也就是 new 的哦給你工作都不用你做了。夠清爽吧?
// 定義 service
$provide.service('dd', Date);
下面是 service 的實現源代碼:
1 2 3 4 5 6 7 8 | function service(name, constructor) { ?? return factory(name, [ '$injector' , function ($injector) { ??????? return $injector.instantiate(constructor); ??? }]); } |
?
然后 factory 和 service 帶來代碼精簡的同時也損失了一些特性。 provider 定義的服務是可以通過模塊 config 來配置的。
?
三、AngularJS 動態添加元素和刪除元素
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $scope.userName= 'Welcome to Angular World!' ; $scope.test = function test(){ console.log( 'Angular 動態添加元素' ); } //通過$compile動態編譯html var html= "<div ng-click='test()'>}</div>" ; var template = angular.element(html); var mobileDialogElement = $compile(template)($scope); angular.element(document.body).append(mobileDialogElement); // remove移除創建的元素 var closeMobileDialog = function () { if (mobileDialogElement) { ?? mobileDialogElement.remove(); } |
?
四、AngularJS 事件廣播與接收
?
發送消息:?$scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
接收消息: $scope.on(name,function(event,data){ });
區別:?$emit 廣播給父controller ? $broadcast 廣播給子controller
?
broadcast 是從發送者向他的子scope廣播一個事件。
這里就是ParentController發送, ParentController 和 ChildController 會接受到, 而MainController是不會收到的
?
$emit 廣播給父controller,父controller 是可以收到消息
$on 有兩個參數function(event,msg) ?第一個參數是事件對象,第二個參數是接收到消息信息
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | angular.module( 'onBroadcastEvent' , [ 'ng' ]) ????? .controller( 'MainController' , function ($scope) { ??????? $scope.$on( 'To-MainController' , function (event,msg) { ????????? console.log( 'MainController received:' + msg); ??????? }); ????? }) ????? .controller( 'ParentController' , function ($scope) { ??????? $scope.click = function (msg) { ????????? $scope.$emit( 'To-MainController' ,msg + ',from ParentController to MainController' ); ????????? $scope.$broadcast( 'To-ChildController' , msg + ',from ParentController to ChildController' ); ????????? $scope.$broadcast( 'To-BrotherController' , msg + ',from ParentController to BrotherController' ); ??????? } ????? }) ????? .controller( 'ChildController' , function ($scope){ ??????? $scope.$on( 'To-ChildController' , function (event,msg) { ????????? console.log( 'ChildController received:' + msg); ??????? }); ????? }) ????? .controller( 'BrotherController' , function ($scope){ ??????? $scope.$on( 'To-BrotherController' , function (event, msg) { ????????? console.log( 'BrotherController received:' + msg); ??????? }); ????? }); |
?
五、AngularJS Promise Deferred實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var app = angular.module( 'app' , [ 'autocomplete' ]); app.factory( 'Suggestion' , function ($http, $q, $timeout){ ?? var suggestion = new Object(); ?? suggestion.getData = function (keyword) { ???? var deferred = $q.defer(); ???? $http.get( 'http://codesearch.sinaapp.com/search.php' , ???? }).success( function (data){ ?????? deferred.resolve(data); ???? }); ???? return deferred.promise; ?? } ?? return suggestion; }); app.controller( 'MySuggestionCtrl' , function ($scope, $sce,Suggestion){ ?? $scope.autoComplete = function (keyword){ ???? if (keyword){ ???????? Suggestion.getData(keyword).then( function (data){ ???????? var dataList = data.split( '|' ); ???????? $scope.dataList = dataList; ?????? }); ???? } ?? } }); |
多個Promise實例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var data2= "222" ; var promises = []; var deffered1? = $q.defer(); var deffered2? = $q.defer(); $timeout( function (){ ?? deffered1.resolve(data1); },2000); $timeout( function (){ ?? deffered2.resolve(data2); },2000); promises.push(deffered1.promise); promises.push(deffered2.promise); ? $q.all(promises).then( function (data){ ???? console.log(data); }); |
輸出: ["111", "222"] 這個一個數組對象順序與push的順序一致
六、AngularJS 全局scope與Isolate scope通信
1、AngularJS中,子作用域一般都會通過JavaScript原型繼承機制繼承其父作用域的屬性和方法。但有一個例外:在directive中使用scope: { ... },這種方式創建的作用域是一個獨立的"Isolate"作用域,它也有父作用域,但父作用域不在其原型鏈上,不會對父作用域進行原型繼承。這種方式定義作用域通常用于構造可復用的directive組件.
2、如果我們在子作用域中訪問一個父作用域中定義的屬性,JavaScript首先在子作用域中尋找該屬性,沒找到再從原型鏈上的父作用域中尋找,如果還沒找到會再往上一級原型鏈的父作用域尋找。在AngularJS中,作用域原型鏈的頂端是$rootScope,JavaScript尋找到$rootScope為止.
3、scope: { ... } - directive創建一個獨立的“Isolate”作用域,沒有原型繼承。這是創建可復用directive組件的最佳選擇。因為它不會直接訪問/修改父作用域的屬性,不會產生意外的副作用。
1、 = or =attr “Isolate”作用域的屬性與父作用域的屬性進行雙向綁定,任何一方的修改均影響到對方,這是最常用的方式;
2、?@ or @attr “Isolate”作用域的屬性與父作用域的屬性進行單向綁定,即“Isolate”作用域只能讀取父作用域的值,并且該值永遠的String類型;
3、?& or &attr “Isolate”作用域把父作用域的屬性包裝成一個函數,從而以函數的方式讀寫父作用域的屬性,包裝方法是$parse
1、父controller監聽全局scope(父scope)變量, 并廣播事件給子scope(directive scope,每個directvie都有自己獨立的scope作用域)
2、directive 定義本地scope,通過=、@、&(方法)字符顯示引用全局scope
3、directive scope(子scope)通過parent[$scope.$parent.xxx]引用全局scope的屬性
4、directive監聽全局scope變量變化,可以通過$scope.$parent.$watch方法
?
四、實例講解
http://www.cnblogs.com/hubcarl/p/4202053.html
?
七、AngularJS?$apply vs $digest
$digest cycle
, 并從$rootScope開始遍歷(深度優先)檢查數據變更。$timeout
里面延遲執行。$apply
。$evalAsync
, 會在angular操作DOM之后,瀏覽器渲染之前執行。$evalAsync
, 會在angular操作DOM之前執行,一般不這么用。$timeout
,會在瀏覽器渲染之后執行。 1 2 3 4 5 6 | $http.get( 'http://path/to/url' ).success( function (data){ ?? $scope.name = data.name; ?? $timeout( function (){ ???? //do sth later, such as log ?? }, 0, false ); }); |
?
? ? 詳細:https://github.com/atian25/blog/issues/5
?
八、AngularJS Directive 學習 實例
?
1、restrict 它限制directive為指定的聲明方式。如果省略的話,directive將僅僅允許通過屬性聲明
E - 元素名稱: <my-directive></my-directive>
A - 屬性名: <div my-directive="exp"></div>
C - class名: <div class="my-directive:exp;"></div>
M - 注釋 : <!-- directive: my-directive exp -->
2、dialog實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!DOCTYPE html> ? ?<html ng-app= "Dialog" > ? ?<head> ? ??? <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> ? ??? <title>directive-dialog</title> ? ??? <meta content= "IE=edge,chrome=1" http-equiv= "X-UA-Compatible" > ? ??? <script src= "../../sea-modules/angular/angularjs/1.1.5/angular.js" ></script> ? ?</head> ? ?<body> ? ?<div ng-controller= "MyCtrl" > ? ??? <button ng-click= "show=true" >show</button> ? ??? <dialog title= "Hello }" ? ??????????? visible= "}" ? ??????????? on-cancel= "show=false;" ? ??????????? on-ok= "show=false;methodInParentScope();" > ? ????? <!--上面的on-cancel、on-ok,是在directive的isoloate scope中通過&引用的。 ? ????? 如果表達式中包含函數,那么需要將函數綁定在parent scope(當前是MyCtrl的scope)中--> ? ????? Body goes here: username:} , title:}. ? ????? <ul> ? ??????? <!--這里還可以這么玩~names是parent scope的--> ? ??????? <li ng-repeat= "name in names" >}</li> ? ????? </ul> ? ??? </dialog> ? ?</div> ? ?<script type= "text/javascript" > ? ??? var myModule = angular.module( "Dialog" , []); ? ??? myModule.controller( "MyCtrl" , function ($scope) { ? ????? $scope.names = [ "name1" , "name2" , "name3" ]; ? ????? $scope.show = false ; ? ????? $scope.username = "carl" ; ? ????? $scope.title = "parent title" ; ? ????? $scope.methodInParentScope = function () { ? ??????? alert( "scope里面通過&定義的東東,是在父scope中定義!!。。。" ); ? ????? }; ? ??? }); ? ??? myModule.directive( 'dialog' , function factory() { ? ????? return { ? ??????? priority:100, ? ??????? template:[ '<div ng-show="visible">' , ? ????????? '??? <h3>}</h3>' , ? ????????? '??? <div class="body" ng-transclude></div>' , ? ????????? '??? <div class="footer">' , ? ????????? '??????? <button ng-click="onOk()">OK</button>' , ? ????????? '??????? <button ng-click="onCancel()">Close</button>' , ? ????????? '??? </div>' , ? ????????? '</div>' ].join( "" ), ? ??????? replace: false , ? ??????? transclude: true , ? ??????? restrict: 'E' , ? ??????? scope:{ ? ????????? title: "@" , //引用dialog標簽title屬性的值 ? ????????? onOk: "&" , //以wrapper function形式引用dialog標簽的on-ok屬性的內容 ? ????????? onCancel: "&" , //以wrapper function形式引用dialog標簽的on-cancel屬性的內容 ? ????????? visible: "@" //引用dialog標簽visible屬性的值 ? ??????? } ? ????? }; ? ??? }); ? ?</script> ? ?</body> ? ?</html> |
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态