1
我最近通過ng-app默認方法將我的項目從bootstrapping angular轉換爲使用RequireJs並手動執行。大部分時間一切都正常，但是有一部分時間出現錯誤，說我的控制器和登錄頁面的服務是未定義的，所以控制器沒有正確加載並且值沒有被綁定。RequireJs依賴項的角度執行順序
我認爲這個問題源於執行依賴關係的順序。首先，這裏有錯誤：
錯誤：[NG：AREQ] http://errors.angularjs.org/1.3.15/ng/areq?p0=NavController&p1=not%20aNaNunction%2C%20got%20undefined
錯誤：[$注射器：unpr] http://errors.angularjs.org/1.3.15/ $噴油器/ unpr P0 = UsersServiceProvider％20％3 C-％20UsersService％20％ 3C-％20LoginController
到目前爲止，我只在Chrome中看到這個問題，並且當我有javascript控制檯打開時，一切似乎都奏效。我已經插入了一些console.log（）語句來了解這些腳本中的活動順序。對於三個文件，routeConfig.js，nav.js和usersService.js我有一個console.log在定義函數的第一行，另一個在角定義函數的第一行：
routeConfig.js ：
define(['angularAMD',
'angular-route',
'uiBootstrap',
'lib/angularSlideables',
'lib/ng-infinite-scroll',
'lib/angular-modal-service'], function (angularAMD) {
console.log('top of routeConfig');
var app = angular.module('svlPlatform', ['ngRoute', 'ui.bootstrap', 'angularSlideables', 'infinite-scroll', 'angularModalService']).value('THROTTLE_MILLISECONDS', 750);
app.config(['$routeProvider', function ($routeProvider, $httpProvider) {
console.log('inside routeConfig');
// Because angularAMD is built on requireJS, the following paths to controllerUrl follow requireJs's conventions.
// They don't need a .js extention and they are relative to the baseUrl specified in require.config.
$routeProvider
.when('/login', angularAMD.route({
templateUrl: 'views/login.html',
controllerUrl: 'controllers/login'
}))
.when('/me', angularAMD.route({
templateUrl: 'views/me.html',
controllerUrl: 'controllers/me'
})) //this continues and returns app...
nav.js：
define(['config/routeConfig', 'services/authService', 'services/usersService', 'services/menuService'], function(app) {
console.log('top of nav controller');
app.controller('NavController', ['$log', '$anchorScroll', '$location', '$rootScope', 'AuthService', 'UsersService', 'MenuService',
function ($log, $anchorScroll, $location, $rootScope, auth, users, menu) {
console.log('inside nav controller');
var vm = this;
menuScope = this;
function loadMenu() {
menu.items().then(function(response){
vm.menuItems = response.data.menuItems;
$('body').css("background-color","#f2f2f2");
markMenuActive(vm.menuItems);
}, function(error) {
console.log('There was a problem getting the menu data.');
});
} //continues...
usersService.js
define(['config/routeConfig', 'utils/urlBuilder', 'services/menuService'], function (app, _urlBuilder) {
console.log('top of users service');
var urlBuilder = _urlBuilder;
app.factory('UsersService', ['$http', 'MenuService', function ($http, menu) {
console.log('inside users service');
var meCache;
var refreshMeCache = function() {
meCache = $http.get('/api/v1/users/me');
menu.refreshItemsCache();
}; //continues...
這裏是我的requireJs配置：
require.config({
baseUrl: 'javascripts',
paths: {
'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min',
'angular-route': '//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min',
'bootstrapJs': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min',
'uiBootstrap': '//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min',
'angularAMD': '//cdn.jsdelivr.net/angular.amd/0.2.0/angularAMD.min'
},
shim: {
'angularAMD': ['angular'],
'bootstrapJs': [],
'uiBootstrap': ['angular'],
'lib/angularSlideables': ['angular'],
'lib/ng-infinite-scroll': ['angular'],
'angular-route': ['angular'],
'lib/angular-modal-service': ['angular']
},
deps: [
'bootstrapJs',
'config/routeConfig',
'services/authService',
'services/usersService',
'services/menuService',
'controllers/nav',
'controllers/main',
'lib/angular-modal-service',
'config/config',
'app'
]
});
當登錄頁面（第一頁的應用程序加載）裝入正確，我看到這個後我打開控制檯：
top of routeConfig
top of users service
top of nav controller
inside routeConfig
inside users service
inside nav controller
但是當頁面加載不正確時，這是我在控制檯中看到的。
top of routeConfig
inside routeConfig
top of users service
top of nav controller
...那麼錯誤
我不明白的引導過程或requireJs'加載過程足夠弄清楚爲什麼發生這種情況，以及如何解決它。感謝任何有任何想法的人。謝謝。