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的文檔，並通過一些角度文檔。這聽起來像是在試圖混合傳統的推送狀態使用和角度使用。