angularJS——模塊

時間 2019-12-01

原文原文鏈接

1、在講angularjs的模塊以前，咱們先介紹一下angular的一些知識點：html

AngularJS是純客戶端技術，徹底用Javascript編寫的。它使用的是網頁開發的常規技術(HTML,CSS,Javascript)，目的是讓網頁應用開發更快更容易。angularjs

AngularJS簡化應用開發的一個重要方法是，將一些通用的低級開發操做包裝起來提供給開發者。AngularJS會自動處理好這些低級操做。它們包括：數組

　　1.DOM操做
　　2.設置事件的監聽
　　3.輸入驗證，由於AngularJS會處理大部分這些操做，因此開發者就能更多的專一在應用的業務邏輯上，更少地編寫那些重複性的、易錯的、低級的代碼。瀏覽器

在AngularJS簡化開發的同時，它也爲客戶端帶來了一些精巧的技術，它們包括：app

　　1.數據、業務邏輯、視圖的分離
　　2.數據和視圖的自動綁定
　　3.通用服務
　　4.依賴注入（主要用於聚合服務）
　　5.可擴展的HTML編譯器(徹底由JavaScript編寫)
　　6.易於測試
　　7.客戶端對這些技術的需求其實已經存在好久了。ide

同時，你還能夠用AngularJS來開發單頁或者多頁的應用，不過其主要仍是用來開發單頁的。 AngularJS支持瀏覽器的歷史操做，向前，向後按鈕，單頁應用中的收藏操做。單元測試

2、接下來，咱們來詳細講解angularJS的模塊。測試

大部分應用都有一個主方法用來實例化、組織、啓動應用。AngularJS應用沒有主方法，而是使用模塊來聲明應用應該如何啓動。這種方式有如下幾個優勢：this

　　1.啓動過程是聲明式的，因此更容易懂。
　　2.在單元測試是不須要加載所有模塊的，所以這種方式有助於寫單元測試。
　　3.能夠在特定狀況的測試中增長額外的模塊，這些模塊能更改配置，能幫助進行端對端的測試。
　　4.第三方代碼能夠打包成可重用的模塊。
　　5.模塊能夠以任何前後或者並行的順序加載（由於模塊的執行自己是延遲的）。spa

舉個例子：

 1 <!doctype html>
 2 <html ng-app="myApp">
 3 <head>
 4     <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
 5     <script>
 6        var myAppModule = angular.module('myApp', []);
 7  　　　　　　// configure the module.
 8  　　　　　　// in this example we will create a greeting filter
 9  　　 myAppModule.filter('greet', function() {
10   　　　　    return function(name) {
11    　　　　　　　  return 'Hello, ' + name + '!';
12   　　　　   };
13  　　});
14     </script>
15 </head>
16 <body>
17     <div>{{ 'World' | greet }}</div>
18 </body>
19 </html>

上面的例子，咱們是經過在<html ng-app="myApp">中進行指定，來實現使用myApp這個模塊啓動應用的。

以上這個例子寫法很簡單，可是不適合用一樣的寫法來寫大型應用。咱們推薦是將你的應用拆分紅如下幾個模塊：

　　1.一個服務模塊，用來作服務的聲明。
　　2.一個指令模塊，用來作指令的聲明。
　　3.一個過濾器模塊，用來作過濾器聲明。
　　4.一個依賴以上模塊的應用級模塊，它包含初始化代碼。

舉個例子：

 1 <!doctype html>
 2 <html ng-app="xmpl">
 3  <head>
 4   <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
 5   <script src="script.js"></script>
 6  </head>
 7  <body>
 8   <div ng-controller="XmplController">
 9    {{ greeting }}!
10   </div>
11  </body>
12 </html>
13 [/code]
14  
15 script.js:
16  
17 [code]
18 angular.module('xmpl.service', []).   //服務模塊
19  value('greeter', {    //自定義greeter對象
20   salutation: 'Hello',
21   localize: function(localization) {
22     this.salutation = localization.salutation;
23   },
24   greet: function(name) {
25     return this.salutation + ' ' + name + '!';
26   }
27  }).
28  value('user', {   //自定義user對象
29   load: function(name) {
30     this.name = name;
31   }
32  });
33 angular.module('xmpl.directive', []);  //指令模塊
34 angular.module('xmpl.filter', []);   //過濾器模塊
35 angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模塊xmpl依賴於數組中的模塊
36  run(function(greeter, user) {
37   // 初始化代碼，應用啓動時，會自動執行
38   greeter.localize({
39     salutation: 'Bonjour'
40   });
41   user.load('World');
42  })
43 // A Controller for your app
44 var XmplController = function($scope, greeter, user) {
45    $scope.greeting = greeter.greet(user.name);
46 }

這樣拆分的緣由是，在你的測試中經常須要忽略掉初始化代碼，由於這些代碼比較難測試。經過把它拆分出來就能在測試中方便地忽視掉它。經過只加載和當前測試相關的模塊，也能使測試更專注。以上只是一個建議，你能夠放心根據你的具體狀況來調整。

一個模塊就是一系列配置和代碼塊的集合，它們是在啓動階段就附加到應用上的。一個最簡單的模塊由兩類代碼塊集合組成的：

配置代碼塊 —— 在注入提供者注入和配置階段執行。只有注入提供者和常量能夠被注入到配置塊中。這是爲了防止服務在被配置好以前就被提早初始化。
運行代碼塊 —— 在注入器被建立後執行，被用來啓動應用的。只有實例和常量能被注入到運行塊中。這是爲了防止在運行後還出現對系統的配置。

代碼實現：

 1 angular.module('myModule', []).  
 2 　　config(function(injectables) { // provider-injector      配置代碼塊
 3 　　　　// This is an example of config block.
 4 　　　　// You can have as many of these as you want.
 5 　　　　// You can only inject Providers (not instances)
 6 　　　　// into the config blocks.
 7 　　}). run(function(injectables) { // instance-injector      運行代碼塊
 8 　　　　// This is an example of a run block.
 9 　　　　// You can have as many of these as you want.
10 　　　　// You can only inject instances (not Providers)
11 　　　　// into the run blocks
12 　　});

模塊還有一些配置的簡便方法，使用它們的效果等同於使用代碼塊。舉個例子：

 1 angular.module('myModule', []).
 2  value('a', 123).
 3  factory('a', function() { return 123; }).
 4  directive('directiveName', ...).
 5  filter('filterName', ...);
 6 // is same as
 7 angular.module('myModule', []).
 8  config(function($provide, $compileProvider, $filterProvider) {
 9   $provide.value('a', 123)
10   $provide.factory('a', function() { return 123; })
11   $compileProvider.directive('directiveName', ...).
12   $filterProvider.register('filterName', ...);
13  });

配置塊會按照$provide, $compileProvider, $filterProvider，註冊的順序，依次被應用。惟一的例外是對常量的定義，它們應該始終放在配置塊的開始處。

運行塊是AngularJS中最像主方法的東西。一個運行塊就是一段用來啓動應用的代碼。它在全部服務都被配置和全部的注入器都被建立後執行。運行塊一般包含了一些難以測試的代碼，因此它們應該寫在單獨的模塊裏，這樣在單元測試時就能夠忽略它們了。

模塊能夠把其餘模塊列爲它的依賴。「依賴某個模塊」意味着須要把這個被依賴的模塊在本塊模塊以前被加載。換句話說被依賴模塊的配置塊會在本模塊配置塊前被執行。運行塊也是同樣。任何一個模塊都只能被加載一次，即便它被多個模塊依賴。

模塊是一種用來管理$injector配置的方法，和腳本的加載沒有關係。如今網上已有不少控制模塊加載的庫，它們能夠和AngularJS配合使用。由於在加載期間模塊不作任何事情，因此它們能夠以任意順序或者並行方式加載。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。