【发布时间】：2015-05-04 15:49:47
【问题描述】：
我正在尝试设置一个角度应用程序，该应用程序将根据路由动态加载控制器。我正在关注这个tutorial，但我无法让它工作。我还对适合我的教程代码进行了一些小的修改，但我认为它们不是问题。
我已经把我几乎所有的代码流都放在这里了，所以如果你想跳过它，错误在最后一个sn-ps中。
注意：我已经更改了代码 sn-ps。
index.html 基本文件（我删除了 ng-app 和 ng-controller 参数，因为我意识到我使用 RequireJS 手动调用它们）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Little Buddha</title>
<link type="text/css" rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script type="text/javascript" src="assets/libs/requirejs/require.js" data-main="app/main.js"></script>
</body>
</html>
如您所见，我正在使用 RequireJS 动态加载所有脚本。这是 main.js 配置文件： （我还编辑了这个文件，将 angular 和 ngRoute 添加到 shim 配置中）
require.config({
baseUrl: '',
urlArgs: 'dev=' + new Date().getTime(),
paths: {
'angular' : '/assets/libs/angular/angular.min',
'ngRoute' : '/assets/libs/angular-route/angular-route.min',
'routeResolver' : '/app/routeResolver',
'app' : '/app/app',
'constants' : '/app/global/constants',
'AuthService' : '/app/global/AuthService',
'AppController' : '/app/global/AppController',
},
shim: {
'angular' : {
exports : 'angular',
},
'ngRoute' : {
deps : ['angular'],
},
}
});
require(
[
'ngRoute',
'app',
'routeResolver',
'constants',
'AppController',
'AuthService',
],
function () {
angular.bootstrap(document, ['littleBuddha']);
}
);
routeResolver.js
'use strict';
define([], function () {
var routeResolver = function () {
this.$get = function () {
return this;
};
this.route = function () {
var resolve = function (baseName, path, secure) {
if (!path) path = '';
var routeDef = {};
routeDef.templateUrl = path + baseName + '.html';
routeDef.controller = baseName + 'Controller';
routeDef.secure = (secure) ? secure : false;
routeDef.resolve = {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var dependencies = [path + baseName + 'Controller.js'];
return resolveDependencies($q, $rootScope, dependencies);
}]
};
return routeDef;
},
resolveDependencies = function ($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply()
});
return defer.promise;
};
return {
resolve: resolve
}
};
};
var servicesApp = angular.module('routeResolverServices', []);
//Must be a provider since it will be injected into module.config()
servicesApp.provider('routeResolver', routeResolver);
});
app.js
'use strict';
define(['routeResolver'], function () {
var app = angular.module('littleBuddha', ['routeResolverServices']);
app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider',
'$compileProvider', '$filterProvider', '$provide',
function ($routeProvider, routeResolverProvider, $controllerProvider,
$compileProvider, $filterProvider, $provide) {
console.log('test');
app.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
var route = routeResolverProvider.route;
$routeProvider
.when('/login', route.resolve('Login', '/app/components/login/'))
.otherwise({ redirectTo: '/login' });
}
]);
return app;
});
最后，AppController.js：
'use strict';
define(['app'], function (app) {
//This controller retrieves data from the customersService and associates it with the $scope
//The $scope is ultimately bound to the customers view due to convention followed by the routeResolver
app.register.controller('AppController', function ($scope, USER_ROLES, AuthService) {
$scope.currentUser = null;
$scope.userRoles = USER_ROLES;
$scope.isAuthorized = AuthService.isAuthorized;
$scope.setCurrentUser = function (user) {
$scope.currentUser = user;
};
});
return app;
});
编辑
所以，现在我找到了问题所在。在 app.js 中，app.config 函数永远不会被调用，因此寄存器参数永远不会被应用，并且路由永远不会被计算。实际上，console.log('test') 从未被打印出来。
【问题讨论】：
标签： javascript angularjs