I would to use https://github.com/angular-ui/ui-router with http://requirejs.org/ and load views only when they are needed. I have found the following example: https://github.com/ifyio/angularjs-lazy-loading-with-requirejs which works great with angular-route (ngRoute). I have been trying to make it work with angular-ui-router without success so far. Please help me to figure out the issue.
route-states-config.js:
define([], function()
{
return {
states: {
"index": {
url: "/",
views: {
"topMenu": {
templateUrl: "/Home/TopMenu",
I would like to have something like this:
dependencies: [
"controllers/top-menu-controller"
],
instead of:
controller: 'TopMenuCtrl'
because in this case I have to load the controller always
},
"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) {
here I need to resolve the dependencies from route-states-config.js somehow:
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)}); */
});
}
});
});