angularjs $位置和window.history.pushState

Question

The URL for my angular app is something like this:

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
                                   ^

When the user saves the project and the project_id is 0, i basically just call a server-side script and it returns the project_id of the newly created project (say, "3"). I then update the URL in address bar with the project_id returned by script as follows:

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

This would change the URL in the address bar without re-loading the page (so if the user pressed save, the URL in address bar would automatically change to http://www.domain.com/project/edit/3 which is also the URL to edit project later).

But recently I've added $routeProvider to my app (I'm using the hash syntax #/step1 , #/step2 , #/step3 at the end of URL to manage views).

Now I get this infidig error whenever I call window.history.pushState and also the $routeProvider just redirects / reloads the page to http://www.domain.com/project/edit/0#/step1 instead of changing the URL of address bar.

I've tried using $location.path to update my URL, but that changes the part after the hash sign ( #/step1 part) while I want to change the part before the # sign ( /edit/0 to /edit/4 , etc)

So my question is how do I change the URL in address bar like window.history.pushState using $location or $route ?

Answer 1

To start, I would recommend that you checkout ui-router as it has much improved functionality over angular's built in route provider, such as state management and nested views.

Secondly, you really don't change the URL structure before the hash. The hash (if using this method) should be built off your root url for angular, so http://www.domain.com/#/ . Then in your case you would have http://www.domain.com/#/project/edit/1

Using ui-router, you create states , which are essentially routes. For example, you may create one like:

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

In your controller or service after you make your request and receive your project id, you would simply call the $state service using $state.go('project_edit', {id : 1}) and you'll be taken to the ProjectEditController controller where id will be available.

I'd recommend reading the docs for ui-router and go through some of the angular docs as well. It sounds like you're trying to co-mingle traditional push state usage and angular usage.