2

AngularJS 独自のチュートリアルに従って、AngularJS のビューとルーティングのメカニズムを学ぼうとしています。

私の問題は、チュートリアルがすべてのコントローラーをグローバルスコープで宣言していることです。コントローラーを追加すると汚染されるため、これは悪い習慣だと思います。

これは、前述のチュートリアルに従って作成できた簡単な作業ページです (フィドルもあります)。

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.js"></script>
        <script>
            "use strict";

            var MyFirstController = function ($scope) {
                // Do something here.
            };

            var MySecondController = function ($scope) {
                // Do something here.
            };

            var myModule = angular.module("MyModule", []);

            myModule.config(["$routeProvider", function ($routeProvider) {
                $routeProvider.when("/first-page", {
                    template: "<p>My first controller.</p>",
                    controller: MyFirstController
                });

                $routeProvider.when("/second-page", {
                    template: "<p>My second controller.</p>",
                    controller: MySecondController
                });
            }]);

            $(document).ready(function () {
                angular.bootstrap(document, ["MyModule"]);
            });
        </script>
    </head>
    <body>
        <h1>Test</h1>
        <div data-ng-view></div>
        <p><a href="#/first-page">Click me!</a></p>
        <p><a href="#/second-page">Click me too!</a></p>
    </body>
</html>

素朴なので、コントローラーをモジュール内に移動しようとしました。

myModule.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when("/first-page", {
        template: "<p>My first controller.</p>",
        controller: MyFirstController
    });

    $routeProvider.when("/second-page", {
        template: "<p>My second controller.</p>",
        controller: MySecondController
    });
}]);

myModule.controller("MyFirstController", ["$scope", function ($scope) {
    // Do something here.
}]);

myModule.controller("MySecondController", ["$scope", function ($scope) {
    // Do something here.
}]);

残念ながら、(明らかに) 動作せず、ReferenceError: MyFirstController is not defined例外がスローされます。

AngularJS モジュールに独自のルート構成で独自のコントローラーを使用させるにはどうすればよいですか?

4

1 に答える 1

10

解決策がわかれば、それは非常に簡単です。コントローラーをオブジェクトではなく文字列として指定するだけです。

myModule.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when("/first-page", {
        template: "<p>My first controller.</p>",
        controller: "MyFirstController"
    });

    $routeProvider.when("/second-page", {
        template: "<p>My second controller.</p>",
        controller: "MySecondController"
    });
}]);

このようにして、AngularJS はコントローラー名をモジュール内で定義した名前に解決します。

ミニフィケーションも安全です！

私はそれを示すフィドルを作成しました。

于 2013-03-08T09:41:34.143 に答える