簡單來講一下ui-route

時間 2019-12-05

標籤簡單來講一下 route 简体版

原文原文鏈接

UI-Router被認爲是AngularUI爲開發者提供的最實用的一個模塊，它是一個讓開發者可以根據URL狀態或者說是'機器狀態'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統AngularJS應用實用的方式）。該模塊爲開發者提供了不少最視圖（view）額外的控制。開發者能夠建立嵌套分層的視圖、在同一個頁面使用多個視圖、讓多個視圖控制某個視圖等更多的功能。即便是很是複雜的web應用，UI-Router也能夠極佳地駕馭。javascript

使用時須要用ui-view指令指定，如:<div ui-view></div>css

須要下載 ui-route文件html

而後再頁腳引入java

接下來，將UI-Router做爲web應用的依賴，注入到主程序：app

var app = angular.module('app', ['ui.router']);ide

與集成的ngRoute服務不一樣的是，UI-Router能夠將視圖嵌套，由於它基於的是操做狀態而僅非URL。與傳統作法使用ng-view不一樣的是，在ngRoute裏須要使用ui-view服務。當在ui-router中處理路由和狀態時，開發者的重心是當前的狀態是什麼以及在哪個頁面裏。函數

<body ng-controller=「ctrl」>
<div ui-view>ui

</div>
</body>url

和ngRoute同樣，爲特定狀態指定的模板將會放在<div ui-view></div>元素中。在這些模板中也能夠包含本身的ui-view,這就是在同一個路由下實現嵌套視圖的方法。要定義一個路由，與傳統的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', 'PageTab');
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})

基本流程大概就是這樣了

分享我本身寫的一個小案例。

點擊page1，下面內容就會有相應的page1.

點擊page2，下面內容就會有相應的page2.

點擊page3，下面內容就會有相應的page3.

html文件：

tab1.html

建立以下的html頁面

tab2.html

建立以下的html頁面

tab3.html

建立以下的html頁面

PageTab.html

建立以下的html頁面

</div>

請注意：這兒的<div ui-view></div>，要存放的是子頁面的內容。它們就是路由配置中須要被展現的頁面.

接下來建立main.html

maim.html裏面要引入所須要的插件

還有如何實現他們之間的切換

上面PageTab.html中，咱們寫了ui-sref這個屬性。說白了這個屬性就是關聯的意思。用了’.‘這個符號

<!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
width: 100px;
height: 60px;
background: red;
color: white;
line-height: 60px;
text-align: center;
text-decoration: none;
}
</style>
</head>

</div>
</body>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-ui-route.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ui.router']);//聲明AngularJS模塊, 並把ui-router傳入AngularJS主模塊
app.config(function($stateProvider, $urlRouterProvider) {//聲明瞭把 $stateProvider 和 $urlRouteProvider 路由引擎做爲函數參數傳入，這樣咱們就能夠爲這個應用程序配置路由了.
$urlRouterProvider.when('', 'PageTab');//默認路徑路由
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})
</script>

</html>

相關標籤/搜索

每日一句

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