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

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -