如何使用ui-router和requirejs延迟加载视图

时间:2014-03-24 18:33:22

标签: angularjs requirejs angular-ui-router

我会将https://github.com/angular-ui/ui-routerhttp://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)}); */

            });
        }
    });
});

0 个答案:

没有答案