大概来说一下ui-route

UI-Router被当是AngularUI为开发者提供的不过实用的一个模块,它是一个深受开发者能够根据URL状态或者说是’机器状态’来组织以及控制界面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可以以视图嵌套,因为她根据的凡操作状态而独自非URL。与传统做法用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>

相关文章