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 モジュールに独自のルート構成で独自のコントローラーを使用させるにはどうすればよいですか?