我遵循Dan Wahlin的示例,使用requirejs但使用角度ui-router动态加载控制器。
这是我的应用程序.js
var bootstrapper = angular.module('etrading', ['ui.router', 'ngSanitize','kendo.directives', 'common']);
function routeProvider($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, routeResolverProvider) {
$provide.decorator('$exceptionHandler', extendExceptionHandler);
bootstrapper.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
var route = routeResolverProvider.route();
$stateProvider.state('etrading', route.resolve('shell', 'core/', 'vm')).state('equityportfolio', route.resolve('equityportfolio', 'equityportfolio/', 'vm'));
}
bootstrapper.config([
'$stateProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'routeResolverProvider',
routeProvider
]);
start.$inject = ['$state', '$rootScope', '$q', 'genXClientFactory'];
function start($state, $rootScope, $q) {
//set the initial state
$state.go('etrading');
}
bootstrapper.run(start);
这是我的主要.js用于角度引导
define([
'app',
'common/common',
'common/routeresolver',
'common/logger',
'common/commonfactory',
'common/spinner',
'common/genxInitializer',
'common/route'
],
function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ['etrading']);
});
});
这是我的路由解析器.路由方法
var route = function () {
function resolve(baseName, path, controllerAs, secure) {
if (!path)
path = '';
var routeDef = {};
var baseFileName = baseName.charAt(0).toLowerCase() + baseName.substr(1);
routeDef.templateUrl = viewsDirectory + path + 'views/' + baseFileName + '.html';
routeDef.controller = baseName + 'Controller';
if (controllerAs)
routeDef.controllerAs = controllerAs;
routeDef.secure = (secure) ? secure : false;
routeDef.resolve = {
load: [
'$q',
'$rootScope',
function ($q, $rootScope) {
var dependencies = [controllersDirectory + path + 'controllers/' + baseFileName + 'Controller.js'];
return resolveDependencies($q, $rootScope, dependencies);
}
]
};
return routeDef;
}
function resolveDependencies($q, $rootScope, dependencies) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply();
});
return defer.promise;
}
var jsclass = {
resolve: resolve
};
return jsclass;
};
这是我正在尝试注册的控制器
define(["require", "exports", 'app'], function (require, exports, app) {
var core;
(function (core) {
var controller;
(function (controller) {
var Shell = (function () {
function Shell($rootScope, common, config) {
}
Shell.$inject = ['$rootScope', 'common', 'config'];
return Shell;
})();
controller.Shell = Shell;
app.etrading.register.controller('shell', Shell);
})(controller = core.controller || (core.controller = {}));
})(core = exports.core || (exports.core = {}));
});
我得到这个:错误:[ng:areq] 参数"shellController"不是一个函数,未定义这是在尝试解决依赖关系时。请帮我解决这个问题。谢谢。
发现在
ui-router 的路由成功后,它会检查控制器名称是否与状态更改中定义的控制器相同。
控制器名称必须为
app.etrading.register.controller('shellController', Shell);
而不是 app.etrading.register.controller('shell', Shell);