ng-router是Angularjs团队开发和维护的路由
ui-router是第三方提供的基于ng-router功能更强大的路由
参考资料：https://github.com/angular-ui/ui-router
<!-- index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<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>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<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>
</html>
<!-- partials/state1.html --> <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
<!-- partials/state2.html --> <h1>State 2</h1> <hr/> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
<!-- partials/state1.list.html --> <h3>List of State 1 Items</h3> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul>
<!-- partials/state2.list.html --> <h3>List of State 2 Things</h3> <ul> <li ng-repeat="thing in things">{{ thing }}</li> </ul>
API接口
http://angular-ui.github.io/ui-router/site/#/api/ui.router