Walk into Angularjs (eight) Ng's routing mechanism

Ext.: http://www.2cto.com/kf/201312/265979.html

Before we talk about the routing mechanism, it is necessary to mention the more popular single page application, which is the so-called one web App. In order to achieve a no-refresh view switch, we usually use the AJAX request from the background to fetch the data, and then put on the HTML template rendering on the page, but one of the fatal drawback of Ajax is to invalidate the browser back button, although we can put a large back button on the page, let the user click Back to navigate, However, there is always no way to avoid the user's habitual point backwards. One way to solve this problem is to use hash, listen to the Hashchange event for the view switch, another method is to use the HTML5 history API, through Pushstate () record the operation histories, listen to popstate events for the view switch, Some people call this Pjax technology. The basic flow is as follows:

This creates a deep link (deeplinking) that navigates through the address bar, which is the routing mechanism we need. With a routing mechanism, individual views of a single-page application can be well organized.

What the Ngroute includes

Ng's routing mechanism is provided by ngroute, through the hash and history two ways to implement the route, you can detect whether the browser supports history to flexibly call the appropriate way. Ng's route (Ngroute) is a separate module that contains the following:

• Service $routeprovider is used to define a routing table, which is the mapping of the address bar to the view template
• The service $routeparams saved the parameters in the address bar, for example {id:1, name: ' Tom '}
• The service $route completes the routing match and provides routing-related property access and events, such as accessing the controller that corresponds to the current route
• Directive Ngview is used to specify the area in the main view where the child views are loaded

Together with the $location service, we can implement a single page application. Here's a look at how to use the content.

Routing mechanism using NG the first step: Introducing Files and Dependencies

The Ngroute module is included in a separate file, so the first step is to introduce the file on the page as follows:

<src="http://code.angularjs.org/1.2.5/angular.min.js" ></script><src= "Http://code.angularjs.org/1.2.5/angular-route.min.js" ></script>     

The introduction of light is not enough, and we also need to inject a dependency on the Ngroute in the module declaration as follows:

var app = Angular.module (' MyApp ', [' Ngroute ']); 

By doing this, we can use the above services and instructions in the template or controller. Below we need to define a routing table.

Step two: Define the routing table

$routeProvider provides a service that defines the routing table, which has two core methods, when (Path,route) and otherwise (params), first look at the core when (Path,route) method in the core.

The When (Path,route) method receives two parameters, path is a string that represents the path to which the route rule matches, and it matches the contents of the Address bar ($location. Path) value. If you need to match the parameters, you can use the colon name in path, such as: path is/show/:name, if the address bar is/show/tom, then the parameter name and the corresponding value of Tom will be saved in $routeparams, like this: {name: Tom}. We can also use * for fuzzy matching, such as:/show*/:name will match/showinfo/tom.

The route parameter is an object that specifies a series of configuration items that are required when path is matched, including the following:

Controller//function or String type. A controller function that executes on the current template, generates a new Scopecontrolleras//string type, assigns an alias template//string or function type to the controller, and the templates used by the view, This section will be referenced by Ngview Templateurl//string or function type when the view template is a separate HTML file or used <type="Text/ng-template" >   address that defines the   template when used/    ///redirected

In the simplest case, we define an HTML file as a template and initialize a specified controller:

functionemailrouteconfig($routeProvider. When (' show.html '). When (' put.html '});};  

The otherwise (params) method corresponds to the situation when the path is not matched, so we can configure a Redirectto parameter to redirect it to the 404 page or to the homepage.

Step three: Specify where to load the child views in the main view template

Our single-page program is a partial refresh, then this "local" is where it, this is the turn of the Ngview, simply use this directive in the template, where to use, where is the "local." For example:

<ng-view></div> 

<ng-view></ng-view> 

Our sub-views will be introduced here. After completing these three steps, your program's routing is configured.

Use the route to fight!

Light to see the above part of the theory is not very abstract, not fun? In order to satisfy everyone's appetite, but also to consolidate what I learned, I specifically wrote a demo, simulation of our familiar news release system, using the knowledge described above. The following is a demo of the grand debut:

The headline and left sections are immutable, but the content on the right is dynamically loaded. And each time you switch between different views, the contents of the browser address bar change Accordingly, so when you click Back, you can always go back to the previous view.

Due to the limitations of the blog you can not see the address bar changes here, click Http://sandbox.runjs.cn/show/r72hgjwg to see the actual performance.

To view the demo source, click here HTTP://RUNJS.CN/CODE/R72HGJWG

About Ng's routing mechanism to learn here, to summarize, in fact, the routing mechanism is not difficult, the basic process is this, but before the actual use of the project, I do not know how deep the water. The example in this blog I abandoned the jsfiddle.net and used the runjs.cn, because Jsfiddle is simply slow like a snail, and Angular.js Cdn seems to be wall, the file has not been downloaded.
Overall feeling runjs.cn or very fast, is a little inconvenient, you see the source also have to cut out, wood has method, later I found better runjs to abandon the ~

Walk into Angularjs (eight) Ng's routing mechanism