Ng-router is a route developed and maintained by the ANGULARJS team
Ui-router is a more powerful, ng-router-capable route provided by third parties
Reference: Https://github.com/angular-ui/ui-router
<!-- -
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script src= ". /node_modules/angular-ui-router/bower_components/angular/angular.min.js "></script>
<script src= ". /node_modules/angular-ui-router/build/angular-ui-router.min.js "></script>
<body>
<ui-view></div> <ui-sref="state1" >state 1</A > <ui-sref="State2" >state 2</a>
<script>
var MyApp = angular.module (' myApp ', [' ui.router ']);
Myapp.config (function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider. Otherwise ("/state1");
$stateProvider
. State (' State1 ', {
URL: "/state1",
Templateurl: "Partials/state1.html"
})
. State (' State1.list ', {
URL: "/list",
Templateurl: "Partials/state1.list.html",
Controller:function ($scope) {
$scope. Items = ["A", "List", "of", "items"];
}
})
. State (' State2 ', {
URL: "/state2",
Templateurl: "Partials/state2.html"
})
. State (' State2.list ', {
URL: "/list",
Templateurl: "Partials/state2.list.html",
Controller:function ($scope) {
$scope. Things = ["A", "Set", "of", "Things"];
}
})
})
</script>
</body>
<!--partials/state1.html -<H1>State 1</H1><HR/><aUi-sref= "State1.list">Show List</a><DivUi-view></Div>
<!--partials/state2.html -<H1>State 2</H1><HR/><aUi-sref= "State2.list">Show List</a><DivUi-view></Div>
<!--partials/state1.list.html -<H3>List of State 1 Items</H3><ul> <Ling-repeat= "Item in Items">{{Item}}</Li></ul>
<!--partials/state2.list.html -<H3>List of State 2 things</H3><ul> <Ling-repeat= "thing in Things">{{thing}}</Li></ul>
API interface
Http://angular-ui.github.io/ui-router/site/#/api/ui.router
Angularjs's Ui-router