基于第一个示例，我们再深入学习一下稍微复杂点的东西。
index.html
about.html
可以看出，我们需要使用路由来切换到不同的视图。ui-router提供了让我们可以做路由嵌套和视图命名的特性，在接下来的示例中我们将逐一分析。
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view=""></div>
</div>
</body>
</html>var routerApp = angular.module('routerApp', ['ui.router','controllers']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
// home页下的内嵌视图list（当点击ui-sref=".list"会路由到此）
.state('home.list', {
url: '/list',
templateUrl: 'home-list.html',
controller:'Controller'
})
// home页下的内嵌视图paragraph （当点击ui-sref=".paragraph"）
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a scoop of ice-cream. '
})
<pre class="prettyprint php"><code><span class="indent"> </span><span class="comment">// view 用在该状态下有多个 ui-view 的情况，可以对不同的 ui-view 使用特定的 template, controller, resolve data</span></code>
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'about.html' },
'columnOne@about': { template: '<p>This is columnOne show area !! </p>' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'Controller'
}
}
});
});
//自定义控制器
var myContrl= angular.module('controllers', []);
myContrl.controller('Controller', function($scope) {
$scope.message = 'test';
$scope.topics = [
{
name: 'Butterscotch',
price: 50
},
{
name: 'Black Current',
price: 100
},
{
name: 'Mango',
price: 20
}
];
});这里面没有什么特殊的，就是用它来提供数据的。<!-- 巨幕：这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。 --> <div class="jumbotron text-center"> <h1>Home</h1> <p>This page demonstrates <span class="text-danger">nested</span> views.</p> <a ui-sref=".list" class="btn btn-primary">List</a> <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a> </div> <div ui-view></div>该页面下的ui-view 就是视图的嵌套，分别用来显示home-list.html 和app.js中定义的模板内容。
<ul>
<li ng-repeat="topic in topics">{{ topic.name }}</li>
</ul>从控制器中取数据，遍历输出。<div class="jumbotron text-center">
<h1>The About Page</h1>
<p>
This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.
</p>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-view="columnOne"></div>
</div>
<div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div>
</div><h2>Ice-Creams</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="topic in topics">
<td>{{ topic.name }}</td>
<td>${{ topic.price }}</td>
</tr>
</tbody>
</table>三、项目结构图如下
累屎我了
~欢迎大家提出修改、批评、更改意见
！
原文地址：http://blog.csdn.net/u010834071/article/details/45198009
