关于angularjs的UI-Router使用-CSDN博客

这是一个菜鸟的日志，大牛可以忽略。

去年接触了angularjs，在一些项目上用到以后觉得很好用，同时也有很多疑问，其中一个就是今天想写的东西：关于页面的切分后如何跳转，如何引用的问题。

刚写完一个demo，记录一下。

angular-ui-router ：多层次嵌套路由，可以把一个应用切成很多的小块来，然后用路由来跳转：

首先，准备一个页面容器，也就我们常说的index.html，把需要引用的东西都引用进来，顺便把布局也弄了

<!DOCTYPE html>
<html lang="en" ng-app="routerApp">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
	<script src="js/angular-1.3.0.js"></script>
	<script src="js/angular-ui-router.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="navbar-header">
			<a href="#" class="navbar-brand">Angular UI Router</a>
		</div>
		<ul class="nav navbar-nav">
			<li><a ui-sref="home">主页</a></li>
			<li><a ui-sref="about">about</a></li>
		</ul>
	</nav>

	<!-- main content -->
	<div id="mainContent" class="container">
		<div ui-view></div>
	</div>
	
</body>
</html>

到这里，我们的主页面就弄完了，

然后开始写app.js

/*初始化模块，引入ui-router 模块*/
var routerApp = angular.module('routerApp', ["ui.router"]);

routerApp.config(function($stateProvider,$urlRouterProvider) {
	$urlRouterProvider.otherwise('/home');

	$stateProvider
		.state('home',{
			url:'/home',
			templateUrl:'home_page.html'
		})

		.state('about',{
			/*about 的内容*/
		})


})

在创建一个home_page.html

<div class="jumbotron text-center">
	<h1>主页</h1>
	<p> 这是一个<span class="text-danger">嵌套</span> views,Demo</p>
</div>

这个代码片段会在家在#mainContent中，

浏览器(firefox)打开index.html

ok 继续，既然是一个嵌套view，我们就可以在home_page中再加一层ui-view 嵌套

<div class="jumbotron text-center">
	<h1>主页</h1>
	<p> 这是一个<span class="text-danger">嵌套</span> views,Demo</p>
	<a class="btn btn-primary" ui-sref=".list">列表</a>
	<a class="btn btn-danger" ui-sref=".otherlink">其他</a>
</div>

<div ui-view></div>

继续修改 app.js

/*初始化模块，引入ui-router 模块*/
var routerApp = angular.module('routerApp', ["ui.router"]);

routerApp.config(function($stateProvider,$urlRouterProvider) {
	$urlRouterProvider.otherwise('/home');

	$stateProvider
		.state('home',{
			url:'/home',
			templateUrl:'home_page.html'
		})
		.state('home.list',{
			templateUrl:'home_page_list.html',
			url:'/list',
			controller:function($scope){
				$scope.names=['小强','旺财','阿里拉'];
			}
		})
		.state('home.otherlink',{
			url:'/otherlink',
			template:'跳转过来就这些内容了'
		})

		.state('about',{
			/*about 的内容*/
		})


})

增加一个代码片段home_page_list.html

<ul>
	<li ng-repeat="name in names">{{name}}</li>
</ul>

刷新页面，可以看到效果了

接下来，再来写一个多视图的about页

创建about页代码片段

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>演示<span class="text-danger">多个</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="columnTow"></div>
	</div>
</div>

修改app.js

/*初始化模块，引入ui-router 模块*/
var routerApp = angular.module('routerApp', ["ui.router"]);

routerApp.config(function($stateProvider,$urlRouterProvider) {
	$urlRouterProvider.otherwise('/home');

	$stateProvider
		.state('home',{
			url:'/home',
			templateUrl:'home_page.html'
		})
		.state('home.list',{
			templateUrl:'home_page_list.html',
			url:'/list',
			controller:function($scope){
				$scope.names=['小强','旺财','阿里拉'];
			}
		})
		.state('home.otherlink',{
			url:'/otherlink',
			template:'跳转过来就这些内容了'
		})

		.state('about',{
			url:'/about',
			views:{
				'':{templateUrl:'about_page.html'},
				'columnOne@about':{template:'一个view的东西'},
				'columnTow@about':{
					templateUrl:'about_page_table.html',
					controller:'aboutCtrl'
				}
			}
		})
})

routerApp.controller('aboutCtrl', ['$scope', function($scope){

	$scope.items = [
        {
            name: '阿黄',
            price: 50
        },
        {
            name: 'XX小强',
            price: 10000
        },
        {
            name: '奥斯卡',
            price: 20000
        }
    ];

	
}])

新增home_page_list代码片段

<h2>表格</h2>
<table class="table table-hover table-striped table-bordered">
    <thead>
        <tr>
            <td>名称</td>
            <td>价格</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td>{{ item.name }}</td>
            <td>${{ item.price }}</td>
        </tr>
        
    </tbody>
</table>

ok，

可以看到效果