howdylikes

Google Developersってわかりづらいよね

AngularJS Moduleについて

AngularJSのModuleには2つのproperty(requires, name)と12のメソッドが存在する模様
https://code.angularjs.org/1.4.7/docs/api/ng/type/angular.Module
以下が12のメソッド よくわからないものもいくつか・・・

  • provider
  • factory
  • service
  • value
  • constant
  • decorator
  • animation
  • filter
  • controller
  • directive
  • config
  • run

ソース上でもmodule作成時にちゃんと作っていますね
https://github.com/angular/angular.js/blob/v1.4.7/src/loader.js#L111-L312

以下はmyappという自作モジュールのvalueメソッドに処理を追加する例

※valueは共通関数的な使い方をするためのものっぽいです

// script.js
var app = angular.module('myapp', []);
app.value('AdditionService', function (a, b) {
   return a + b ;
});

app.controller('myController', function($scope, AdditionService){
    this.hoge = AdditionService(10, 20);
});

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="myController as myctrl">
    <input ng-model="myctrl.hoge" />
</body>
</html>

結果

ちゃんと30が表示されてますね！
f:id:howdy39:20151125085113p:plain

モジュールの分割まわりのメモ

angular.moduleの２つ目の引数は別のモジュールを指定することが可能です。
複数プロジェクトで共通しそうなとこは以下のようにモジュールをわけておくとよさげですかね。

var myModule = angular.module('myModule', []);
myModule.value('AdditionService', function (a, b) {
    return a + b;
});

var app = angular.module('myapp', ['myModule']);

app.controller('myController', function($scope, AdditionService){
    this.hoge = AdditionService(10, 20);
});

なお、入れ子の場合は直近のが強いです
以下の例は1030になります

var myModule = angular.module('myModule', []);
myModule.value('AdditionService', function (a, b) {
    return a + b + 10;
});

var myModule2 = angular.module('myModule2', ['myModule']);
myModule2.value('AdditionService', function (a, b) {
    return a + b + 100;
});

var app = angular.module('myapp', ['myModule2']);
app.value('AdditionService', function (a, b) {
    return a + b + 1000;
});

app.controller('myController', function($scope, AdditionService){
    this.hoge = AdditionService(10, 20);
});

並列の場合は後で読み込んだものが強いです
以下の例は130になります

var myModule = angular.module('myModule', []);
myModule.value('AdditionService', function (a, b) {
    return a + b + 10;
});

var myModule2 = angular.module('myModule2', []);
myModule2.value('AdditionService', function (a, b) {
    return a + b + 100;
});

var app = angular.module('myapp', ['myModule', 'myModule2']);

app.controller('myController', function($scope, AdditionService){
    this.hoge = AdditionService(10, 20);
});

上書きしていくだけなので特に違和感がないと思いますがもし想定の処理が呼ばれなかったら上書きしてないか調べてる感じでしょうか

その他

app.controllerやapp.valueという書き方は自作モジュールで作ったメソッドを呼んで何かに登録している？
また上記メソッドは自身のモジュールのインスタンスを返しています
https://github.com/angular/angular.js/blob/v1.4.7/src/loader.js#L320-L345

そのためよくみるメソッドチェーンの書き方が可能になります

app.value(...)
  .controller(...)