使用angular-ui-router替代ng-router
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的更多相关文章
- 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 ...
- [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呢? 目前我找到的唯一可行办法就 ...
- [译]发布ABP v0.19包含Angular UI选项
发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...
- vue 中router.go；router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- [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 ...
- Angular入门（四） Router 替换当前页面
1.在 xx.html 中直接 写标签 <a [routerLink]="['/home']">home</a> 2.在 xx.html 中 ...
- [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 ...
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
随机推荐
- python批量修改文件内容及文件编码方式的处理
最近公司在做tfs迁移,后面要用新的ip地址去访问tfs 拉取代码 ,所以原来发布脚本中.bat类型的脚本中的的ip地址需要更换 简单说下我们发布脚本层级目录 :每个服务站点下都会有一个发布脚本 . ...
- UART知识总结
一.定义 通用异步收发传输器(Universal Asynchronous Receiver/Transmitter),通常称作UART. 二.时序 上图是uart协议传输一个"A" ...
- shell 脚本——判断条件
在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...
- 【java学习笔记】反射基础
一.反射 反射就是在剖析一个类,了解这个类的构造,创建这个类对应的对象. Class 代表字节码的类,代表类的类 Field 代表属性的类 Method 代表方法的类 Constructor 代表构造 ...
- SQL Server查询中对于单列数据'，'分割的数据进行的拆分操作，集合的每一个行变多行
1.cross apply cross apply 我们可以把它看作成是inner join 来使用 2.outer apply outer apply我们可以把它看做是left join 来使用 注 ...
- Linux XZ压缩格式学习
XZ的介绍 今天升级Python的时候,下载的Python-2.7.8.tar.xz安装包为xz格式,好吧,我又孤陋寡闻了,居然第一次遇见xz格式的压缩文件.搜索了一下资料,下面是xz的一些介绍: ...
- 通过grub-install命令把grub安装到u盘-总结
通过grub-install命令把grub安装到u盘 ①准备一个u盘,容量不限,能有1MB都足够了. ②把u盘格式化(我把u盘格式化成FAT.fat32格式了,最后证明也是成功的).③开启linux系 ...
- Nginx HTTP模块指令
alias 指令 该指令用于在url和系统路径之间的映射. location /a/{ alias /b/; } error_page 定义错误页面 error_page 404 /404.html; ...
- EFI、UEFI、MBR、GPT的区别
UEFI.GPT.MBR是什么?这些专业术语不难理解,UEFI属于主板类名词,其作用类似于BIOS.GPT.MBR则属于硬盘类名词,它们的作用类似一艘航母的骨架,有了这个骨架,我们才可以进行细致到诸如 ...
- Linux查看内存使用量和交换区使用量
Linux查看内存使用量和交换区使用量 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -m total used free shared buffe ...