angular-單頁面跳轉ui-view
阿新 • • 發佈：2019-01-06
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
<script src="js/lib/ui0.4.2/angular-ui-router.js"></script>
<!--
指令：ui-view
該指令主要用於進行目標檢視模板的展示
連結：ui-sref
該屬性，主要用於替換HTML中a標籤的href屬性，用於指定目標路由的名稱
服務：$stateProvider
該服務主要用於進行路由狀態的定義~ 路由URL和檢視模板的繫結
-->
<style>
.active {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view>-->
<div ui-view></div>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由資訊 */
/*
$stateProvider: Ui路由中的狀態服務提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/hello");
$stateProvider.state({
name: "hello", /* 狀態名稱，用於連結中使用 */
url: "/hello", /* 顯示路徑，在url地址中顯示*/
template: "<h1>這是hello對應的內容</h1>"/*跳轉的目標資料/頁面*/
}).state({
name: "world",
url: "/world",
template: "<h1>這是world跳轉之後對應的內容</h1>"
});
}]);
</script>
</body>
</html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
<script src="js/lib/ui0.4.2/angular-ui-router.js"></script>
<!--
指令：ui-view
該指令主要用於進行目標檢視模板的展示
連結：ui-sref
該屬性，主要用於替換HTML中a標籤的href屬性，用於指定目標路由的名稱
服務：$stateProvider
該服務主要用於進行路由狀態的定義~ 路由URL和檢視模板的繫結
-->
<style>
.active {
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a ui-sref="hello" ui-sref-active="active">hello</a></li>
<li><a ui-sref="world" ui-sref-active="active">world</a></li>
</ul>
<div>
<!--<ui-view></ui-view>-->
<div ui-view></div>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
/* 配置路由資訊 */
/*
$stateProvider: Ui路由中的狀態服務提供者
*/
app.config(["$stateProvider", "$urlRouterProvider",
function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/hello");
$stateProvider.state({
name: "hello", /* 狀態名稱，用於連結中使用 */
url: "/hello", /* 顯示路徑，在url地址中顯示*/
template: "<h1>這是hello對應的內容</h1>"/*跳轉的目標資料/頁面*/
}).state({
name: "world",
url: "/world",
template: "<h1>這是world跳轉之後對應的內容</h1>"
});
}]);
</script>
</body>
</html>