angular框架自身提供的ng-route在一定程度上满足了我们的需求,但是他只针对于单视图,比如点击一个link跳转到另一个视图,但是在实际业务中,需要一个状态对应的视图中还包含其他的视图,或者一个状态对应多个子状态,每个子状态对应一个或多个视图。这时ng-route就不满足了,所以我们需要使用第三方的路由插件ui-router。

1. 引入依赖

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.3.7/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<script src="js/angular-ui-router-me.js"></script>

2. html页面

<body ng-app="routerApp">

 	<div class="list-group">
<a class="list-group-item" ui-sref="parent0">parent0  <strong>one state --> one view</strong></a>
<a class="list-group-item" ui-sref="parent1">parent1  <strong>one state --> many view</strong></a>
<a class="list-group-item" ui-sref="parent2.c1">parent2.c1  <strong>one state --> child state --> one ciew</strong></a>
<a class="list-group-item" ui-sref="parent2.c2">parent1.c2  <strong>one state --> child state --> many ciew</strong></a>
</div> <div ui-view></div> <script type="text/ng-template" id="parent0">
<div>this is parent0 page{{test}}</div>
</script> <script type="text/ng-template" id="parent1">
<div>this is parent1 page{{test}}</div>
<div ui-view="child1" style="border:1px solid red; width: 400px; height: 300px;"></div>
<div ui-view="child2" style="border:1px solid blue; width: 300px; height: 200px;"></div>
</script> <script type="text/ng-template" id="parent1-c1">
<div>this is parent1 child1 page{{test}}<P>{{pn}}</P></div>
</script> <script type="text/ng-template" id="parent1-c2">
<div>this is parent1 child2 page{{test}}<P>{{pn}}</P></div>
</script> <script type="text/ng-template" id="parent2">
<div>this is parent2 page{{test}}
<div ui-view></div> <!--在含有子状态的视图中,必须要有ui-view来作为子视图的容器--->
</div>
</script> <script type="text/ng-template" id="parent2-c1">
<div>this is parent2-c1 page{{test}}<P>{{pn2}}</P></div>
</script> <script type="text/ng-template" id="parent2-c2">
<div>this is parent2-c2 page{{test}}<P>{{pn2}}</P></div>
<div ui-view="grandson1" style="border:1px solid red; width: 400px; height: 300px;"></div>
<div ui-view="grandson2" style="border:1px solid blue; width: 300px; height: 300px;"></div>
</script> <script type="text/ng-template" id="parent2-c2-g1">
<div>this is parent2-c2-g1 page{{test}}<P>{{pn2}}</P><p>{{pn2cn2}}</p></div>
</script> <script type="text/ng-template" id="parent2-c2-g2">
<div>this is parent2-c2-g2 page{{test}}<P>{{pn2}}</P><p>{{pn2cn2}}</p></div>
</script> </body>

  

 3. 配置路由的js

var uirouterModule = (function(app){

	var myrouter = angular.module("routerApp", ["ui.router", "ui.bootstrap"]);

	myrouter.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

		$stateProvider
.state('parent0', { //单一视图
url: '/p0',
templateUrl: 'parent0',
controller: 'p0'
})
.state('parent1', { // 一个状态多个视图
url: '/p1',
views: {
'': {
templateUrl: 'parent1',
controller: 'p1'
},
'child1@parent1': {
templateUrl: 'parent1-c1',
controller: 'p1c1'
},
'child2@parent1': {
templateUrl: 'parent1-c2',
controller: 'p1c2'
}
}
})
.state('parent2', {
url: '/p2',
templateUrl: 'parent2',
controller: 'p2',
abstract: true // 提供一个抽象,主要是为了向下提供继承
})
.state('parent2.c1', { //parent2状态下的c1状态
url: '/c1',
templateUrl: 'parent2-c1',
controller: 'p2c1'
})
.state('parent2.c2', { //parent2状态下的c2状态
url: '/c2',
views: {
'': {
templateUrl: 'parent2-c2',
controller: 'p2c2'
},
'grandson1@parent2.c2': {
templateUrl: 'parent2-c2-g1',
controller: 'p2c2g1'
},
'grandson2@parent2.c2': {
templateUrl: 'parent2-c2-g2',
controller: 'p2c2g2'
}
}
})
$urlRouterProvider.otherwise('/p0');
}]); myrouter.controller('p0', function($scope) {
$scope.test = 'p0';
});
myrouter.controller('p1', function($scope) {
$scope.test = 'p1';
$scope.pn ="parentOnly";
});
myrouter.controller('p1c1', function($scope) {
$scope.test = 'p1c1';
});
myrouter.controller('p1c2', function($scope) {
$scope.test = 'p1c2';
}); myrouter.controller('p2', function($scope) {
$scope.test = 'p2';
$scope.pn2 ="parent2Only";
}); myrouter.controller('p2c1', function($scope) {
$scope.test = 'p2c1';
}); myrouter.controller('p2c2', function($scope) {
$scope.test = 'p2c2';
$scope.pn2cn2 = "parent2child2Only";
}); myrouter.controller('p2c2g1', function($scope) {
$scope.test = 'p2c2g1';
});
myrouter.controller('p2c2g2', function($scope) {
$scope.test = 'p2c2g2';
}); app.myrouter = myrouter; return app; }(uirouterModule || {}));

* 路由传参:

传递:

  1. ui-sref="issue.add({deviceId: device.id})";或

   ui-sref="issue.add({device: device});

    2. $state.go('issue.add', {devideId: devideId}); 或

   $state.go('issue.add', {devide: device);

配置:

 .state('issues.add',{
url: '/add/:deviceId', //普通参数直接在url上传递,表现url上
params: {device: null} //// 定义一个空对象,接收数据,同样也可以传递普通参数,但都不会在url上显示
templateUrl: '/mobile/issue/add',
controller: 'IssueAddMobileCtrl'
})

  接收:

$scope.deviceId = $stateParams.deviceId;

  

有不足的地方欢迎随时指正

  

使用angular-ui-router替代ng-router的更多相关文章

  1. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  2. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar?how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  3. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  4. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  5. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  6. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  7. [Angular2 Router] Lazy Load Angular 2 Modules with the Router

    Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...

  8. Angular入门(四) Router 替换当前页面

    1.在 xx.html 中直接 写标签       <a [routerLink]="['/home']">home</a>   2.在 xx.html 中 ...

  9. [Angular 2] Router basic and Router Params

    When we define router in Angualr 2, we use @RouteConcfig() When we want to display component, we use ...

  10. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

随机推荐

  1. python批量修改文件内容及文件编码方式的处理

    最近公司在做tfs迁移,后面要用新的ip地址去访问tfs 拉取代码  ,所以原来发布脚本中.bat类型的脚本中的的ip地址需要更换 简单说下我们发布脚本层级目录 :每个服务站点下都会有一个发布脚本 . ...

  2. UART知识总结

    一.定义 通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART. 二.时序 上图是uart协议传输一个"A" ...

  3. shell 脚本——判断条件

    在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...

  4. 【java学习笔记】反射基础

    一.反射 反射就是在剖析一个类,了解这个类的构造,创建这个类对应的对象. Class 代表字节码的类,代表类的类 Field 代表属性的类 Method 代表方法的类 Constructor 代表构造 ...

  5. SQL Server查询中对于单列数据','分割的数据进行的拆分操作,集合的每一个行变多行

    1.cross apply cross apply 我们可以把它看作成是inner join 来使用 2.outer apply outer apply我们可以把它看做是left join 来使用 注 ...

  6. Linux XZ压缩格式学习

    XZ的介绍   今天升级Python的时候,下载的Python-2.7.8.tar.xz安装包为xz格式,好吧,我又孤陋寡闻了,居然第一次遇见xz格式的压缩文件.搜索了一下资料,下面是xz的一些介绍: ...

  7. 通过grub-install命令把grub安装到u盘-总结

    通过grub-install命令把grub安装到u盘 ①准备一个u盘,容量不限,能有1MB都足够了. ②把u盘格式化(我把u盘格式化成FAT.fat32格式了,最后证明也是成功的).③开启linux系 ...

  8. Nginx HTTP模块指令

    alias 指令 该指令用于在url和系统路径之间的映射. location /a/{ alias /b/; } error_page 定义错误页面 error_page 404 /404.html; ...

  9. EFI、UEFI、MBR、GPT的区别

    UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...

  10. Linux查看内存使用量和交换区使用量

    Linux查看内存使用量和交换区使用量 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -m total used free shared buffe ...