Introduction to ANGULARJS Ui-router routing

Ui-router is the 3rd party route for Angular. He is not much different from ngrouter.

Ui-router can be deeply nested

Ngrouter simple nesting, needles for a single view (view is a page that needs to be nested)

For example: We clicked on a link, we need to jump to the specified page in the view, then Ngroute has met our needs, and when we click, we need to jump in different places to two different pages, Ngroute is not enough, We need to use the ui-router.

$urlRouterProvider

$urlRouterProvider is responsible for monitoring $location. When $location changes, the $urlRouterProvider starts searching through a list of rules until a matching value is found.

$urlRouterProvider the state configuration used to specify the URL on the backend.

All URLs are compiled into Urlmatcher objects.

otherwise

Defines a path to jump when the requested path is an invalid path, or loads the specified path when the first load occurs

$urlRouterProvider. Otherwise ('home');

Here is a simple demo

<script type="Text/javascript">varMyapp=angular.module ('Route',["Ui.router"]); Myapp.controller ('myctr', Function ($scope) {$scope. isActive=true; //$scope. Togg = function ($event) {//Console.log (value)//if ($event) {//$ ($event. Target). addclass ("active"); //} else {//$ ($event. Target). Removeclass ("active"); //   }          // }  }) Myapp.config (function ($stateProvider, $urlRouterProvider) {$urlRouterProvider. otherwise (' /Home'); $stateProvider. State ('Home', {URL:' /Home', Templateurl:'html/home.html'}). State ('home01', {URL:'/home01', Templateurl:'html/home01.html'}). State ('home01.list', {URL:'/list', Templateurl:'html/table.html'}). State ('Home01.pan', {URL:'/pan', Templateurl:'html/panel.html'          })      })  </script>'Route'><navclass="NavBar Navbar-default"Ng-controller='myctr'> <divclass="Container"> <ulclass="nav Navbar-nav"> <li ng-class="{true: ' active ', false: '}[isactive]"ng-click='isactive=true'><a ui-sref="Home">Home</a></li> <li ng-class="{true: ', false: ' active '}[isactive]"ng-click='Isactive=false'><a ui-sref="home01">Link</a></li> </ul> </div></nav><!--Toggle content Display--><div Ui-view style='Padding:20px;overflow:hidden'></div></div>

Introduction to ANGULARJS Ui-router routing