角型JSは2つの2つのURLに対して1つのビューを使用します

Question

次の2つのビューを1つにまとめて書くにはどうすればよいでしょうか - 同じcontrl、同じtemplateurl、同じurl、

$stateProvider.state('user-view', { 
 
    params: { 
 
    selectedTab: 0 
 
    }, 
 
    templateUrl: './resources/user-view.html', 
 
    url: '/user-view/:userId', 
 
    controller: 'useriewCtrl', 
 
    resolve: { 
 
    user: ['userService', '$stateParams', function (userService, 
 
     $stateParams) { 
 
     return renewalService.getUser($stateParams.userId); 
 
    }], 
 
    selectedTab: ['$stateParams', function ($stateParams) { 
 
     if ($stateParams.selectedTab != null) { 
 
     return $stateParams.selectedTab; 
 
     } 
 
     return 0; 
 
    }] 
 
    } 
 
}); 
 

 
$stateProvider.state('user-view', { 
 
    params: { 
 
    selectedTab: 0 
 
    }, 
 
    templateUrl: './resources/user-view.html', 
 
    url: '/user-view/:dataeofbirth/:address', 
 
    controller: 'useriewCtrl', 
 
    resolve: { 
 
    user: ['userService', '$stateParams', function (userService, 
 
     $stateParams) { 
 
     return renewalService.getUser($stateParams.dataeofbirth, 
 
     $stateParams.address); 
 
    }], 
 
    selectedTab: ['$stateParams', function ($stateParams) { 
 
     if ($stateParams.selectedTab != null) { 
 
     return $stateParams.selectedTab; 
 
     } 
 
     return 0; 
 
    }] 
 
    } 
 
});

Answer 1

あなたが代わりにURLの一部のクエリ文字列の一部としてのparamsがかかることがありますが、userIdを何であるかを知るためにキーを必要とするUI-ルータとしてこれを行うために必要とDOBは何か

と住所。

$stateProvider.state('user-view', { 
    params: { 
    selectedTab: 0 
    }, 
    templateUrl: './resources/user-view.html', 
    url: '/user-view?userId&dataeofbirth&address', 
    controller: 'useriewCtrl', 
    resolve: { 
    user: ['userService', '$stateParams', function (userService, 
     $stateParams) { 
     if($stateParams.userId) 
      return renewalService.getUser($stateParams.userId); 
     else 
      return renewalService.getUser($stateParams.dataeofbirth, $stateParams.address); 
    }], 
    selectedTab: ['$stateParams', function ($stateParams) { 
     if ($stateParams.selectedTab != null) { 
     return $stateParams.selectedTab; 
     } 
     return 0; 
    }] 
    } 
}); 

デモ：http://plnkr.co/edit/ZAIWpuFHxclY9hfpfhQC?p=preview

Answer 2

州urlはあなたにオプションフィールドを提供する能力を提供します。

ですから、マージすることができますのようなものに

• '/user-view/:userId'
• '/user-view?userId&dataeofbirth&address'

：

url: '/user-view/:userId?/:dataeofbirth?/:address?' 

をこのアプローチの主な欠点、$stateはないしかし、オプションの3つの入力方法を知っている議論

ので、書きます場合：

• /user-view/userId12を - OK

• /user-view/dataeofbirth3/address4 - ここで我々が得る：

  userId = dataeofbirth3とdataeofbirth = address4

Demo that demonstrates the problem in Plunker

だから我々は単に書くことができます。

url: '/user-view/:arg1?/:arg2?/:arg3?' 

またはsquashの使用とを：

url: '/user-view/:arg1/:arg2/:arg3', 
params: { 
      arg1:  {squash: true, value: null}, 
      arg2: {squash: true, value: null}, 
      arg3:  {squash: true, value: null} 
     } 

---

$stateProvider.state('user-view', { 
    params: { 
    selectedTab: 0 
    }, 
    templateUrl: './resources/user-view.html', 
    url: '/user-view/:userId?/:dataeofbirth?/:address?' 
    controller: 'useriewCtrl', 
    resolve: { 
    user: ['userService', '$stateParams', function (userService, 
     $stateParams) { 

     if($stateParams.arg1 && !$stateParams.arg2){// we have only userId 
     return renewalService.getUser($stateParams.arg1); 
     } 
     else if ($stateParams.arg1 && $stateParams.arg2){ 
      renewalService.getUser($stateParams.arg1, 
    $stateParams.arg2); 
     } 
     else{ 
     // other fallback 
     }   
    }], 
    selectedTab: /* ... */ 
    } 
});