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. flask_mysql入库

    mysql 的入库和MongoDB的有一点点的区别 不过都很重要,都必须要掌握的技能, 现在我来演示一下mysql入库的过程: 首先  我们要导包,这是必不可少的一部分,都不用我说了吧 #导报 imp ...

  2. 【转】通过js获取系统版本以及浏览器版本

    function getOsInfo() { var userAgent = navigator.userAgent.toLowerCase(); var name = 'Unknown'; var ...

  3. 从C#到TypeScript - 类型

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  4. opencv实现正交匹配追踪算法OMP

    //dic: 字典矩阵: //signal :待重构信号(一次只能重构一个信号,即一个向量) //min_residual: 最小残差 //sparsity:稀疏度 //coe:重构系数 //atom ...

  5. Bridge桥接模式(结构型模式)

    现有一个需求,一个游戏系统需要构建不同风格的房屋,暂不考虑其他设计模式,需要能实现在PC端.移动端....等等多个平台的构建.最简单的实现方式如下: /// <summary> /// 房 ...

  6. 使用Xutils 3 中遇到的一些问题!!!!

    1.当xml页面中有可见的,同时设置id的控件时,如果在Activity中没有使用注解进行反射该控件,app会crash,提示:  Caused by: java.lang.NullPointerEx ...

  7. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  8. Ceph 块设备 - 块设备快速入门

    目录 一.准备工作 二.安装 Ceph 三.使用块存储   一.准备工作 本文描述如何安装 ceph 客户端,使用 Ceph 块设备 创建文件系统并挂载使用. 必须先完成 ceph 存储集群的搭建,并 ...

  9. 【详解】GrantedAuthority(已授予的权限)

    前言 这篇是很久之前学习Spring Security整理的博客,发现浏览量都1000多了,一个赞都没有,那说明写得确实不怎么样,哈哈.应该很多初学者对这个接口存在疑问,特别是如果学习这个框架之前还了 ...

  10. Tomcat学习总结(6)——Tomca常用配置详解

    注:Tomcat 8需要JRE7以上的JRE 1. Tomcat环境变量设置 1.1 Java环境变量设置 右键计算机—属性—高级系统设置—环境变量,在”系统环境变量”,设置如下三个变量(如果变量已有 ...