AnglarJs学習ノート--Modules
9765 ワード
原版住所:http://code.angularjs.org/1.0.2/docs/guide/module
一、何がModuleですか?
多くのアプリケーションには初期化、ローディング、アプリケーションを起動するためのメーン方法があります.Anglarアプリケーションは、mainメソッドを必要としない代わりに、moduleは、指定された目的の声明式を提供し、アプリケーションがどのように起動するかを説明します.このようにするといくつかの長所があります.
この過程は声明で説明したので、もっと読みやすいです.ユニットテストでは、すべてのmoduleをロードする必要がないので、書き込みユニットのテストに役立ちます.追加のmoduleはシナリオテストにロードできます.いくつかの設定をカバーして、アプリケーションのエンドツーエンドテストを行います. testサードパーティコードは、多重化可能なmoduleとしてanglarにパッケージ化されてもよい.moduleは、任意の順序または並列にロードすることができる(モジュール実行の遅延性に応じてdue). ト delayed ネイチャー 保存先 module execution)
二、The Baics(ベース)
私たちはHelloをどうやって使うかを切実に知りたいです. ワールド moduleは仕事ができます.以下にいくつかの重要なことがあります.
module API(http://code.angularjs.org/1.0.2/docs/api/angular.Module)注意して言及したのは ng-ap="myApp">のmyApp moduleは、私たちが定義したmyAppをスターターに起動させます. module
三、(Recommended) セットアップ)推奨設定
上の例は簡単ですが、大規模な応用には属しません.私たちは自分のアプリケーションを以下のように提案し、複数のmoduleに分割することを提案します.
サービス moduleは、serviceを宣言するために使用されます.directive moduleは、directiveを宣言するために使用されます.filter moduleは、filterを宣言するために使用されます.アプリケーションレベルのmoduleは、上記のmoduleに依存し、初期化コードを含みます.このように区分する理由は、私たちがテストをする時、テストが難しくなる初期化コードを無視する必要があります.コードを独立したmoduleに分けることで、テスト中にそれらのコードを簡単に無視できます.このようにして、私達はもっと集中して対応するmoduleをロードしてテストを行うことができます.
上のはただ一つの提案です.自分のニーズに合わせて自由に作成できます.
四、Module Loading & Dependencies(モジュールローディングと依存)
moduleは、アプリケーションを起動するプロセスに適用されるブロックを構成するセットです.その最も簡単な形式では、二つの種類のブロックから構成される.
1.プロファイル blocks):provider登録と構成の過程で実行されます.providerとconstantだけがconfigrationに注入されます. blocks中です.これは、サービスの設定が完了する前にサービスが実行されるという意外性を回避するためです.
2.運転ブロック(run) blocks):injectorの作成が完了したら、アプリケーションを起動するために実行します.例(instances)と定数のみがrunに注入されても良い. ブロック中です.これは、さらなるシステム構成がプログラム実行中に実行されないようにするためです.
a) Configration ブロックブロック
便利な方法があります.moduleではconfigに相当します. blockたとえば:
configration blocksが適用される順序は、それらの登録の順序と一致する.定数定義については、追加の場合、すなわちconfigrationに配置される. blocksの最初の定数の定義.
b) Run ブロック
run blockはangglarの中でmain方法に一番近いものです.run blockはアプリケーションを起動するために実行しなければならないコードです.すべてのサービス構成、injectorが作成された後に実行されます.run ブロックには通常、比較的難しいユニットテストのコードが含まれています.このため、これらのコードは独立したmoduleに定義され、これらのコードはユニットテストで無視できるようにします.
c) Dependencies(依存)
一つのmoduleは、他のmoduleに依存してリストすることができます.一つのmoduleに依存するということは、要求されたmodule(依存された)は、要求module(他のmoduleに依存する必要があるmodule)ロードの前にロードされなければならないということである.言い換えれば、頼まれたmoduleのconfigration blockは要求のmoduleのconfigrationでできます. block実行前実行(before) the configration blocks or the requiring module,ここのorはどう説明しますか?)ルンに対して blockもこの道理です.各moduleは一回だけロードされます.他の多くのmoduleが必要としても.
d) Aynchronous Loading(非同期ローディング)
moduleは$injectorの構成を管理する方法の一つで、シナリオをロードしてVMまで何もしなくてもいいです.現在は既に既成のプロジェクトがあります.スクリプトのロードを処理するために専門的に使われています.アングラーにも使えます.moduleは、ロード中に何もしないので、VMに任意の順序でロードすることができる.スクリプト搭載器はこの特性を利用して並列にロードできます.
五、ユニット Testing(ユニットテスト)
ユニットテストの最も簡単な形式では、一つはテストでアプリケーションのサブセットを実装して実行します.重要なのは、各injectorに対して、moduleは一回だけロードされるということを意識する必要があります.通常のアプリケーションは一つのinjectorしかありません.しかし、テストでは、各テストケースにinjectorがあります.これは各VMにおいて、moduleが複数回ロードされることを意味します.moduleを正しく構築することは、以下の例のように、ユニットテストに役立ちます.
この例では、以下のようなmoduleを仮定して定義するつもりです.
いくつかのテストケースを書きましょう.
AnglarJs学習ノート AnglarJs学習ノート--html compler AnglarJs学習ノート--concepts AnglarJs学習ノート--directive AnglarJs学習ノート--expression AnglarJs学習ノート--Forms AnglarJs学習ノート--I 18 n/L 10 n AnglarJs学習ノート--IE Comptibility AnglarJs学習ノート--Modules AnglarJs学習ノート--Scope AnglarJs学習ノート--Dependency Injection AnglarJs学習ノート--Understanding the Model Component AnglarJs学習ノート--Understanding the Controller Component AnglarJs学習ノート--E 2 E Testing AnglarJs学習ノート--Understanding Anglar Templates AnglarJs学習ノート--Using$location AnglarJs学習ノート--Creating Services AnglarJs学習ノート--Injecting Services Into Controller AnglarJs学習ノート--Managing Service Dependencies AnglarJs学習ノート--unit-testing
一、何がModuleですか?
多くのアプリケーションには初期化、ローディング、アプリケーションを起動するためのメーン方法があります.Anglarアプリケーションは、mainメソッドを必要としない代わりに、moduleは、指定された目的の声明式を提供し、アプリケーションがどのように起動するかを説明します.このようにするといくつかの長所があります.
この過程は声明で説明したので、もっと読みやすいです.ユニットテストでは、すべてのmoduleをロードする必要がないので、書き込みユニットのテストに役立ちます.追加のmoduleはシナリオテストにロードできます.いくつかの設定をカバーして、アプリケーションのエンドツーエンドテストを行います. testサードパーティコードは、多重化可能なmoduleとしてanglarにパッケージ化されてもよい.moduleは、任意の順序または並列にロードすることができる(モジュール実行の遅延性に応じてdue). ト delayed ネイチャー 保存先 module execution)
二、The Baics(ベース)
私たちはHelloをどうやって使うかを切実に知りたいです. ワールド moduleは仕事ができます.以下にいくつかの重要なことがあります.
module API(http://code.angularjs.org/1.0.2/docs/api/angular.Module)注意して言及したのは ng-ap="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) セットアップ)推奨設定
上の例は簡単ですが、大規模な応用には属しません.私たちは自分のアプリケーションを以下のように提案し、複数のmoduleに分割することを提案します.
サービス moduleは、serviceを宣言するために使用されます.directive moduleは、directiveを宣言するために使用されます.filter moduleは、filterを宣言するために使用されます.アプリケーションレベルのmoduleは、上記のmoduleに依存し、初期化コードを含みます.このように区分する理由は、私たちがテストをする時、テストが難しくなる初期化コードを無視する必要があります.コードを独立したmoduleに分けることで、テスト中にそれらのコードを簡単に無視できます.このようにして、私達はもっと集中して対応するmoduleをロードしてテストを行うことができます.
上のはただ一つの提案です.自分のニーズに合わせて自由に作成できます.
四、Module Loading & Dependencies(モジュールローディングと依存)
moduleは、アプリケーションを起動するプロセスに適用されるブロックを構成するセットです.その最も簡単な形式では、二つの種類のブロックから構成される.
1.プロファイル blocks):provider登録と構成の過程で実行されます.providerとconstantだけがconfigrationに注入されます. blocks中です.これは、サービスの設定が完了する前にサービスが実行されるという意外性を回避するためです.
2.運転ブロック(run) blocks):injectorの作成が完了したら、アプリケーションを起動するために実行します.例(instances)と定数のみがrunに注入されても良い. ブロック中です.これは、さらなるシステム構成がプログラム実行中に実行されないようにするためです.
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) Configration ブロックブロック
便利な方法があります.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', ...);
});configration blocksが適用される順序は、それらの登録の順序と一致する.定数定義については、追加の場合、すなわちconfigrationに配置される. blocksの最初の定数の定義.
b) Run ブロック
run blockはangglarの中でmain方法に一番近いものです.run blockはアプリケーションを起動するために実行しなければならないコードです.すべてのサービス構成、injectorが作成された後に実行されます.run ブロックには通常、比較的難しいユニットテストのコードが含まれています.このため、これらのコードは独立したmoduleに定義され、これらのコードはユニットテストで無視できるようにします.
c) Dependencies(依存)
一つのmoduleは、他のmoduleに依存してリストすることができます.一つのmoduleに依存するということは、要求されたmodule(依存された)は、要求module(他のmoduleに依存する必要があるmodule)ロードの前にロードされなければならないということである.言い換えれば、頼まれたmoduleのconfigration blockは要求のmoduleのconfigrationでできます. block実行前実行(before) the configration blocks or the requiring module,ここのorはどう説明しますか?)ルンに対して blockもこの道理です.各moduleは一回だけロードされます.他の多くのmoduleが必要としても.
d) Aynchronous Loading(非同期ローディング)
moduleは$injectorの構成を管理する方法の一つで、シナリオをロードしてVMまで何もしなくてもいいです.現在は既に既成のプロジェクトがあります.スクリプトのロードを処理するために専門的に使われています.アングラーにも使えます.moduleは、ロード中に何もしないので、VMに任意の順序でロードすることができる.スクリプト搭載器はこの特性を利用して並列にロードできます.
五、ユニット 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!');
});
});
});