angularjs路由path方式實現原理探究

標籤：spec   資料   頁面   inner   for   response   應用   路由   his   

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}

angularjs路由path方式實現原理探究