Angularjs Ngroute Example Analysis of routing mechanism in the introductory tutorial _angularjs

This paper illustrates the ANGULARJS routing mechanism ngroute. Share to everyone for your reference, specific as follows:

Introduction

Before we introduce the route, we'll talk about spa, so spa is the single page app that we're talking about now, so we've been using Ajax to remove data from behind and then render it in the foreground page HTML. But Ajax has a fatal drawback is that the browser can not implement the Back button failure, in order to solve this problem we usually use hash, listening to Hashchange events for view switching, and another way is to use the HTML5 history API, through Pushstate () Record operation history, monitor popstate events for view switching, and some call this Pjax technology. The basic process is as follows:

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

What the Ng-route contains

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 support 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, that is, the map of the address bar and the view template

• Service $routeparams Saves the arguments in the address bar, such as {id:1, name: ' Tom '}

• Service $location is used to get the current URL and to change the current URL, and to deposit history

• Service $route completes routing matching and provides routing-related property access and events, such as accessing the controller for the current route

• directive Ngview used to specify the area in the main view for loading child views

The implementation of routing mechanism

First step, introduce two dependent files

<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ></script>
<script Src= "Http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js" ></script>

Because the routing mechanism is a separate module, so we need to introduce a separate routing file, only the introduction of AngularJS.min.js is not included in the route, the introduction of the file we also need to inject in the module declaration of Ng-route dependency:

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

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

Step two: Complete the routing table configuration

App.config ([' $routeProvider ', function ($routeProvider) {
    $routeProvider
      . When ('/div1 ', {
        Template: ') <p> This is div1{{text}}</p> ',
        controller: ' Div1controller '
      }
      . When ('/div2 ', {
        Template: ' <p> This is div2{{text}}</p> ',
          controller: ' Div2controller '
      }
      . When ('/div3 ', {
        Template: ' <p> This is div3{{text}}</p> ',
        controller: ' Div3controller '
      }
      . When ('/content/:id ', {
        Template: ' <p> This is content{{id}}</p> ',
        controller: ' Div4controller '
      }
      . Otherwise ({
        redirectto: '/div1 '
      });

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

When the Path,route method receives two parameters, path is a string that represents the path that the routing rule matches, and it matches the content ($location. Path) value of the address bar. If you need a matching parameter, you can use the colon plus name in path, such as: path is/show/:name, and if the address bar is/show/tom, then the parameter name and the corresponding value 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 parameter description is as follows:

Controller//function or String type. The controller function that executes on the current template, generates a new scope
Controlleras//string type, and specifies the alias
template//string or function type for controller. The template used by the view, which will be ngview to refer to the
templateurl//string or function type, when the view template is a separate HTML file or the <script type= "text/ Ng-template > Define templates using
Resolve//Specifies other modules that the current controller relies on
Redirectto//redirected addresses

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

Our single page program is local refresh, that this "local" is where it, this is the turn to Ngview, just in the template simple use of this directive, where to use, where is "local."

Through the above we have completed a route of the entire configuration process, it is difficult to feel a route when there is no contact route, but when we really understand the principle of this piece is not very difficult, routing in the ANGULARJS is the core part so we need to firmly grasp this part.

Friendly recommendation:

See this may be some people say that if there is a complete ddeo, so say small make up to everyone recommend a writing foreground code tools RUNJS and can realize the sharing of code, small series of this demo on this, you can view the effect here; http://sandbox.runjs.cn/ Show/gj894e3t#/content/13

Here to view the source:
http://runjs.cn/code/gj894e3t

Then we can share the code randomly, especially when we are lecturing.

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.