Question

我有一个延迟加载各种模块的routeProvider。我的实施基于这两篇文章：

https://codereview.stackexchange.com/questions/42581/dynamic-routing-with-lazy-load-controllers http://ify.io/lazy-loading-in-angularjs/

它看起来像这样，效果很好：

myApp.config(function ($routeProvider) {

    $routeProvider.
    when('/', {
        templateUrl: 'templates/startpage.html',
        controller: 'startPageController',
    }).
    otherwise({
        resolve: {
            deps: function ($q, $rootScope, $location) {
                var deferred = $q.defer();
                var path = $location.path();
                var modulename = $location.path().split("/")[1];
                if (modulename != null) {
                    var scriptfile = '/Scripts/' + modulename + 'controller.js';
                    $script(scriptfile, function () {
                        $rootScope.$apply(function () {
                            //reprocess the route
                            $rootScope.$broadcast('$locationChangeSuccess', path, path);
                        });
                    });
                }
                return deferred.promise;
            }
        }
    });
});

现在我想针对从WebAPI返回的值检查modulename变量。如果modulename的值不在返回的数组中，我希望将AngularJS重定向到根目录（/）。

我尝试在deps函数中注入$http，但是使用它会导致它被加载多次。这也不是非常有效，因为应该检索一次数据然后使用结果。但是，我无法找到在deps函数之外从WebAPI检索数据的方法（因为$ http不能注入到myApp.config中）。

我怎样才能更改myApp.config以从WebAPI获取已批准的“模块”列表，然后使用此列表生成路由？

Answer 1

我最终使用了完全不同的东西。

因为每个模块的控制器都定义了每个路由，所以我使用WebAPI获取所有可用的模块，然后我懒惰加载该模块的控制器，它设置了正确的路由。我在AngularJS应用的run方法中执行此操作，因为它可以访问$http变量。

结果如下：

myApp.config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/startpage.html',
        controller: 'startPageController',
    }).
    otherwise({
        redirectTo: '/'
    });
});

myApp.run(function($http) {
    $http.get('/webapi/modules').success(function(data) {
        angular.forEach(data, function (module, key) {
            var scriptfile = '/Scripts/' + module + 'controller.js';
            $script(scriptfile, function () {});
        });
    });
});

可能不是最优雅或最软化的解决方案，但它有效。

具有延迟加载的AngularJS routeProvider使用来自WebAPI

1 个答案: