1.安装

bower install --save angular_ui-router

2.在项目主页面 index.html中添加

<div ui-view=""></ui-view>/*login页面,dashboard.html将会嵌入此处*/

3.在app.js页面设置

.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/login');/*其他找不到的时候默认跳转的页面*/
$stateProvider .state('login',{
url:'/login',
templateUrl:'/views/login.html'
})
.state('dashboard',{
url:'/dashboard',
templateUrl:'/views/dashboard.html'/*这个是一个登陆后的主页面*/
})
.state('dashboard.articlelist',{
url:'/articlelist',
templateUrl:'/views/articlelist.html'/*这是dashboard里面的一个嵌套页面*/
})
.state('dashboard.addarticle',{
url:'/addarticle',
templateUrl:'/views/addarticle.html'
})
});

4.在HTML中设置

这个是在dashboard下的嵌套页面写法:

    <li ui-sref=".articlelist"><a href="" >Article列表</a></li>/*注意其中的dot,href什么也不需要写*/

<div>
<div ui-view=""/>
</div>/*articlelist和addarticle两个页面将会嵌套在dashboard这里*/
 

这个是上面页面里有个button点击之后跳转到另外一个嵌套页面,注意 ur-sref添加了父节点 dashboard. href也有内容

<button type="button" class="btn btn-success btn-xs pull-right" ui-sref="dashboard.addarticle" href="/addarticle">+新增</button>

AngularJS学习之 ui router的更多相关文章

  1. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  2. AngularJS学习 之 UI以及逻辑生成

    学习<Angular高级编程>理解如下 要求: 创建如下界面,有导航栏,一个Watchlists面板,面板上有个加号button,一句说明“”Use+to create a list“” ...

  3. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  4. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  5. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  7. 基于AngularJS的Onsen UI --Onsen UI学习笔记

    AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...

  8. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  9. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

随机推荐

  1. python学习笔记10-文件操作

    能调用方法的一定是对象.文件本身也是一个对象.有很多自己内置的方法 #操作文件第一件事 建立文件对象 open函数 # 参数一:文件路径 绝对路径和相对路径都可以 # 参数二:模式选择 ‘r’ 读模式 ...

  2. Python3之PrettyTable模块

    一. 简介 Python通过prettytable模块将输出内容如表格方式整齐输出,python本身并不内置,需要独立安装该第三方库. 二. 安装 方式一:pip安装 >>> pip ...

  3. 弹出AlertDialog的时候报You need to use a Theme.AppCompat theme (or descendant) with this activity错误

    今天遇到一个bug,用百度地图的时候,我对上面的标注设置了点击监听,设置的相应的反应是弹出一个AlertDialog 记录一解决bug的历程 但是Dialog却没有弹出来,一看AS下面,报了这错,起初 ...

  4. Runtime 全方位装逼指南

    Runtime是什么?见名知意,其概念无非就是“因为 Objective-C 是一门动态语言,所以它需要一个运行时系统……这就是 Runtime 系统”云云.对博主这种菜鸟而言,Runtime 在实际 ...

  5. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  6. 重启tomcat服务操作

    1. 进入linux系统下tomcat的bin目录,比如:cd /usr/local/apache-tomcat-7.0.42/bin 2. 关闭一下tomcat服务,特别是已经启动的情况下,只不过有 ...

  7. Python Web框架 bottle flask

    Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. 1 2 3 4 pip instal ...

  8. Redis学习系列三List列表

    一.简介 Redis中的列表相当于C#中的LinkedList,也就是链表,如果你研究过链表这个数据结构,肯定知道.它的插入和删除是非常快的,但是定位却很慢,因为必须遍历所有的元素,才能找到对应的值, ...

  9. php数组方法

    查找.筛选与搜索数组元素是数组操作的一些常见功能.下面来介绍一下几个相关的函数. in_array()函数 in_array()函数在一个数组汇总搜索一个特定值,如果找到这个值返回true,否则返回f ...

  10. 磁盘分区以及Linux目录挂载详解

    一.背景 一直以来,对于磁盘的分区以及Linux目录挂载的概念都不是很清晰,现在趁着春暖花开周末在家没事就研究了下它们,现在来分享我的理解. 二.概念详解 1.磁盘分区 磁盘分区是把物理的磁盘空间按照 ...