javascript - angularjs $location and window.history.pushState -

the url angular app 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 user saves project , project_id 0, call server-side script , returns project_id of newly created project (say, "3"). update url in address bar project_id returned script follows:

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

this change url in address bar without re-loading page (so if user pressed save, url in address bar automatically change http://www.domain.com/project/edit/3 url edit project later).

but i've added $routeprovider app (i'm using hash syntax #/step1, #/step2, #/step3 @ end of url manage views).

now infidig error whenever call window.history.pushstate , $routeprovider redirects / reloads page http://www.domain.com/project/edit/0#/step1 instead of changing url of address bar.

i've tried using $location.path update url, changes part after hash sign (#/step1 part) while want change part before # sign (/edit/0 /edit/4, etc)

so question how change url in address bar window.history.pushstate using $location or $route?

to start, recommend checkout ui-router has improved functionality on angular's built in route provider, such state management , nested views.

secondly, don't change url structure before hash. hash (if using method) should built off root url angular, http://www.domain.com/#/. in case have http://www.domain.com/#/project/edit/1

using ui-router, create states, routes. example, may create 1 like:

$stateprovider .state('project_edit', { url: "/project/edit/:id", templateurl: "project.tpl.html", controller: projecteditcontroller }) })

in controller or service after make request , receive project id, call $state service using $state.go('project_edit', {id : 1}) , you'll taken projecteditcontroller controller id available.

i'd recommend reading docs ui-router , go through of angular docs well. sounds you're trying co-mingle traditional push state usage , angular usage.