Angularjs's route!

AngularJS Routing : (Distribution requirements)

Routing in AngularJS is a separate feature module, and Ngroute is also a separate release file

This package can be installed via NPM: Angular-route

<Scripttype= ' Text/javascript 'src= ' Bower_components/angular/angular.js '></Script><Scripttype= ' Text/javascript 'src= ' Bower_components/angular-route/angular-route.js '></Script><Scripttype= "Text/javascript">//Create a modulevarmyApp=Angular.module ('myApp',['Ngroute']);//Configure RoutingMyapp.config (['$routeProvider',function($routeProvider) {}]);</Script>

to do the configuration of the route :

The rules for configuring routing are: What kind of request, just find what kind of controller;

When is the "when" means, "when" this time, request this controller:

<Scripttype= ' Text/javascript 'src= ' Bower_components/angular/angular.js '></Script><Scripttype= ' Text/javascript 'src= ' Bower_components/angular-route/angular-route.js '></Script><BodyNg-app= "MYAPP">    <ul>        <Li><ahref= "#/a">A</a></Li>        <Li><ahref= "#/b">B</a></Li>        <Li><ahref= "#/c">C</a></Li>    </ul>    <DivNg-view></Div>    </Body><Scripttype= "Text/javascript">//Create a modulevarmyApp=Angular.module ('myApp',['Ngroute']);//Configure RoutingMyapp.config (['$routeProvider',function($routeProvider) {$routeProvider. When ('/students/:name?', {controller:'Acontroller', Templateurl:'./view/a.html'}). When (' /A', {controller:'Acontroller', Templateurl:'./view/a.html'}). When ('/ b', {controller:'Bcontroller', Templateurl:'./view/b.html'}). When ('/ C', {controller:'Ccontroller', Templateurl:'./view/c.html'}). Otherwise ({//REDIRECT , do jumpRedirectto:'/ C'    });}]); Myapp.controller ('Acontroller',['$scope','$routeParams',function($scope, $routeParams) {$scope. Title= 'Hello'+$routeParams+'This is a controller .';}]); Myapp.controller ('Bcontroller',['$scope',function($scope) {$scope. Title= 'This is the B controller .';}]); Myapp.controller ('Ccontroller',['$scope',function($scope) {$scope. Title= 'This is the C controller .';}]);</Script>

When the page requests this route, it will find that it contains a view template file:

workaround : Use the script tag

Another way to write a view: (Write to this)

<type= "Text/ng-template"></script>

Note: script tag, only if type= ' Text/javascript ' will be executed as a JavaScript script, and script cannot be executed or displayed on the page, so many times, the template will be written in script:

<id= "A_tmpl"  type= "text/ng-template">     <H1>{title}}</h1></  script>

To modify a template file:

. When ('/a ', {    controller: ' Acontroller ',    templateurl: ' A_tmpl '})

Here is: Find out if there is a A_tmpl script, if any, use him as a template

There is a need for such a requirement: Http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan do we have to write a lot of when?？ This is the trouble can not solve, it is impossible for every student, such as "Zhang San" to write a controller and template: All students should: all should be put into a controller to use a template #/a the address is a specific address; #/student/zhangsan This is a specific type of address; For example, request: Http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/zhangsan

We can use ": Name" to match any string:

. When ('/students/:name ', {. When ('/students/:name ', {    controller: ' Acontroller ',    templateurl: './view/ A.html '})

The ":" Number here is a placeholder, "? "Description This location can be omitted:
For example: Request this address, also jump to a controller, is the back? Indicates that the following can be omitted
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/

How to get this incoming name： Method: Re-pass in a new object:

Myapp.controller (' Acontroller ', [' $scope ', ' $routeParams ', function ($scope, $routeParams) {    $scope. title = ' Hello ' +$ Routeparams+ ' Here is a controller ';}]);

$routeParams: is to take the route pass over the parameter; For example: What we're asking is/students/zhangsan this address take/students/:name this rule to match it can extract a key value: {Name:zhangsan} A bit more complicated: for example, the request is/students/zhangsan/ : Role/:name to match: extracted key value: {Role:students,name:zhangsan}

. When ('/students/:name ', {    controller: ' Acontroller ',    templateurl: './view/a.html '}) Myapp.controller (' Acontroller ', [' $scope ', ' $routeParams ', function ($scope, $routeParams) {    $scope. title = ' Hello ' + $routeParams + ' This is a controller ';}]);

For example, request this:

Http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan

See the result is: Hello Zhangsan here is a controller

Angularjs's route!