angularjs - How to lazy load views using ui-router and requirejs -
i use https://github.com/angular-ui/ui-router http://requirejs.org/ , load views when needed. have found following example: https://github.com/ifyio/angularjs-lazy-loading-with-requirejs works great angular-route (ngroute). have been trying make work angular-ui-router without success far. please me figure out issue.
route-states-config.js:
define([], function() { return { states: { "index": { url: "/", views: { "topmenu": { templateurl: "/home/topmenu",
i have this:
dependencies: [ "controllers/top-menu-controller" ],
instead of:
controller: 'topmenuctrl'
because in case have load 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 need resolve dependencies route-states-config.js somehow:
angular.foreach(config.states, function (state, statename) { angular.foreach(state.views, function (view, viewname) { }); $stateprovider.state(statename, state); // taken working example uses ngroute /* $routeprovider.when(path, {templateurl:route.templateurl, resolve:dependencyresolverfor(route.dependencies)}); */ }); } }); });
Comments
Post a Comment