AngularJs學習筆記--Modules


原版地址:http://code.angularjs.org/1.0.2/docs/guide/module

 

一、什么是Module

  很多應用都有一個用於初始化、加載(wires是這個意思嗎?)和啟動應用的main方法。angular應用不需要main方法,作為替代,module提供有指定目的的聲明式,描述應用如何啟動。這樣做有幾項優點:

  • 這過程是聲明描述的,更加容易讀懂。
  • 在單元測試中,不需要加載所有module,這對寫單元測試很有幫助。
  • 額外的module可以被加載到情景測試中,可以覆蓋一些設置,幫助進行應用的端對端測試(end-to-end test)。
  • 第三方代碼可以作為可復用的module打包到angular中。
  • module可以通過任意順序或並行加載(取決於模塊執行的延遲性,due to delayed nature of module execution)。

 

二、The Basics(基礎)

  我們很迫切想知道如何讓Hello World module能夠工作。下面有幾個關鍵的事情要注意:

  • module APIhttp://code.angularjs.org/1.0.2/docs/api/angular.Module
  • 注意的提及的在<html ng-app=”myApp”>中的myApp module,它讓啟動器啟動我們定義的myApp module
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>basics</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body>
<div class="ng-cloak">
    {{'Kitty' | greet}}
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    var simpleModule = angular.module("myApp", []);
    simpleModule.filter("greet", function () {
        return function(name) {
            return "Hello " + name + " !";
        }
    });
</script>
</body>
</html>

 

三、(Recommended Setup)推薦設置

  雖然上面的例子很簡單,它不屬於大規模的應用。我們建議將自己的應用按照如下建議,拆分為多個module

  • service module,用於聲明service
  • directive module,用於聲明directive
  • filter module,用於聲明filter
  • 應用級別的module,依賴上述的module,並且包含初始化的代碼。

  這樣划分的理由是,當我們在測試的時候,往往需要忽略那些讓測試變得困難的初始化代碼。通過將代碼分成獨立的module,在測試中就可以很容易地忽略那些代碼。這樣,我們就可以更加專注在加載相應的module進行測試。

  上面的只是一個建議,可以隨意地按照自己的需求制定。

 

四、Module Loading & Dependencies(模塊加載和依賴)

  module是配置(configuration)的集合,執行在啟動應用的進程中應用的塊(blocks)。在它的最簡單的形式中,由兩類block組成:

  1.配置塊(configuration blocks):在provider注冊和配置的過程中執行的。只有providerconstant(常量?)可以被注入(injected)到configuration blocks中。這是為了避免出現在service配置完畢之前service就被執行的意外。

  2.運行塊(run blocks):在injector創建完成后執行,用於啟動應用。只有實例(instances)和常量(constants)可以被注入到run block中。這是為了避免進一步的系統配置在程序運行的過程中執行。

angular.module('myModule', []).

    config(function(injectables) { // provider-injector

    // 這里是config block的一個例子

    // 我們可以根據需要,弄N個這樣的東東

    // 我們可以在這里注入Providers (不是實例,not instances)到config block里面

    }).

    run(function(injectables) { // instance-injector

    // 這里是一個run block的例子

    // 我們可以根據需要,弄N個這樣的東東

    // 我們只能注入實例(instances )(不是Providers)到run block里面

});

 

  a) Configuration Blocks(配置塊)

  有一個方便的方法在module中,它相當於config block。例如:

angular.module('myModule', []).
  value('a', 123).
    factory('a', function() { return 123; }).
    directive('directiveName', ...).
    filter('filterName', ...);

// 等同於

angular.module('myModule', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.value('a', 123)
    $provide.factory('a', function() { return 123; })
    $compileProvider.directive('directiveName', ...).
    $filterProvider.register('filterName', ...);
});

  configuration blocks被應用的順序,與它們的注冊的順序一致。對於常量定義來說,是一種額外的情況,即放置在configuration blocks開頭的常量定義。

 

  b) Run Blocks(應用塊)

  run block是在angular中最接近main方法的東東。run block是必須執行,用於啟動應用的代碼。它將會在所有service配置、injector創建完畢后執行。run block通常包含那些比較難以進行單元測試的代碼,就是因為這個原因,這些代碼應該定義在一個獨立的module中,讓這些代碼可以在單元測試中被忽略。

 

  c) Dependencies(依賴)

  一個module可以列出它所依賴的其他module。依賴一個module,意味着被請求(required)的module(被依賴的)必須在進行請求(requiringmodule(需要依賴其他modulemodule,請求方)加載之前加載完成。換一種說法,被請求的moduleconfiguration block會在請求的moduleconfiguration block執行前執行(before the configuration blocks or the requiring module,這里的or怎么解釋呢?)。對於run block也是這個道理。每一個module只能夠被加載一次,即使有多個其他module需要(require)它。

 

  d) Asynchronous Loading(異步加載)

  module是管理$injector配置的方法之一,不用對加載腳本到VM做任何事情。現在已經有現成的項目專門用於處理腳本加載,也可以用到angular中。因為module在加載的過程中不做任何事情,它們可以按照任意的順序被加載到VM中。腳本加載器可以利用這個特性,進行並行加載。

 

五、Unit Testing(單元測試)

  在單元測試的最簡單的形式中,其中一個是在測試中實例化一個應用的子集,然后運行它們。重要的是,我們需要意識到對於每一個injector,每一個module只會被加載一次。通常一個應用只會有一個injector。但在測試中,每一個測試用例都有它的injector,這意味着在每一個VM中,module會被多次加載。正確地構建module,將對單元測試有幫助,正如下面的例子:

  在這個例子中,我們准備假設定義如下的module

angular.module('greetMod', []).
factory('alert', function($window) {
     return function(text) {
       $window.alert(text);
     };

})
.value('salutation', 'Hello')
.factory('greet', function(alert, salutation) {
     return function(name) {
       alert(salutation + ' ' + name + '!');
     };
});
 

  讓我們寫一些測試用例:

describe('myApp', function() {
    // 加載應用響應的module,然后加載指定的將$window重寫為mock版本的測試module,
    // 這樣做,當進行window.alert()時,測試器就不會因被真正的alert窗口阻擋而停止
    //這里是一個在測試中覆蓋配置信息的例子
    beforeEach(module('greetMod', function($provide) {//這里看來是要將真正的$window替換為以下的東東
      $provide.value('$window', {
        alert: jasmine.createSpy('alert')
      });
    }));
     
    // inject()會創建一個injector,並且注入greet和$window到測試中。
    // 測試不需要關心如何寫應用,只需要關注如何測試應用。
    it('should alert on $window', inject(function(greet, $window) {
      greet('World');
      expect($window.alert).toHaveBeenCalledWith('Hello World!');
    }));
    
    // 這里是在測試中通過行內module和inject方法來覆蓋配置的方法
    it('should alert using the alert service', function() {
      var alertSpy = jasmine.createSpy('alert');
      module(function($provide) {
        $provide.value('alert', alertSpy);
      });
      inject(function(greet) {
        greet('World');
        expect(alertSpy).toHaveBeenCalledWith('Hello World!');
      });
    });
});

 

By Lcllao


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM