Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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)}); */

            });
        }
    });
});
share|improve this question
    
I made it work with ocLazyLoad: github.com/ocombe/ocLazyLoad You can also find tutorial there how to use it with ui-router (in other words, you need to return a promise which will be resolved in resolve property) – Duy Nguyen Dec 1 '14 at 18:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.