web-dev-qa-db-ja.com

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

動作しますが、あまりエレガントではありません。もっと良い方法はありますか？

javascriptangularjsmodel-view-controllerurl-routing
32
mikel

AngularJSは、ルートパラメータのデフォルト値を許可しません。

しかし、ルート（AngularJS内）デフォルトのパラメーターはないはずです

リソースにはデフォルトのパラメーターを設定できます。

AngularJSで、オプションのパラメーターを持つルートが必要な場合、これらは実際には2つの異なるルートです。

なぜ？

  • ルートはシンプルでなければなりません

  • ルートでは、パラメータの正規表現一致は許可されません

  • ルートは、アプリケーションで機能するAPIを公開するものではありません（リソースとは異なります）。ルートは、URLをテンプレートとコントローラーに接続する単なる構成です。したがって、より多くのルートを持っている方が良いです：

    • どのルートがどのURLにマップされているかは明らかです。

    • より詳細ですが、読みやすくなっています。より複雑なルートがあると、AngularJSが必要としない急な学習曲線が作成されます。

ルートを持つサーバー側フレームワークとは異なり

  • AngularJSルートには名前がありません。
  • 定義されたルートからURLを作成しません。
  • ルート定義にロジック（別名関数）がありません。

単純なルート=それらを定義するための行が増える=それらで作業する頭痛が少なくなります。

[〜＃〜] note [〜＃〜]：新しいルート/リソースの実装よりも前の古いバージョンのAngularJS（1.0だと思います）に対する質問とこの回答に留意してください。

24
Haralan Dobrev

私はこの質問が古いことを認識していますが、それでも、「空の」URLをデフォルトのproductIdを含むURLにリダイレクトしないのはなぜですか？

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

同様の要件がありました。私がしたことは、解決する関数を作成することでした。以下のようなもの

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

rl： "/ view /：id /：status？"を使用すると、オプションのパラメーターを指定できます。

誰かがそれを必要とするかもしれないと思った。

3
PAVITRA

この質問が$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
                } 
            }
        });
});
1
tsuz