angular-ui-router 多檢視views
阿新 • • 發佈:2019-01-04
UI Router 中有三種方式啟用一個路由:
(1)$state.go():優先順序較高的便利方式
(2)ui-sref:點選包含此指令跳轉
(3)url:url導航
一、$state.go()
(1)$state.go(to [, toParams] [, options])
引數:
to:絕對“state名稱”或者相對的“state路徑”(如果路徑,以“^或者.”是相對,否則為絕對)
toParams:傳送給state的資料引數,由$stateParams構建
options:{ location: true, inherit: true, relative: $state.$current, notify: true }
(2)$state.transitionTo(to, toParams [, options])
$state.go() 內部呼叫此方法
(3)$state.reload()
(4)$state.includes(stateName [, params]) stateName是否為當前路由的一部分
(5)$state.is(stateOrName [, params]) stateOrName是否為當前路由(完全匹配)
注意:contact.details.item === contactDetailsItem
(6)$state.href(stateOrName [, params] [, options])
(7)$state.get([stateName])
(8)$state.current
二、ui-sref
此指令必須繫結到<a>
標籤,如果該路由有對應的關聯URL,其通過$state.href()自動生成和更新href屬性。
<a ui-sref="home">Home</a> | <a ui-sref="about">About</a>
(1)ui-sref-active=”active” 該路由啟用,則對應增加active樣式名稱
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
</ul>
當路由是“pp.user”,且包含引數user值為’bilbobaggins’,會變成如下
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
</li>
</ul>
(2)ui-sref-opts 傳遞引數
<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
三、URL Routing
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
})
其支援正則、查詢引數
(1)$urlRouterProvider.when()
(2)$urlRouterProvider.otherwse()
(3)$urlRouterProvider.rule()
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('/', '/index');
$urlRouterProvider.otherwise('/index');
});
四、示例(多檢視:頁面可以顯示多個動態變化的不同區塊)
// Node靜態服務
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');
var app = new express();
app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
res.sendFile(__dirname + "/Main2.html");
})
app.listen(1337, "localhost");
<!-- Main2.html -->
<!DOCTYPE html>
<head>
<title></title>
<script src="./angular.js"></script>
<script src="./angular-ui-router.js"></script>
<script src="./App2.js"></script>
</head>
<body data-ng-app="myApp">
<h1>多ui-view</h1>
<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>
</body>
<html>
// App2.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider.state("home", {
url: "/home",
views: {
"": {
template: "<h1>HELLO!</h1>"
},
"chart": {
template: "chart"
},
"data": {
template: "data"
}
}
})
.state("index", {
url: "/index",
views: {
"": {
template: "<h1>HELLO!</h1>"
},
"data": {
template: "data-index"
}
}
})
});
五、示例(巢狀檢視:頁面某個動態變化區塊中,巢狀著另一個可以動態變化的區塊)
// Node靜態服務
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');
var app = new express();
app.use(serveStatic(__dirname + '/'));
app.get("/", function(req, res) {
res.sendFile(__dirname + "/Main.html");
})
app.listen(1337, "localhost");
<!-- Main.html -->
<!DOCTYPE html>
<head>
<title></title>
<script src="./angular.js"></script>
<script src="./angular-ui-router.js"></script>
<script src="./App.js"></script>
</head>
<body data-ng-app="myApp">
<h1>AngularJS Home Page (Ui-router Demonstration)</h1>
<div ui-view></div>
</body>
<html>
// App.js
var myApp = angular.module("myApp", ["ui.router"]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/PageTab");
$stateProvider
.state("PageTab", {
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("PageTab.Page1", {
url:"/Page1",
templateUrl: "Page1.html"
})
.state("PageTab.Page2", {
url:"/Page2",
templateUrl: "Page2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
<!-- PageTab.html -->
<div>
<div>
<span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
<span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
</div>
<div>
<div ui-view/>
</div>
</div>
<!-- Page1.html -->
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
<!-- Page2.html -->
<div>
<div>
<h1>Page 2 content goes here...</h1>
</div>
</div>
<!-- Page3.html -->
<div>
<div>
<h1>Page 3 content goes here...</h1>
</div>
</div>