Tuyến đường angularjs có các giá trị tham số mặc định không?

Question

Tôi có thể đặt giá trị mặc định của thông số của tuyến đường trong AngularJS không? Có cách nào để có /products/123 và /products/ được xử lý bởi cùng một tuyến đường không?

tôi đang tìm cách để cấu trúc lại mã hiện tại của tôi, trông giống như:

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; 
} 

Nó hoạt động, nhưng nó không phải là rất thanh lịch. Có cách nào tốt hơn ?

Answer 1

AngularJS không cho phép giá trị mặc định cho thông số tuyến đường.

Nhưng tuyến đường (trong AngularJS) không được có thông số mặc định.

Tài nguyên có thể có thông số mặc định.

Trong AngularJS nếu bạn muốn một tuyến đường có tham số tùy chọn, đây thực sự là hai tuyến đường khác nhau.

Tại sao?

• đường nên đơn giản

• đường không cho phép biểu thức thông thường phù hợp với các thông số

• đường không phải là một cái gì đó mà lộ ra một API để làm việc trong ứng dụng của bạn (không giống như tài nguyên làm). Các tuyến đường chỉ là cấu hình kết nối một URL với một mẫu và một bộ điều khiển. Do đó, có nhiều tuyến đường tốt hơn:

  • Rõ ràng là bản đồ lộ trình đến url nào.

  • Đó là chi tiết hơn, nhưng đơn giản hơn để đọc. Có nhiều tuyến đường phức tạp hơn sẽ tạo ra một đường cong học tập dốc hơn, nơi AngularJS không cần.

Không giống như các khuôn khổ server-side có các tuyến đường

• AngularJS tuyến đường không có tên.
• Bạn không tạo URL từ các tuyến đường đã xác định.
• Bạn không có logic (các hàm a.k.a) trong định nghĩa tuyến đường.

Tuyến đơn giản = nhiều dòng để xác định chúng = ít đau đầu hơn khi làm việc với chúng.

LƯU Ý: Hãy ghi nhớ câu hỏi và câu trả lời này dành cho phiên bản cũ của AngularJS (1.0 tôi nghĩ) có sẵn trước khi triển khai các tuyến đường/tài nguyên mới.

Answer 2

Tôi nhận ra rằng câu hỏi này cũ, nhưng vẫn còn: Tại sao bạn không chuyển hướng URL "trống" đến URL chứa productId mặc định?

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

Answer 3

Tôi có yêu cầu tương tự. Những gì tôi đã làm là tạo ra một chức năng để giải quyết. Một cái gì đó như bên dưới

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; 
} 

Answer 4

Với url: "/ view /: id /: status?", Bạn có thể chỉ ra một tham số tùy chọn.

Chỉ cần nghĩ rằng ai đó có thể cần đến.

Answer 5

Không chắc chắn nếu câu hỏi này là cụ thể cho $routeProvider nhưng trong $stateProvider, bạn có thể đạt được điều này bằng cách

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 
       } 
      } 
     }); 
});