How does angularjs not refresh on page change?

Question

I've been learning about angularjs and have been very confused about how angular manages to change pages without refreshing and yet have a completely different view.

Are they actually changing the page URL or just hiding all the elements of on page and showing the other?

Answer 1

This video by CodeSchool explains it quite well.

AngularJS is just a tool that allows you to build single-page web applications with relative ease. What you are looking for is actually the definition of Single-Page Application :

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

Also, from http://www.johnpapa.net/ :

A SPA is fully (or close) loaded on the initial page load, it's key resources are preloaded, and progressively downloads features as required.

And, more specific to your particular question:

When a user clicks on a menu item, the SPA sees that url and translates it to a View that should be displayed. If the view has not been seen before, the application may make an HTTP request to retrieve the HTML template for the view. Then it will compose the view, fill in the template, and display the view in the appropriate location within the shell. If the view has already been viewed once, the browser may have cached it and the router will be smart enough not to make the request. This is one way a SPA can reduce round-tripping to and from a server, and thus improve performance.

Keep in mind that this behavior is attained with the use of JavaScript, and does NOT require any specific library or framework (such as AngularJS), although you will probably want to learn how to use one to facilitate the process.

I also recommend you check these resources:

• http://johnpapa.net/building-single-page-apps-with-knockout-jquery-and-web-api-ndash-the-story-begins/
• http://www.johnpapa.net/pageinspa/

Answer 2

如果您的网址是与$ routeProvider映射的，则可以重新加载调用$ route.reload（）的控制器。