国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
AngularJs學(xué)習(xí)筆記

一、什么是Module?

  很多應(yīng)用都有一個(gè)用于初始化、加載(wires是這個(gè)意思嗎?)和啟動(dòng)應(yīng)用的main方法。angular應(yīng)用不需要main方法,作為替代,module提供有指定目的的聲明式,描述應(yīng)用如何啟動(dòng)。這樣做有幾項(xiàng)優(yōu)點(diǎn):

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

 

二、The Basics(基礎(chǔ))

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

  • module APIhttp://code.angularjs.org/1.0.2/docs/api/angular.Module
  • 注意的提及的在<html ng-app=”myApp”>中的myApp module,它讓啟動(dòng)器啟動(dòng)我們定義的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)推薦設(shè)置

  雖然上面的例子很簡單,它不屬于大規(guī)模的應(yīng)用。我們建議將自己的應(yīng)用按照如下建議,拆分為多個(gè)module

  • service module,用于聲明service。
  • directive module,用于聲明directive。
  • filter module,用于聲明filter
  • 應(yīng)用級(jí)別的module,依賴上述的module,并且包含初始化的代碼。

  這樣劃分的理由是,當(dāng)我們?cè)跍y(cè)試的時(shí)候,往往需要忽略那些讓測(cè)試變得困難的初始化代碼。通過將代碼分成獨(dú)立的module,在測(cè)試中就可以很容易地忽略那些代碼。這樣,我們就可以更加專注在加載相應(yīng)的module進(jìn)行測(cè)試。

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

 

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

  module是配置(configuration)的集合,執(zhí)行在啟動(dòng)應(yīng)用的進(jìn)程中應(yīng)用的塊(blocks)。在它的最簡單的形式中,由兩類block組成:

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

  2.運(yùn)行塊(run blocks):在injector創(chuàng)建完成后執(zhí)行,用于啟動(dòng)應(yīng)用。只有實(shí)例(instances)和常量(constants)可以被注入到run block中。這是為了避免進(jìn)一步的系統(tǒng)配置在程序運(yùn)行的過程中執(zhí)行。

angular.module('myModule', []).    config(function(injectables) { // provider-injector    // 這里是config block的一個(gè)例子    // 我們可以根據(jù)需要,弄N個(gè)這樣的東東    // 我們可以在這里注入Providers (不是實(shí)例,not instances)到config block里面    }).    run(function(injectables) { // instance-injector    // 這里是一個(gè)run block的例子    // 我們可以根據(jù)需要,弄N個(gè)這樣的東東    // 我們只能注入實(shí)例(instances )(不是Providers)到run block里面});

 

  a) Configuration Blocks(配置塊)

  有一個(gè)方便的方法在module中,它相當(dāng)于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被應(yīng)用的順序,與它們的注冊(cè)的順序一致。對(duì)于常量定義來說,是一種額外的情況,即放置在configuration blocks開頭的常量定義。

 

  b) Run Blocks(應(yīng)用塊)

  run block是在angular中最接近main方法的東東。run block是必須執(zhí)行,用于啟動(dòng)應(yīng)用的代碼。它將會(huì)在所有service配置、injector創(chuàng)建完畢后執(zhí)行。run block通常包含那些比較難以進(jìn)行單元測(cè)試的代碼,就是因?yàn)檫@個(gè)原因,這些代碼應(yīng)該定義在一個(gè)獨(dú)立的module中,讓這些代碼可以在單元測(cè)試中被忽略。

 

  c) Dependencies(依賴)

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

 

  d) Asynchronous Loading(異步加載)

  module是管理$injector配置的方法之一,不用對(duì)加載腳本到VM做任何事情?,F(xiàn)在已經(jīng)有現(xiàn)成的項(xiàng)目專門用于處理腳本加載,也可以用到angular中。因?yàn)?/span>module在加載的過程中不做任何事情,它們可以按照任意的順序被加載到VM中。腳本加載器可以利用這個(gè)特性,進(jìn)行并行加載。

 

五、Unit Testing(單元測(cè)試)

  在單元測(cè)試的最簡單的形式中,其中一個(gè)是在測(cè)試中實(shí)例化一個(gè)應(yīng)用的子集,然后運(yùn)行它們。重要的是,我們需要意識(shí)到對(duì)于每一個(gè)injector,每一個(gè)module只會(huì)被加載一次。通常一個(gè)應(yīng)用只會(huì)有一個(gè)injector。但在測(cè)試中,每一個(gè)測(cè)試用例都有它的injector,這意味著在每一個(gè)VM中,module會(huì)被多次加載。正確地構(gòu)建module,將對(duì)單元測(cè)試有幫助,正如下面的例子:

  在這個(gè)例子中,我們準(zhǔn)備假設(shè)定義如下的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 + '!');     };});
 

  讓我們寫一些測(cè)試用例:

describe('myApp', function() {    // 加載應(yīng)用響應(yīng)的module,然后加載指定的將$window重寫為mock版本的測(cè)試module,    // 這樣做,當(dāng)進(jìn)行window.alert()時(shí),測(cè)試器就不會(huì)因被真正的alert窗口阻擋而停止    //這里是一個(gè)在測(cè)試中覆蓋配置信息的例子    beforeEach(module('greetMod', function($provide) {//這里看來是要將真正的$window替換為以下的東東      $provide.value('$window', {        alert: jasmine.createSpy('alert')      });    }));         // inject()會(huì)創(chuàng)建一個(gè)injector,并且注入greet和$window到測(cè)試中。    // 測(cè)試不需要關(guān)心如何寫應(yīng)用,只需要關(guān)注如何測(cè)試應(yīng)用。    it('should alert on $window', inject(function(greet, $window) {      greet('World');      expect($window.alert).toHaveBeenCalledWith('Hello World!');    }));        // 這里是在測(cè)試中通過行內(nèi)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!');      });    });});

 

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
AngularJS 源碼分析1
AngularJS按需動(dòng)態(tài)加載template和controller?
初始化 Angular 懶加載模塊:使用MODULE_INITIALIZER的高級(jí)技巧
AngularJs module模塊簡介
AngularJS進(jìn)階(二十五)requirejs + angular + angular
啟動(dòng)和JQuery綁定--AngularJS學(xué)習(xí)筆記(二)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服