<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.nav>a.active{
color: red;
}
</style>
</head>
<body ng-app="app">
<div class="nav">
<a ui-sref="router1" ui-sref-active="active">router1</a>
<a ui-sref="router2" ui-sref-active="active">router2</a>
</div>
<ui-view></ui-view>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script>
var app = angular.module('app',['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
.state({
name: 'router1',
url: '/router1',
template: '<h1>这是router1的内容</h1>'
// templateUrl: 'router1.html'
})
.state({
name: 'router2',
url: '/router2',
template: '<h1>这是router2的内容</h1>'
// templateUrl: 'router2.html'
});
$urlRouterProvider.otherwise('/router1');
}])
</script>
</body>
</html>
使用ui-sref-active可以指定激活链接的class名
使用$urlRouterProvider.otherwise指定默认打开的路径
![【angular】环境搭建及遇到的问题[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)