私はAngularJSが初めてです。学ぶために、私は AngularJS のチュートリアルに頼ってきました。現在、AngularSeed プロジェクト テンプレートを使用してアプリを構築しようとしています。プロジェクトを可能な限りモジュール化しようとしています。そのため、私のコントローラーはいくつかのファイルに分割されています。現在、私は以下を持っています：
/app
index.html
login.html
home.html
javascript
app.js
loginCtrl.js
homeCtrl.js
私のapp.jsファイルには次のものがあります：
'use strict';
var app = angular.module('site', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/login', {templateUrl: 'app/login.html', controller:'loginCtrl'});
$routeProvider.when('/home', {templateUrl: 'app/home.html', controller:'homeCtrl'});
$routeProvider.otherwise({redirectTo: '/login'});
});
私の loginCtrl.js ファイルは、現時点では非常に基本的なものです。次のものしかありません。
'use strict';
app.controller('loginCtrl',
function loginCtrl($scope) {
}
);
私の homeCtrl.js は、名前を除いてほとんど同じです。次のようになります。
'use strict';
app.controller('homeCtrl',
function homeCtrl($scope) {
}
);
私の index.html ファイルは angularSeed index-async.htmlファイルです。ただし、依存関係をロードすると、次のようになります。
// load all of the dependencies asynchronously.
$script([
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js',
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js',
'javascript/app.js',
'javascript/loginCtrl.js',
'javascript/homeCtrl.js'
], function() {
// when all is done, execute bootstrap angular application
angular.bootstrap(document, ['site']);
});
私の問題は、アプリが機能する場合と機能しない場合があることです。何かが他の何かの前にロードされるようなものです。
時々、このエラーが表示されます。また、コンソール ウィンドウに「Uncaught ReferenceError: app is not defined」というエラーが loginCtrl.js で表示されることもあります。homeCtrl.js で時々発生します。
私は何を間違っていますか？コントローラーをモジュールに入れ、そのモジュールを app.js ファイルの app.config に渡す必要があるように感じます。ただし、a）それが許可されているかどうかはわかりません.b）それを行う方法がわかりません。