web-dev-qa-db-ja.com

Angular angular.bootstrapの後にモジュールを追加します

私は流星+角度を使用しています。私の意図は、アプリの後に依存関係を追加することですbootstrap（これは、パッケージが最初にブートストラップを処理するものであり、私はそれをあまり制御できないためです）。つまり、たとえば、すべてのコントローラーを1つのモジュールにコンパイルするという基本的なコード構造も適用したいと思います。

基本的な考え方は次のとおりです。

_'use strict';

angular.module('app.controllers', [])

    .controller('MainCtrl', function() {
        // ...
    })

    .controller('SubCtrl', function() {
        // ...
    })

    .controller('AnotherCtrl', function() {
        // ...
    });
_

次に、それを依存関係としてメインモジュールに含めます。

_angular.module('app', [
    'app.filters',
    'app.services',
    'app.directives',
    'app.controllers' // Here
]);
_

いくつかの調査の結果、私がやろうとしていること（ブートストラップ後に依存関係を追加すること）は、実際にはangularチームへの機能リクエストの一部であることがわかりました。したがって、私のオプションは、たとえば、_$controllerProvider_およびregister()関数：

_Meteor.config(function($controllerProvider) {
    $controllerProvider.register('MainCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('SubCtrl', function($scope) {
        // ...
    });
});

Meteor.config(function($controllerProvider) {
    $controllerProvider.register('AnotherCtrl', function($scope) {
        // ...
    });
});
_

それほどエレガントではありませんが、動作します。質問は次のとおりです。

  • configとregisterの部分を行うためのよりエレガントな方法は何ですか？
  • 代わりにモジュールを登録する方法はありますか？
angularjsmeteor
20
user1966211

モジュールを作成します。

angular.module('app.controllers', []);

依存関係として追加します。

angular.module('app').requires.Push('app.controllers');
12
Diego

私が見た中で機能する唯一の方法は、angular.module関数を、アプリに使用したモジュールを返す独自の関数に置き換えることですbootstrap。

var myApp = angular.module('myApp', []);    
angular.module = function() {
    return myApp;
}

そのため、後で登録されるすべてのモジュールは、実際にはmyAppモジュールに登録されます。

この方法を質問で説明した方法（$controllerProviderなどのプロバイダーを使用）と組み合わせると、angular.bootstrapの後に「モジュール」を追加できます。

デモ

デモについては、このjsfiddleを参照してください： https://jsfiddle.net/josketres/aw3L38r4/

欠点

  • angular.bootstrapの後に追加されたモジュールのconfigブロックは呼び出されません。これを修正する方法があるかもしれませんが、私はそれを見つけていません。
  • angular.moduleをオーバーライドすると、「ダーティハック」のように感じます。
1
josketres

このプレゼンテーション （スライド12）によると、アプリにcontrollerProviderを割り当てることができます。

モジュールのcontrollerメソッドの置き換え例： http://jsfiddle.net/arzo/HB7LU/6659/ ==

var myApp = angular.module('myApp', []);

//note overriding controller method might be a little controversial :D 
myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) {
    var backup = myApp.controller;
    myApp.controller = $controllerProvider.register;
    myApp.controller.legacy = backup;
})

myApp.run(function ($rootScope, $compile) {

    myApp.controller('MyCtrl', function($scope) {
        $scope.name = 'Superhero';
    })

    var elem;
    var scope=$rootScope;
    elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) {
        console.log('newly created element', clonedElement[0])
        document.body.appendChild(clonedElement[0]);
    });
    console.log('You can access original register via', myApp.controller.legacy);
})
1
test30