我会将https://github.com/angular-ui/ui-router与http://requirejs.org/一起使用,并仅在需要时加载视图。我找到了以下示例:https://github.com/ifyio/angularjs-lazy-loading-with-requirejs,它适用于angular-route(ngRoute)。到目前为止,我一直试图使用angular-ui-router无法成功。请帮我弄清楚问题。
路由状态-config.js:
define([], function()
{
return {
states: {
"index": {
url: "/",
views: {
"topMenu": {
templateUrl: "/Home/TopMenu",
我想有这样的事情:
dependencies: [
"controllers/top-menu-controller"
],
代替:
controller: 'TopMenuCtrl'
因为在这种情况下我必须始终加载控制器
},
"leftMenu": {
templateUrl: "/Home/LeftMenu",
dependencies: [
"controllers/left-menu-controller"
]
}
}
}
}
};
});
// dependencyResolverFor.js:
define([], function() {
return function(dependencies) {
var definition = {
resolver: ['$q', '$rootScope', function($q, $rootScope) {
var deferred = $q.defer();
require(dependencies, function() {
$rootScope.$apply(function() {
deferred.resolve();
});
});
return deferred.promise;
}]
};
return definition;
};
});
// app.js
define(['route-states-config', 'services/dependencyResolverFor'], function(config, dependencyResolverFor) {
var app= angular.module('app', ['ui.router']);
app.config(function($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
if (config.states !== undefined) {
这里我需要以某种方式解决来自route-states-config.js的依赖关系:
angular.forEach(config.states, function (state, stateName) {
angular.forEach(state.views, function (view, viewName) {
});
$stateProvider.state(stateName, state);
// taken from the working example which uses ngRoute
/* $routeProvider.when(path, {templateUrl:route.templateUrl, resolve:dependencyResolverFor(route.dependencies)}); */
});
}
});
});