コントローラーを動的に追加する

AngularJSでコントローラーを後で追加する方法です。

ある特定のページにアクセスされた時にだけ特別な処理を行いたいといった場合、最初からコントローラーを用意するのではなく、その特定のページにアクセスされた時にだけコントローラーを追加して対応したいといったことがたまにあります。

ですが、通常の書き方ではコントローラーを定義しても動作しません。仕方なく最初にすべてのコントローラーを読み込んでいたのですが、動的に追加する方法を紹介している記事があったので、以下はその方法です。

メインのファイル

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

myApp.config(function ($controllerProvider, $animateProvider, $compileProvider, $filterProvider, $provide) {
    myApp.controllerProvider = $controllerProvider;

    // コントローラー以外
    // myApp.animateProvider = $animateProvider;
    // myApp.filterProvider = $filterProvider;
    // myApp.compileProvider = $compileProvider;
    // myApp.provide = $provide;
});

コントローラーを後で追加するには、「$controllerProvider」を使います。ただし、$controllerProviderは「config」内でしか呼び出せないので、事前に「$controllerProvider」の参照先をモジュールに格納しておくようです。

後で追加するコントローラーのファイル

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

myApp.controllerProvider.register('ExampleAddCtrl', function($scope) {
    alert("add controller");
});

「$controllerProvider.register()」を使うことでコントローラーの追加ができます。

なんにせよ、後で追加可能なら通常の書き方（controller()）で登録できてもよさげな気がしますが、なにか問題があったりするんでしょうか。実際に試してみた限りではとくに問題ありませんでしたが...

• AngularJS で controller, service 等を遅延ロード(定義)する