AngularJS中的动态路由 - 我可以在设置$ routeProvider之前从服务器检索数据吗?

dnc*_*253 5 angularjs angularjs-routing

在设置所有路由之前,有没有办法让服务器命中检索数据$routeProvider?我希望能够根据此远程数据动态设置路由.我试过这样的事情:

angular.module("myApp").config(["$routeProvider", "$http", function($routeProvider, $http) {
    $http.get("myData").success(function(data) {
        $routeProvider.when(data.dynamicRoute, {
            //route definition
        }
        //or
        $routeProvider.when("/known/route", {
            redirectTo: data.dynamicRoute
        }
    });
}]);
Run Code Online (Sandbox Code Playgroud)

但这会导致以下错误:

Unknown provider: $http from myApp
Run Code Online (Sandbox Code Playgroud)

所以,我知道配置功能是注入提供者而不是服务.但是,我仍然想知道我是否可以某种方式实现我的最终目标?我不认为我可以这样做$httpProvider,但如果我错了,请有人纠正我.如果有一些根本原因导致这种情况无法实现,请解释一下.任何有关这方面的帮助将非常感激.

小智 7

这是100%可行的解决方案!

  1. 准备你的路线.他们可能在json看起来像这样

    {"0":{"id":1,"when":"/","controller":"MainController","template":"app/views/site/main_inner.html"},"1":{"id":2,"when":"/firm/:firmID","controller":"CompanyController","template":"app/views/site/firm.html"},"2":{"id":3,"when":"/search","controller":"SearchController","template":"app/views/site/search.html"}}
    
    Run Code Online (Sandbox Code Playgroud)
  2. 首先,您必须对RouteProvider进行全局引用

      var $routeProviderReference;
     var app = angular.module('myApp', []);
    
      app.config(['$routeProvider', function($routeProvider) {
      $routeProviderReference = $routeProvider;
      }]);
    
    Run Code Online (Sandbox Code Playgroud)
  3. 其次,使用run方法运行ajax调用路由.

       app.run(['$rootScope', '$http', '$route', function($rootScope, $http, $route) {
        //getting routes
        $http.get('routes.php').success(function (data) {
    
        angular.forEach(data, function (route) {
            $routeProviderReference.when( route.when, { templateUrl: route.template, controller: route.controller } );
        });
        $routeProviderReference.otherwise({ redirectTo: '/' });
        $route.reload();
    
    });
    
    }]);
    
    Run Code Online (Sandbox Code Playgroud)

欲了解更多信息,请参阅参考文献http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app


Jos*_*ler 5

没有办法做到这一点.

提供者是可配置的服务创建者.它们允许我们提供用于配置其创建的API.可配置性是我们config阻止的原因.这些服务可用之前用于配置其创建.因此,您可以分别在创建和服务时将设置传递给它$routeProvider$httpProvider将使用它.$route$http

由于在此阶段仍在配置服务,因此服务本身不可用于注入 - 它们实际上尚不存在.

$routeProvider允许我们进行路由配置,我们的应用程序启动时必须运行.我们的应用程序运行期间,在某个随机点开始路由是没有意义的.

所有这一切都是说,$http在配置完成之前,您无法开始运行您的应用程序,这就是使用意味着什么.所以没有办法从远程数据定义路由.


对于它的价值,我认为无论如何我都不会看到这种动态路线的价值; 它们本质上是不可预测的,因为它们是根据非静态数据构建的.这将彻底打破书签,这是路由的主要目的.

所以我会问你为什么觉得有必要先做这个,然后退后一步,看看这是不是应该理想的方式.

随意发表评论以激发进一步的讨论.