Angular JS使用两个URL的一个视图

Question

如何将以下两个视图合并为一个 - 它们共享相同的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

您可以PARAMS作为查询字符串而不是URL的一部分的一部分，你必须这样做，因为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: /* ... */ 
    } 
});