Angularjs routing _angularjs of avoiding propagation

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

First look at the $routeprovider Configuration object property Method:

Routing Settings Object Resolution:

$routeProvider. When (url (route name), {
 template:string (template hint string),
 templateurl:string (template path URL),
 controller: String, function, or array (creates a controller in the current template, generates a new $scope scope),
 controlleras:string (Controller alias),
 redirectto:string, function (redirect address),
 Resolve:object<key, function> (module on which the current route depends)
});

The approximate steps for implementing a route:

First step: Import the Ngroute module

<script type= "Text/javascript" src= "Js/angular-route.min.js" ></script>

Step Two: use Ngroute in the application module

Angular.module ("Routeapp", ["Ngroute"])

Step Three: use the ng-view directive

<div ng-view class= "OK" ng-controller= ' Defaultctrl ' ></div>

Step Fourth: 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 Fifth: use routing through hyperlinks

<ul class= "Nav nav-tabs" >
 <li><a href= "#/home" > Home </a></li>
 <li><a href= "#/computer" > Computer </a></li>
 <li><a href= "#/phone" > Mobile </a></li>
 <li><a href= "#/other" > Other </a></li>
</ul>

Complete case:
1 route.html Page

2.computer.html page

<div class= "Panel-body" > <table class= "Table table-striped table-hover" > <thead> <tr> & lt;th> name </th> <th> category </th> <th class= "text-right" > Price </th> &LT;TH&GT;{{DATA}}&L t;/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}}&l t;/td> <td class= "Text-center" > <button class= "btn btn-xs btn-primary" ng-click= "deleteproduct (item)" > Delete </button> <a href= "/edit/{{item.id}}" class= btn btn-xs btn-primary "ng-click=" editorcreateproduct (it
    EM) "> Edit </a> <button class=" btn btn-xs btn-primary "ng-click=" Incrementprice (item) >+</button> </td> </tr> </tbody> </table> <div> <button class= "btn btn-xs btn-primary" ng- click= "EditorcreateproducT () "> Add </button> <a href=" Create "class=" btn btn-xs btn-primary "ng-click=" editorcreateproduct () ">add

 </a> </div> </div>

3.phone.html page

<div class= "Panel-body" > <table class= "Table table-striped table-hover" > <thead> <tr> & lt;th> name </th> <th> category </th> <th class= "text-right" > Price </th> &LT;TH&GT;{{DATA}}&L t;/th> </tr> </thead> <tbody> <tr ng-repeat= "item in Phones" > <td>{{item.na me}}</td> <td>{{item.category}}</td> <td class= "Text-right" >{{item.price | currency}}</ td> <td class= "Text-center" > <button class= "btn btn-xs btn-primary" ng-click= "deleteproduct (item)" ; Delete </button> <a href= "/edit/{{item.id}}" class= "btn btn-xs btn-primary" ng-click= "editorcreateproduct (item) "> Edit </a> <button class=" btn btn-xs btn-primary "ng-click=" Incrementprice (item) >+</button> & lt;/td> </tr> </tbody> </table> <div> <button class= "btn btn-xs btn-primary" ng-cli Ck= "Editorcreateproduct ()"> Add </button> <a href=" Create "class=" btn btn-xs btn-primary "ng-click=" editorcreateproduct () ">add

 </a> </div> </div>

Click "Home"

Click "Computer"

Click "Mobile"

Click "Other"

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.