ANGULARJS Routing
In this chapter we will introduce you to ANGULARJS routing.
Angularjs routing allows us to access different content through different URLs.
ANGULARJS enables you to implement a Single-page Web application with multiple Views (Single page Web Application,spa).
Usually our URL is in the form of Http://runoob.com/first/page, but in a single-page Web application Angularjs is implemented through the # + tag, for example:
Http://runoob.com/#/first
Http://runoob.com/#/second
Http://runoob.com/#/third
When we click on any of the above links, the address to the service end is the same (http://runoob.com/). Because the content after the # number is ignored by the browser when it requests to the server. So we need to implement the function of the content behind the # number on the client. The ANGULARJS route helps us differentiate between different logical pages and bind different pages to the corresponding controller through the # + tag.
In the above graphic, we can see that two URLs have been created:/showorders and/addneworder. Each URL has a corresponding view and controller.
Let's take a look at a simple example:
<html>
<head>
<meta charset = "utf-8">
<title> AngularJS routing example-rookie tutorial </ title>
</ head>
<body ng-app = 'routingDemoApp'>
<h2> AngularJS routing application </ h2>
<ul>
<li> <a href="#/"> Home </a> </ li>
<li> <a href="#/computers"> Computers </a> </ li>
<li> <a href="#/printers"> Printers </a> </ li>
<li> <a href="#/blabla"> Other </a> </ li>
</ ul>
<div ng-view> </ div>
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </ script>
<script>
angular.module ('routingDemoApp', ['ngRoute'])
.config (['$ routeProvider', function ($ routeProvider) {
$ routeProvider
.when ('/', (template: 'This is the home page'))
.when ('/ computers', (template: 'This is the computer category page'))
.when ('/ printers', (template: 'This is the printer page'))
.otherwise ((redirectTo: '/'));
}]);
</ script>
</ body>
</ html>
Run Result:
ANGULARJS Routing Application
Instance resolution:
1, loaded into the implementation of the route of the JS file: Angular-route.js.
2, contains the Ngroute module as the main application module of the dependent module.
Angular.module (' Routingdemoapp ', [' Ngroute '])
3, the use of ngview instructions.
<div ng-view></div>
The HTML content within the div changes depending on the route.
Configuration $routeProvider, Angularjs $routeProvider used to define routing rules.
Module.config ([' $routeProvider ', function ($routeProvider) {
$routeProvider
. When ('/', {Template: ' This is home page '} When
('/computers ', {Template: ' This is the Computer Classification page '})
. When ('/printers ', {Template: ' This is the Printer page '}).
otherwise ({ Redirectto: '/'}];
The config function of the Angularjs module is used to configure routing rules. By using CONFIGAPI, we asked to inject $routeprovider into our configuration function and use $ROUTEPROVIDER.WHENAPI to define our routing rules.
$routeProvider provides us with the When (Path,object) & Otherwise (object) function to define all routes sequentially, and the function contains two parameters:
The first parameter is a URL or a URL regular rule.
The second parameter is the routing configuration object.
Routing Settings Object
Angularjs routing can also be implemented through different templates.
$routeProvider. The first parameter of the When function is a URL or url regular rule, and the second parameter is a routing configuration object.
The routing Configuration object syntax rules are as follows:
$routeProvider. When (URL, {
template:string,
templateurl:string,
controller:string, function, or array,
controlleras:string,
redirectto:string, function,
resolve:object<key, function>
});
Parameter description:
Template
Use this parameter if we only need to insert simple HTML content into the Ng-view:
. When ('/computers ', {Template: ' This is the Computer Classification page '})
Templateurl:
Use this parameter if we only need to insert an HTML template file in Ng-view:
$routeProvider. When ('/computers ', {
templateurl: ' views/computers.html ',
});
The above code gets the views/computers.html file contents from the server side into the Ng-view.
Controller
A function, string, or array type, controller functions that are executed on the current template to generate a new scope.
Controlleras:
String, specifying an alias for controller.
Redirectto:
The redirected address.
Resolve
Specifies the other modules on which the current controller depends.
Instance
Run Result:
home About
Home
The above is the ANGULARJS routing of Data collation, hoping to help Angularjs programming students.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
