angularjs $位置和window.history.pushState

Question

我的角度应用程序的URL是这样的：

http://www.domain.com/project/edit/0#/step1 //create new project if project_id = 0 
           ^
http://www.domain.com/project/edit/1#/step1 //edit existing project if project_id > 0 
           ^
http://www.domain.com/project/edit/2#/step1 //edit existing project if project_id > 0 
           ^

当用户保存项目和PROJECT_ID是0，我基本上只是调用服务器端脚本并返回新创建的项目的project_id（比如“3”）。然后，我通过脚本返回的PROJECT_ID更新地址栏中的网址如下：

window.history.pushState({}, "URL updated", '/project/edit/'+new_project_id); 

这将改变在地址栏中的URL，而无需重新加载页面（这样，当用户按下保存，在URL地址栏会自动更改为http://www.domain.com/project/edit/3，这也是稍后编辑项目的URL）。

但最近我（我使用哈希语法#/step1，#/step2，#/step3在URL的末尾管理视图）添加$routeProvider到我的应用程序。

现在，每当我打电话window.history.pushState，也是$routeProvider只是重定向页面/重新加载到http://www.domain.com/project/edit/0#/step1而不是改变地址栏的网址我得到这个infidig错误。

我使用$location.path来更新我的网址试过，但井号（#/step1部分）之后发生改变的部分，而我想要的#号（/edit/0到/edit/4等）

之前更换部分所以我的问题是如何使用$location或$route更改地址栏中的网址，如window.history.pushState？

Answer 1

首先，我建议您签出ui-router，因为它比angular的内置路由提供程序有很多改进的功能，例如状态管理和嵌套视图。

其次，你真的不改变散列之前的URL结构。散列（如果使用这种方法）应该建立在你的根URL为角度，所以http://www.domain.com/#/。然后在你的情况下，你将有http://www.domain.com/#/project/edit/1

使用ui路由器，你创建states，这本质上是路由。例如，您可以创建一个这样的：

$stateProvider .state('project_edit', { url: "/project/edit/:id", templateUrl: "project.tpl.html", controller: ProjectEditController }) })

在您的控制器或服务后，你让你的请求和接收你的项目编号，你只需调用使用$state.go('project_edit', {id : 1})的$state服务，你会被带到ProjectEditController控制器，其中id将可用。

我建议阅读ui-router的文档，并通过一些角度文档。这听起来像是在试图混合传统的推送状态使用和角度使用。