Demo1
初始化
<html ng-app="app">
<head>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<ul class="nav navbar-nav">
<li>
<a ui-sref="home" ui-sref-active="active">Photos</a>
</li>
<li>
<a ui-sref="about" ui-sref-active="active">About</a>
</li>
</ul>
<div ui-view>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script>
angular.module('app',["ui.router"])
.config(function($stateProvider){
let routeStates = [
{
name: 'home',
url: '/home',
template: '<h3>home!</h3>'
},
{
name: 'about',
url: '/about',
template: '<h3>about!</h3>'
}
]
routeStates.forEach(state => {
$stateProvider.state(state);
})
})
</script>
</html>
Demo2
使用controller和templateUrl属性
<script> angular.module('app',["ui.router"]) .controller('loginController', function($scope) { $scope.name = 'finley'; }) .config(function($stateProvider){ let routeStates = [ { name: 'home', url: '/home', template: '<h3>home!</h3>' }, { name: 'about', url: '/about', template: '<h3>about!</h3>' }, { name: 'login', url: '/login', controller: 'loginController', templateUrl: 'views/login.html' } ] routeStates.forEach(state => { $stateProvider.state(state); }) }) </script>
项目代码：https://git.oschina.net/finley/angular-ui-router-demo/
参考：https://github.com/angular-ui/ui-router/wiki