Home > Developer > JavaScript
AngularJS avoids traditional and simple routes, and angularjs avoids traditional routes.
AngularJS routing allows us to access different contents through different URLs.
AngularJS can be used to implement a single page Web application (SPA) with multiple views ).
Generally, our URL format isHttp://runoob.com/first/pageBut AngularJS in a single-page Web application is implemented by # + tag, for example:
Http://runoob.com/#/first
Http://runoob.com/#/second
Http://runoob.com/#/third
First, let's take a look at the configuration Object Property method of $ routeProvider:
Route settings object parsing:
$ RouteProvider. when (url (route name), {template: string (template prompt string), templateUrl: string (template path URL), controller: string, function or array (create a controller in the current template and generate a new $ scope), controllerAs: string (Controller alias), redirectTo: string, function (redirection address), resolve: object <key, function> (the module on which the current route depends )});
Steps for implementing a route:
Step 1:Import ngRoute Module
<Script type = "text/javascript" src = "js/angular-route.min.js"> </script>
Step 2:Use ngRoute in the application module
Angular. module ("routeApp", ["ngRoute"])
Step 3:Use the ng-view command
<Div ng-view class = "well" ng-controller = 'defaultctrl'> </div>
Step 4:Configure $ routeProvider routing rules
....config(['$routeProvider', function ($routeProvider){ $routeProvider .when('/home', { templateUrl : 'home.tpl.html', controller : 'HomeCtrl', }) .when('/computer', { templateUrl : 'computer.html', }) .when('/phone', { templateUrl : 'phone.html', }) .when('/other', { templateUrl : 'other.tpl.html', controller : 'OtherCtrl', })}])...
Step 5:Use a route using a hyperlink
<Ul class = "nav-tabs"> <li> <a href = "#/home"> homepage </a> </li> <a href = "#/computer"> computer </a> </li> <a href = "#/phone"> mobile phone </a> </li> <li> <a href = "#/other"> others </a> </li> </ul>
Complete case:
1 route.html page
<Html>2.computer.html page
<Div class = "panel-body"> <table class = "table-striped table-hover"> <thead> <tr> <th> name </th> <th> Category </th> <th class = "text-right"> price </th> <th >{{ data }}</th> </tr> </thead> <tbody> <tr ng-repeat = "item in computers"> <td >{{ item. name }}</td> <td >{{ item. category }}</td> <td class = "text-right" >{{ item. price | currency }}</td> <td class = "text-center"> <button class = "btn-xs btn-primary" ng-click = "deleteProduct (item) "> Delete </button> <a href ="/edit/{item. id} "class =" btn-xs btn-primary "ng-click =" editOrCreateProduct (item) "> edit </a> <button class =" btn-xs btn-primary "ng-click =" incrementPrice (item) "> + </button> </td> </tr> </tbody> </table> <div> <button class =" btn-xs btn-primary "ng -click = "editOrCreateProduct () "> Add </button> <a href =" create "class =" btn-xs btn-primary "ng-click =" editOrCreateProduct () "> Add </a> </div>3.phone.html page
<Div class = "panel-body"> <table class = "table-striped table-hover"> <thead> <tr> <th> name </th> <th> Category </th> <th class = "text-right"> price </th> <th >{{ data }}</th> </tr> </thead> <tbody> <tr ng-repeat = "item in phones"> <td >{{ item. name }}</td> <td >{{ item. category }}</td> <td class = "text-right" >{{ item. price | currency }}</td> <td class = "text-center"> <button class = "btn-xs btn-primary" ng-click = "deleteProduct (item) "> Delete </button> <a href ="/edit/{item. id} "class =" btn-xs btn-primary "ng-click =" editOrCreateProduct (item) "> edit </a> <button class =" btn-xs btn-primary "ng-click =" incrementPrice (item) "> + </button> </td> </tr> </tbody> </table> <div> <button class =" btn-xs btn-primary "ng -click = "editOrCreateProduct () "> Add </button> <a href =" create "class =" btn-xs btn-primary "ng-click =" editOrCreateProduct () "> Add </a> </div>Click "Homepage"
Click "computer"
Click "Mobile Phone"
Click "others"
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
