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. nodejs爬虫初试---superagent和cheerio

    前言 早就听过爬虫,这几天开始学习nodejs,写了个爬虫 demo ,爬取 博客园首页的文章标题.用户名.阅读数.推荐数和用户头像,现做个小总结. 使用到这几个点: 1.node的核心模块-- 文件 ...

  2. 项目实战14—ELK 企业内部日志分析系统

    一.els.elk 的介绍 1.els,elk els:ElasticSearch,Logstash,Kibana,Beats elk:ElasticSearch,Logstash,Kibana ① ...

  3. jVM笔记4-对象的结构

    1.对象的结构有: 1.Header(对象头),其组成主要有两部分: 1.自身运行时的数据(Mark Word),包括: 1.哈希值 2.GC分代年龄. 3.锁状态标志 4.线程所持有的锁 5.偏向线 ...

  4. Ubuntu上搭建Hadoop环境(单机模式+伪分布模式)

    首先要了解一下Hadoop的运行模式: 单机模式(standalone)        单机模式是Hadoop的默认模式.当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,便保守地选 ...

  5. .net core 部署到 iis 步骤及报错解决方法

    我写了一个Asp.net core mvc项目,但是部署在iis发生了502.5的问题一直解决不了. 环境 系统:最强Win10; 工具:轻巧VS Code; 各种百度bing都没有我要的解决方案,说 ...

  6. 在 React 中使用 JSX 的好处

    优点: 1.允许使用熟悉的语法来定义 HTML 元素树: 2.提供更加语义化且移动的标签: 3.程序结构更容易被直观化: 4.抽象了 React Element 的创建过程: 5.可以随时掌控 HTM ...

  7. 【前端】nodejs的ORM框架sequelize的工厂化

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/sequelize_factory.html 一.什么是sequelize nodejs的后台在操作数据库的时候,需 ...

  8. PaddlePaddle︱开发文档中学习情感分类(CNN、LSTM、双向LSTM)、语义角色标注

    PaddlePaddle出教程啦,教程一部分写的很详细,值得学习. 一期涉及新手入门.识别数字.图像分类.词向量.情感分析.语义角色标注.机器翻译.个性化推荐. 二期会有更多的图像内容. 随便,帮国产 ...

  9. php session函数

    session_start() 开启session 使用session前需要使用该函数 session_id() 获取当前回话的sessionid session_save_path($path) 如 ...

  10. html头部规范书写

    建立标准化的声明(DOCTYPE)和head 以前的网页,甚至大型的门户网站也连个声明也没有,就仅仅是<html>,现在要做的就是给你的网页加上声明,规范head区域,让搜索引擎和喜欢你的 ...