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. Apache JMeter的基本使用

    安装 安装地址:http://jmeter.apache.org/download_jmeter.cgi 解压后运行jmeter.bat的批处理文件就可以了 JMeter测试脚本编写: 1,创建线程组 ...

  2. 【liferay】4、liferay的权限体系

    liferay中有几个概念 1.user_ 表存放liferay的用户 2.usergroup 用户组 3.角色 4.组织,组织可以是站点的成员 5.站点 6.团队 liferay中所有的东西都被视为 ...

  3. django操作memcached

    1.首先需要在settings.py中配置好缓存 CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.memcached.Me ...

  4. C#递归方法遍历目录及子目录

    众所周知,获得某一目录下第一级的所有文件和文件夹列表,很容易办到:DirectoryInfo di=new DirectoryInfo(strBaseDir);//strBaseDir是起始目录,绝对 ...

  5. Web API 2 对于 Content-Length 要求严格

    最近在做一个工具,里面有一个发起http请求的操作,虽然工具不是用.NET写的,但是测试用服务器软件是.NET写的.在这里选择了ASP.NET MVC和Web API 2. 首先预定义Student与 ...

  6. STL简洁 && c++读取cfg文件

    在c++工程中,往往需要修改一些变量来实现不同的功能效果,这是cfg文件的使用可以使得工程更加高效与便利,这篇文章介绍的就是c++读取cfg文件的相关内容,以便及时总结和日后回顾. STL即标准模板库 ...

  7. FactoryMethod工厂方法模式(创建型模式)

    1.工厂方法模式解决的问题 现在有一个抽象的游戏设施建造系统,负责构建一个现代风格和古典风格的房屋和道路. 前提:抽象变化较慢,实现变化较快(不稳定) 整个抽象的游戏设施建造系统相对变化较慢,本例中只 ...

  8. 如何查看第三方apk的信息

    很多时候,我们需要获取别人的apk的信息.但是我们看不到apk的代码,对于apk的信息并没有直接的方法获取.那么,我们要怎么获取apk信息呢? 这里,我整理了两个方法,亲测可用. 第一种,直接使用An ...

  9. CentOS 6.5 网络服务器功能的实现①:运用bind搭建基本的DNS服务器

    何谓DNS服务?简而言之,DNS服务在互联网中可以实现域名解析(把域名转换成网络可以识别的IP地址). 名词解释①:正向解析:域名解析IP地址:反向解析:IP地址解析域名. DNS服务的正/反向区域解 ...

  10. Nginx缓存配置

    访问我的博客 前言 本文介绍利用 nginx 的 nginx_ngx_cache_purge 模块来实现缓存功能,前几篇文章介绍了 Nginx 的动静分离以及 CDN 技术,在其基础上,再对整个页面进 ...