以下は私のアプリケーションのレイアウトです：
app.htmlコードは以下のとおりです。
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My AngularJS App</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="/static/app/controllers.js"></script>
</head>
<body>
<ul class="nav">
<li><a href="#admin">Admin</a></li>
<li><a href="#sales">Sales</a></li>
<li><a href="#purchase">Purchase</a></li>
</ul>
<div ng-controller="AppCtrl" ng-include="view.url">
</div>
</body>
</html>
/static/app/controllers.jsは次のとおりです。
var app = angular.module('MyApp', []);
app.controller('AppCtrl', ['$scope', '$location',
function ($scope, $location) {
$scope.$watch(
function () {
return $location.path();
},
function (path) {
var moduleName = path.split("/")[1];
if (moduleName) {
$scope.view = { url: "/static/app/" + moduleName + "/" + moduleName + ".html" };
}
});
} ]);
ここで、 admin.htmlが次のようになっているとします。
<div>
<p>Admin</p>
</div>
と sales.html、および purchase.html はほぼ同じです。その後、アプリのナビゲーションは期待どおりに機能します。admin リンクをクリックすると、admin.html がロードされて表示されます。ただし、admin.htmlが次の場合:
<div>
<p>Admin</p>
<script src="/static/app/admin/controllers.js"></script>
<div ng-controller="AdminCtrl" ng-include="subView.url">
</div>
</div>
そして/app/admin/controllers.jsは
var admin = angular.module('MyApp.Admin', []);
admin.controller('AdminCtrl', ['$scope', '$location',
function ($scope, $location) {
} ]);
その後、管理リンクをクリックすると、Google Chrome コンソールに次のエラーがスローされます。
Error: Argument 'AdminCtrl' is not a function, got undefined
at Error (<anonymous>)
AdminCtrl を /app/controllers.js に移動すると、機能します。しかし、私はそれが独自のディレクトリにあることを望みます。誰かがこれで私を助けることができますか? また、次のステップは、「view」をナビゲートするのと同様の方法で「subView」を表示することです。これに関するヒントは大歓迎です。