AngularJS路由中的动态部分参数

Question

我在angularjs网站工作，有在Rails中使用routes和在php中使用Laravel的背景。使用Laravel中的路线，我们可以动态创建一组类似于以下内容的路线：

  foreach($cities as $city):
    Route::get($city.'/hotels');
    Route::get($city.'/{slug}');

  endforeach;                      

在这里，我们在Laravel中定义了一系列单独的路线，这些路线在技术上看起来是相同的，除了城市和子弹的值。

在这种情况下，我发现angularJS在定义路由方面有点有限。坦率地说，我在这里有点迷路了。

我在这里做了一些修改，基本上我设置了一个服务，可以从我的数据库中检索资产，例如在本例中是城市和类别的列表。我正在尝试这样做：

如果{slug}在从我的API检索到的类别数组中，则使用我的列表控制器和列表视图，如果不是，则使用我的单节点控制器和单视图。这是我目前的代码，但它不起作用：(

  appRouteProvider.when('/:city/:slug', {
      templateUrl : function(sharedParams, $routeParams){
        t = sharedParams.getCurrentPageType($routeParams);
        if(t=='list'){
          return '../../app/templates/list.html';
        }
        if(t=='single'){
          return '../../app/templates/single.html';
        }

      },
      controller  :  function(sharedParams, $routeParams){
        t = sharedParams.getCurrentPageType($routeParams);
        if(t=='list'){
          return 'ListsController';
        }
        if(t=='single'){
          return 'SingleController';
        }
      },


    resolve:{
      sharedParamsData:function(sharedParams){
        return sharedParams.promise;
      },
    }
  })

在上面的中，sharedParams是一项服务，getCurrentPageType只检查url slug以决定发送回哪个控制器，但它根本不起作用：(

Answer 1

Angular中的服务不能在配置阶段注入，因为它们只在Angular应用程序的运行阶段可用。

不过，在配置阶段有一个加载$http服务的技巧，您可以使用它加载城市/类别并设置路线。同时，由于直到运行阶段才注册控制器，因此您可以使用$controllerProvider在配置阶段预先注册控制器：

app.config(function ($routeProvider, $controllerProvider) {
  $controllerProvider.register('ListController', ListController);
  $controllerProvider.register('SingleController', SingleController);

  // wire the $http service
  var initInjector = angular.injector(['ng']);
  var $http = initInjector.get('$http');
  ...
});

现在，您可以调用API来获取城市（或其他任何地方），并在注册每条路线时进行迭代：

  ...
  // fetch the cities from the server
  $http.get('/cities')
  .then(function (response) {
    var cities = response.data;

    for(var i = 0; i < cities.length; i++){
      $routeProvider
      // assuming each city object has a `name` property
      .when('/' + cities[i]['name'] + '/:slug', {
        templateUrl: getTemplate(cities[i]['name']),
        controller: getController(cities[i]['name'])
      })
    }
  });
  ...

请注意，我使用的是getTemplate和getController方法，它们分别使用普通的开关表达式返回模板URL和相关的控制器名称字符串。您可以选择自己的方法。

注：

虽然具有templateUrl属性的函数确实可以设置自定义模板，但当您在控制器属性旁边使用函数时，Angular会将其视为控制器的构造函数。因此，在该函数中返回控制器的名称将不起作用。

Answer 2

appRouteProvider.when('/:city/:slug', {
templateUrl : 'dafault.html',
controller  :  'DefaultController',
resolve:{
    factory: function($routeParams, $http, $location, sharedParams){
        var city = $routeParams.city;
        var slug = $routeParams.slug;
        var deferred = $q.defer();

        sharedParams.getCurrentPageType($routeParams).then(function(t) {
            if(t=='list'){
                $location.path('/' + city + '/' + slug + '/list');
                deferred.resolve();
            }
            else if(t=='single'){
                $location.path('/' + city + '/' + slug + '/single');
                deferred.resolve();
            } else {
                deferred.reject();
            }

        });

        return deferred.promise;
    },


 }
});
appRouteProvider.when('/:city/:slug/list', {
    templateUrl: '../../app/templates/list.html',
    controller: 'ListsController',
});
appRouteProvider.when('/:city/:slug/single', {
    templateUrl: '../../app/templates/single.html',
    controller: 'SingleController',
});

您可以使用单独的路线来完成。这个想法是当用户点击主路由时，它首先使用来自后端的数据解析。如果满足条件，解析函数将重定向到特定路由，如果不满足，则无法通过

Answer 3

用一个参数定义一条路线怎么样？在angularjs v1中。x您可以使用任意多个参数xor查询定义任意多个路由

.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/city/:slug', {
    templateUrl: 'book.html',
    controller: 'BookController',
    resolve: {
     // you can also retrieve some data as a resolved promise inside your route for better performance.
  }
})

裁判：https://docs.angularjs.org/api/ngRoute/service/$路线