1.安装

bower install --save angular_ui-router

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

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

3.在app.js页面设置

  1. .config(function ($stateProvider,$urlRouterProvider) {
  2. $urlRouterProvider.otherwise('/login');/*其他找不到的时候默认跳转的页面*/
  3. $stateProvider
  4.  
  5. .state('login',{
  6. url:'/login',
  7. templateUrl:'/views/login.html'
  8. })
  9. .state('dashboard',{
  10. url:'/dashboard',
  11. templateUrl:'/views/dashboard.html'/*这个是一个登陆后的主页面*/
  12. })
  13. .state('dashboard.articlelist',{
  14. url:'/articlelist',
  15. templateUrl:'/views/articlelist.html'/*这是dashboard里面的一个嵌套页面*/
  16. })
  17. .state('dashboard.addarticle',{
  18. url:'/addarticle',
  19. templateUrl:'/views/addarticle.html'
  20. })
  21. });

4.在HTML中设置

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

  1. <li ui-sref=".articlelist"><a href="" >Article列表</a></li>/*注意其中的dot,href什么也不需要写*/
  2.  
  1. <div>
    <div ui-view=""/>
    </div>/*articlelist和addarticle两个页面将会嵌套在dashboard这里*/
  1.  

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

  1. <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. 05-创建kubectl-kubeconfig文件

    本文档介绍创建 kubeconfig 文件 下载 kubectl $ wget https://dl.k8s.io/v1.6.0/kubernetes-client-linux-amd64.tar.g ...

  2. Twisted 框架 初印象

    上面是twisted官网推荐的书籍,从封面可以看到,是一堆大蟒(python)纠缠在一起,这里可以说明twisted是一个基于pyhton语言,支持各种网络协议(包括UDP,TCP,TLS和其他应用层 ...

  3. python并发编程之进程池,线程池concurrent.futures

    进程池与线程池 在刚开始学多进程或多线程时,我们迫不及待地基于多进程或多线程实现并发的套接字通信,然而这种实现方式的致命缺陷是:服务的开启的进程数或线程数都会随着并发的客户端数目地增多而增多, 这会对 ...

  4. Chapter 3 Phenomenon——21

    "Nobody will believe that, you know." “你知道吗没有人会相信会是这样的” His voice held an edge of derision ...

  5. mysql 删除单表内多个字段重复的数据

    mysql 删除单表内多个字段重复的数据 DELETE from lot_log_payflow WHERE (pay_no,sub_flow_type) in () s1) AND id ) s2) ...

  6. postgresql主从配置

    master:10.0.1.114 slaver:10.0.1.116 一.yum安装https://blog.csdn.net/weixin_41048363/article/details/803 ...

  7. 「每日一码」(精品代码,质量保证)empty和undefined

    将每天看到的优秀的代码或者特别的实现,记录下来 2019-2-26 empty和undefined 数组的filter,以下输出结果是什么 var arr = [1,2,3]; arr[10] = 9 ...

  8. xml Schema include

    first.xsd <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs=&q ...

  9. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  10. 深入出不来nodejs源码-流程总览

    花了差不多两周时间过了下primer C++5th,完成了<C++从入门到精通>.(手动滑稽) 这两天看了下node源码的一些入口方法,其实还是比较懵逼的,语法倒不是难点,主要是大量的宏造 ...