AngularJS $location 路由器和 GET PArams - 最佳实践？答案

【问题标题】：AngularJS $location router and GET PArams - BEST PRACTISE?AngularJS $location 路由器和 GET PArams - 最佳实践？
【发布时间】：2014-03-14 12:51:06
【问题描述】：

我将AngularJS 与angular-ui-router 组件一起用于我的单页网站。

如果我想切换到另一个视图 (path) 并添加参数，我可以像这样组合使用 $location.path() 和 $location.search()：

$location.path('/foo/bar/').search('q','foobar');

现在我还需要生成 URL（即填充我网站上的链接或提供深层链接-直接链接）。所以我有一个服务可以根据用户输入和状态参数生成和提供 URL。

通常我会让服务提供类似/foo/bar/?q=foobar 的东西，但是每次我想用 $location 设置这样的链接时，我都必须使用字符串操作来去除 GET 参数，调用原始路径并添加.search() 中的其余部分。

var url = '/foo/bar/?q=foobar'
var tmpUrlParams = url.split('?')[1].split('&');
$location.path('url.split('?')[1]');
for (var i=0;i <= tmpUrlParams.length; i++){
  $location.search(tmpUrlParams[i].split('=')[0], tmpUrlParams[i].split('=')[1]);
}

有没有更好的解决方案？嗯，我知道有……但它是什么？

【问题讨论】：

如果您的服务提供具有多个属性的对象 - fullUrl、baseUrl 和 searchParameters - 这样您可以使用 fullUrl 属性来创建深层链接，但您可以使用 baseUrl 和 searchParameters当您需要手动切换到另一个视图时
@JoseM 听起来不错。不是我正在寻找的既定最佳实践，但绝对是一个好主意。谢谢。

标签： angularjs angular-ui-router

【解决方案1】：

也许我误解了你的问题，但你为什么不能只在$location 上使用url 方法，因为它会正确解释你的查询字符串参数？

//Calling $location.url()
$location.url('/somepath?foo=bar');

//Will result in these values
$location.url(); // '/somepath?foo=bar'
$location.path(); // '/somepath'
$location.search(); // '{"foo":"bar"}'

这是一个interactive jsFiddle，您可以自己玩并查看$location api 的各种值。

【讨论】：

我无法使用 url 方法，因为...我没有 RTFM ;-) 感谢您的提醒！
@AndreschSerj - 最好的。评论。永远。