Могут ли маршруты angularjs иметь значения параметров по умолчанию?

Могу ли я установить значение по умолчанию для параметра маршрута в AngularJS? Есть ли способ иметь /products/123 и /products/, обрабатываемые одним и тем же маршрутом?

Я ищу рефакторинг существующего кода, который выглядит так:

myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/products/', {templateUrl: 'products.html', controller: ProductsCtrl}).            
     when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);


function ProductsCtrl($scope, $routeParams) {
    $scope.productId = typeof($routeParams.productId) == "undefined" ? 123 : $routeParams.productId;
}

Это работает, но это не очень элегантно. Есть ли лучший способ?

Ответы

Ответ 1

AngularJS не позволяет устанавливать значения по умолчанию для параметров маршрута.

Но маршруты (в AngularJS) не должны иметь параметры по умолчанию.

Ресурсы могут иметь параметры по умолчанию.

В AngularJS, если вы хотите маршрут с необязательным параметром, это фактически два разных маршрута.

Почему?

  • Маршруты должны быть простыми

  • Маршруты не позволяют использовать регулярные выражения для параметров

  • Маршруты не являются чем-то, что предоставляет API для работы в вашем приложении (в отличие от ресурсов). Маршруты - это просто конфигурация, которая связывает URL с шаблоном и контроллером. Таким образом, больше маршрутов лучше:

    • Ясно, какие карты маршрутов, на которые ссылается URL.

    • Это более подробный, но более простой способ прочитать. Более сложные маршруты создадут более крутую кривую обучения, где AngularJS не нуждается в ней.

В отличие от серверных фреймворков, у которых есть маршруты

  • У маршрутов AngularJS нет имен.
  • Вы не создаете URL-адреса из определенных маршрутов.
  • У вас нет логики (функции a.k.a) в определениях маршрутов.

Простые маршруты = больше строк для определения их = меньше головных болей, работающих с ними.

ПРИМЕЧАНИЕ. Пожалуйста, имейте в виду вопрос, и этот ответ предназначен для старой версии AngularJS (1.0, я думаю), предшествующей внедрению новых маршрутов/ресурсов.

Ответ 2

Я понимаю, что этот вопрос старый, но все же: почему бы вам просто не перенаправить "пустой" URL-адрес на один, содержащий файл по умолчанию?

myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/products/', {redirectTo: '/products/123'}).
     when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);

Ответ 3

У меня было аналогичное требование. Я сделал, чтобы создать функцию для решения. Что-то вроде ниже

myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
 when('/products/', resolveProduct()).            
 when('/products/:productId', resolveProduct())
}]);


function ProductsCtrl($scope, $routeParams) {
$scope.productId = $routeParams.productId;
}

function resolveProduct() {
   var routeConfig = {
      templateUrl: 'products.html', 
      controller: ProductsCtrl,
      resolve: {
         productId: ['$route', function($route){
            var params = $route.current.params;
            params.productId =  params.productId || 123;
         }]
      }
   }

   return routeConfig;
}

Ответ 4

С url: "/view/: id/: status?" . Вы можете указать необязательный параметр.

Просто подумал, что кому-то это может понадобиться.

Ответ 5

Не уверен, что этот вопрос специфичен для $routeProvider, но в $stateProvider вы можете достичь этого с помощью

myApp.config(function($stateProvider) {

    $stateProvider
        .state('products', {
            url: '/:productId',
            templateUrl: "/dashboard/products.html",
            controller: 'ProductController',
            params: {
                productId: {
                  value: "defaultValue",
                  squash: true // or enable this instead to squash `productId` when empty
                } 
            }
        });
});