angularjs路由path方式实现原理探究

Posted 2020-10-03 LightSong@计海拾贝

angularjs路由

https://angular.io/guide/router

通过URL解释， 来定位客户端生成的浏览器端视图。

你可绑定路由到页面的链接上， 当用户点击链接， 可以浏览到相应的应用视图。

The browser is a familiar model of application navigation:

• Enter a URL in the address bar and the browser navigates to a corresponding page.
• Click links on the page and the browser navigates to a new page.
• Click the browser‘s back and forward buttons and the browser navigates backward and forward through the history of pages you‘ve seen.

The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view. It can pass optional parameters along to the supporting view component that help it decide what specific content to present. You can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link.

 

特点：URL改变没有发起http请求

路由方法有三种：

1、 通过url path

2、 通过hash

3、通过query string

 

按照http协议，对于地址栏的一个url访问， 总会发起http请求， 刷新页面， 获得页面视图， 这个在后台MVC框架中， 是正常的事情。

但是我们观察， 在angularjs框架的路由效果中， url改变，并没有刷新页面， 这让我身为好奇， 决定一查究竟。

 

资料搜集

https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page

Updating address bar with new URL without hash or reloading the page

662 down vote accepted

You can now do this in most "modern" browsers! Here is the original article I read (posted July 10, 2010): HTML5: Changing the browser-URL without refreshing page. For a more in-depth look into pushState/replaceState/popstate (aka the html5 History API) see the MDN docs. TL;DR, you can do this: window.history.pushState("object or string", "Title", "/new-url"); See my answer to Modify the URL without reloading the page for a basic how-to.

 

 

https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page

This can now be done in Chrome, Safari, FF4+, and IE10pp4+!

See this question‘s answer for more info: Updating address bar with new URL without hash or reloading the page

Example:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

---

For a more in-depth look at manipulating browser history see this MDN article.

 

How can I change the page URL without refreshing the page?

27 down vote accepted

In HTML5 you can change the URL: window.history.pushState("object or string", "Title", "/new-url"); check http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/ docs: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method UPDATE An overview of which browser support the new HTML5 history API: http://caniuse.com/#search=pushState (caniuse.com is worth to bookmark!) there are already frameworks that do the hard work for you and even gracefully fallback to the common hash-tag solution:

 

 

总结：归功于HTML5的 BOM history对象

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState().c2.a0method

Example of pushState() method

Suppose http://mozilla.org/foo.html executes the following javascript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This will cause the URL bar to display http://mozilla.org/bar.html, but won‘t cause the browser to load bar.html or even check that bar.html exists.

Suppose now that the user now navigates to http://google.com, then clicks back. At this point, the URL bar will display http://mozilla.org/bar.html, and the page will get a popstate event whose state object contains a copy of stateObj. The page itself will look like foo.html, although the page might modify its contents during the popstate event.

If we click back again, the URL will change to http://mozilla.org/foo.html, and the document will get another popstate event, this time with a null state object. Here too, going back doesn‘t change the document‘s contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.

 

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

 window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}


window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}