AngularJS實戰之路由ui-view

時間 2019-11-12

標籤 angularjs 實戰路由 view 欄目 AngularJS 简体版

原文原文鏈接

路由(ui-router)javascript

1.1. 環境css

angular.min.jshtml
angular-ui-router-0.2.10.jsjava
確保確保包含ui.router爲模塊依賴關係.bootstrap
var app=angular.module("app",['ui.router']);app

1.1. 視圖激活方式iview

$state.Go()：優先級較高的便利方式ide
ui-sref：點擊包含此指令跳轉ui
url：url導航this

1.2. 多視圖 Views：使用views屬性設置多個視圖。若是在單一狀態下不須要多個視圖，則不須要此屬性。提示：請記住，一般嵌套視圖比多個兄弟視圖更有用和更強大。

代碼：準備四個頁面主頁面和三個子頁面主頁面

<body>

<div class="container">
	<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">柳絮飛祭奠</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a ui-sref="index2">onepage</a></li>
            <li><a ui-sref="index1">twopage</a></li>
        </ul>
    </div>
    </div>
</nav>
</div>
<div ui-view></div>
<div ui-view="index1"></div>
<div ui-view="index2"></div>
</body>
<script type="text/javascript"
	src="plugins/angular/angular.min-1.4.6.js"></script>
	<script type="text/javascript" src="plugins/angular/angular-ui-router-0.2.10.js"></script>
<script type="text/javascript">
	var app=angular.module("app",['ui.router']);
	app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
			$stateProvider.state('index1', {
				url : '/index1',
				views:{
					"index1":{
				    templateUrl: '/CeShi/lx/uiroute/index1.html'
				},
					"index2":{
					templateUrl : '/CeShi/lx/uiroute/index2.html'
				}
				}
			}).state('index2', {
				url : '/index2',
				templateUrl: '/CeShi/lx/uiroute/index3.html'
			});
			$urlRouterProvider.otherwise('/index2');
}]).config(function($sceProvider){
	$sceProvider.enabled(false);
});
</script>
</html>
三個子頁面index1.html,index2.html,index3.html分別爲
<h1>我是視圖一</h1>
<h1>我是視圖二</h1>
<h1>我是視圖三</h1>

效果爲

1.3.嵌套視圖依舊四個頁面一個主頁面一個子頁面兩個嵌套頁面w

主頁面

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>嵌套視圖</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>
</head>
<body>
<div class="container">
	<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">柳絮飛祭奠</a>
    </div>
    </div>
</nav>
</div>
<div ui-view></div>
</body>
<script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script>
	<script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>
<script type="text/javascript">
	var app=angular.module("app",['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
			$stateProvider.state('index2', {
				url : '/index2',
				templateUrl : '/Angular/uiview/nested/index2.html'
			}).state('index2.one',{
	        	url:'/nested',
                templateUrl: '/Angular/uiview/nested/index1.html'
	        }).state('index2.two',{
	        	url:'/nested',
                templateUrl: '/Angular/uiview/nested/index3.html'
	        });
			$urlRouterProvider.otherwise('/index2');
}]).config(function($sceProvider){
	$sceProvider.enabled(false);
});
</script>
</html>
子頁面
[code="java"]<div class="container">
	<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">柳絮飛祭奠</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a ui-sref="index2.one">onepage</a></li>
            <li><a ui-sref="index2.two">twopage</a></li>
        </ul>
    </div>
    </div>
</nav>
</div>
<div ui-view></div>

嵌套頁面

<h1>我是視圖一</h1> <h1>我是視圖三</h1> 效果：![輸入圖片說明](https://static.oschina.net/uploads/img/201708/20221245_Uvcj.png "在這裏輸入圖片標題") ![輸入圖片說明](https://static.oschina.net/uploads/img/201708/20221330_36DC.png "在這裏輸入圖片標題")

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。