简简单单的话一下ui-route

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者可以依照U逍客L状态或然说是’机器状态’来社团和控制界面UI的渲染,而不是单独只改变路由(古板AngularJS应用实用的不二法门)。该模块为开发者提供了成百上千最视图(view)额外的控制。开发者可以成立嵌套分层的视图、在同一个页面使用七个视图、让几个视图控制某个视图等越来越多的作用。即便是万分复杂的web应用,UI-Router也得以极佳地通晓。

行使时索要用ui-view指令指定,如:<div ui-view></div>

内需下载 ui-route文件

下一场再页脚引入

<script
type=”text/javascript”
src=”../js/angular-ui-route.js”></script>

接下去,将UI-Router作为web应用的借助,注入到主程序:

var app = angular.module(‘app’,
[‘ui.router’]);

与集成的ngRoute服务差别的是,UI-Router可以将视图嵌套,因为它依照的是操作意况而仅非U中华VL。与古板做法使用ng-view区其他是,在ngRoute里须要利用ui-view服务。当在ui-router中处理路由和状态时,开发者的重心是时下的景观是怎么样以及在哪一个页面里。

<body
ng-controller=“ctrl”>
<div ui-view>

</div>
</body>

和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’
})
})

中央流程大约就是这么了

分享自身要好写的一个小案例。

图片 1

点击page1,下边内容就会有对应的page1.

点击page2,上边内容就会有照应的page2.

点击page3,上面内容就会有照应的page3.

 html文件:

图片 2

tab1.html

创建如下的html页面

<div>page1</div>

tab2.html

始建如下的html页面

<div>page2</div>

tab3.html

创建如下的html页面

<div>page3</div>

PageTab.html

成立如下的html页面

<div>
<a href=”javascript:;” style=”padding-right: 20px;”
ui-sref=”.tab1″>page1</a>
<a href=”javascript:;” style=”padding-right: 20px;”
ui-sref=”.tab2″>page2</a>
<a href=”javascript:;” style=”padding-right: 20px;”
ui-sref=”.tab3″>page3</a>

<div ui-view>

</div>

</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>

<body>
<div ui-view>

</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>

相关文章