前言

上一篇我们介绍了AngularJS内置的路由ngRoute，我们知道AngularJS被广泛应用于单页应用SPA（Single Page Application）中，此时路由对于我们来讲非常重要，对于内置的路由（也不能说内置，只能说在VS中默认下载的路由包是ngRoute），但是我们应该明显的知道他的不足，例如上一篇所演示，当我们通过路由导航到另外一个页面，此时若我们刷新页面，此时则会存在找不到页面的情况，此时急需我们再找一种替代方法。这就是我们本节要讲的话题【ui.router】。

ui.router

说到这里，我们有必要介绍一下什么是ui.router，此UI-Router是由AngularUI团队为AngularJS构建的路由框架，它提供的改变应用视图是基于应用的状态与ngRoute路由映射不同，同时不仅仅是映射URL，相比较ngRoute，更灵活，更具扩展性。在基于ui.router的路由，我们的视图和路由不需要和URL紧紧绑定一起，我们可以在不改变URL的情况下通过ui.router来改变网站所需要呈现的内容。因为ui.router是基于路由和状态，所以同样也如ngRoute在config中进行配置。

下面我们一步步来构建如何使用ui.router，关于加入对应脚本什么的基础就不再废话。

Index.html

  1. <body ng-app="routerApp">
  2.     <div class="navbar">
  3.         <div class="navbar-inner">
  4.             <a class="brand" ui-sref="home">AnglarUi Router</a>
  5.             <ul class="nav">
  6.                 <li><a ui-sref="home">Home</a></li>
  7.                 <li><a ui-sref="about">About</a></li>
  8.             </ul>
  9.         </div>
  10.     </div>
  11.     <div class="container">
  12.  
  13.         <div ui-view></div>
  14.  
  15.     </div>
  16. </body>

在ui.router中，我们用 ui-sref 来创建一个超链接，它会自动生成导向对应应用的状态，用 ui-view 来代替ngRoute中的ng-view。

app.js

  1. var routerApp = angular.module('routerApp', ['ui.router']);
  2.  
  3. routerApp.config(function($stateProvider, $urlRouterProvider) {
  4.  
  5.     $urlRouterProvider.otherwise('/home');
  6.  
  7.     $stateProvider
  8.     .state('home', {
  9.         url: '/home',
  10.         templateUrl: 'partial-home.html'
  11.     })
  12. });

或者

  1. var routeApp = angular.module('routerApp', ['ui.router']);
  2.  
  3. routeApp.config(config);
  4.  
  5. function config($stateProvider,$urlRouterProvider){
  6.  
  7.     $urlRouterProvider.otherwise("/home");
  8.  
  9.     $stateProvider.state("home",{
  10.         url:"/home",
  11.         templateUrl:"partial-home.html"
  12.     }).state("about",{
  13.  
  14.     });
  15. }
  16.

partial-home.html

  1. <div class="jumbotron text-center">
  2.     <h1>The Home Page</h1>
  3.     <p>此页面用来演示 <span class="text-danger">嵌套</span> 视图.</p>
  4. </div>

此时我们看看基本效果：

接下来我们开始进一步深入，我们开始嵌套视图页面。

在Home嵌套视图

此时将partial-home.html修改成如下，下面用颜色标记添加的部分。

  1. <div class="jumbotron text-center">
  2.     <h1>The Home Page</h1>
  3.     <p>此页面用来演示 <span class="text-danger">嵌套</span> 视图.</p>
  4.     <a ui-sref=".list" class="btn btn-primary">List</a>
  5.     <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
  6. </div>
  7. <div ui-view></div>

我们通过上述.list和.paragraph链接在下面ui-view中继续呈现视图，此时我们再在app.js状态中进行添加脚本。

  1. .state('home.list', {
  2.         url: '/list',
  3.         templateUrl: 'partial-home-list.html',
  4.         controller: function($scope) {
  5.             $scope.dogs = ['普通狗', '哈士奇', '金毛'];
  6.         }
  7.     })
  8.     .state('home.paragraph', {
  9.         url: '/paragraph',
  10.         template: '你点击了paragraph'
  11.     })
  12. });

上述我们定义链接到partial-home-list.html模板，此时为如下代码：

  1. <ul>
  2.     <li ng-repeat="dog in dogs">{{ dog }}</li>
  3. </ul>

我们再来看下效果：

在About呈现多视图

多视图想必我们用的地方也是更多，比如在博客园中，将最近新闻单独放在一个页面中并最终注入到母版中，每一个页面都有其控制器以及模板，这样能保证我们的一个页面整体干净而不至于内容太多而显得非常臃肿，

partail-about.html

  1. <div class="jumbotron text-center">
  2.     <h1>The About Page</h1>
  3.     <p>此页面用来演示 <span class="text-danger">多</span> 以及 <span class="text-danger">命名的</span> 视图.</p>
  4. </div>
  5.  
  6. <div class="row">
  7.     <div class="col-sm-6">
  8.         <div ui-view="columnOne"></div>
  9.     </div>
  10.  
  11.     <div class="col-sm-6">
  12.         <div ui-view="columnTwo"></div>
  13.     </div>
  14.  
  15. </div>

在此页面中有多个视图，一个是命名为columnOne的视图，另一个则是columnTwo视图。此时在app.js继续添加导向到此页面的状态。

  1.     .state('about', {
  2.         url: '/about',
  3.         views: {
  4.             '': { templateUrl: 'partial-about.html' },
  5.             'columnOne@about': { template: '我是columnOne!' },
  6.             'columnTwo@about': {
  7.                 templateUrl: 'table-data.html',
  8.                 controller: 'scotchController'
  9.              }
  10.         }
  11.  
  12.     });

columnOne@about 和 columnTwo@about 在这里要说明一下，这里涉及到视图的相对命名和绝对命名，对于这个框架中的viewName@stateName，因为我们的主视图在我们的about状态中，此时就视图名称就演变成了columnOne@about。

以及如上scotchController对应渲染的数据：

  1. routerApp.controller('scotchController', function($scope) {
  2.  
  3.     $scope.message = '品牌';
  4.  
  5.     $scope.product = [
  6.     {
  7.         name: '西遇',
  8.         price: 50
  9.     },
  10.     {
  11.         name: 'Only',
  12.         price: 10000
  13.     },
  14.     {
  15.         name: '杰克琼斯',
  16.         price: 20000
  17.     }
  18.     ];
  19.  
  20. });

模板页table-data.html

  1. <div style="font-weight: bolder;font-size: x-large;">{{message}}</div>
  2. <table class="table table-hover">
  3.     <thead>
  4.         <tr>
  5.             <th>名称</th>
  6.             <th>价格</th>
  7.         </tr>
  8.     </thead>
  9.     <tbody>
  10.             <tr ng-repeat="p in product">
  11.                 <td>{{p.name}}</td>
  12.                 <td>{{p.price}}</td>
  13.             </tr>
  14.     </tbody>
  15. </table>

最终我们所有都已经完成，我们来整体演示下完整效果：

总结

本节我们进一步讲了路由，关于ngRoute的替代品ui.router，在实际开发中ui.router是比较合适的替代品，就如上一篇所言中angular-resource的替代品。 下一节我们再次深入讲讲路由的高级，下节见。

AngularJS之中级Route【二】（七）的更多相关文章

  1. AngularJS 指令解析（二）

    AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...

  2. AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  3. AngularJS之高级Route【三】（八）

    前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...

  4. AngularJS之初级Route【一】（六）

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...

  5. Angularjs学习笔记（二）----模块

    一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...

  6. angularjs+ionic+'h5+'实现二维码扫描功能

    今天给大家分享一下基于angularjs与ionic框架实现手机二维码扫描的功能.没有用到cordova等任何插件,h5+实现的. 开发工具:hbuilder 首先,需要在hbuilder项目下面的配 ...

  7. 最适合入门的Laravel中级教程(二)用户认证

    之前的初级教程主要是学习简单的增删改查: 接着的中级教程的目标是在初级教程的基础上能写出更复杂更健壮的程序: 我们先来学习 laravel 的用户认证功能: 在现代网站中基本都有用户系统: 而我们每开 ...

  8. AngularJS之Filter（二）

    前言 本节我们来讲讲AngularJS中主要的部分之一,那就是过滤器,当从后台获取到的数据呈现到视图上时,此时可能需要对数据进行相应的转换,此时我们可以通过过滤器在不同页面进行不同数据的格式抓换,在A ...

  9. 我的AngularJS 学习之旅(二)

    记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...

随机推荐

  1. StringBuilder（字符串拼接类）

    StringBuilder是在using System.Text命名空间下的一个成员. 在做字符串拼接的时候,因为字符串是引用类型,新的字符串是会再内存中创建的,所以用+号拼接字符串是比较耗效率的. ...

  2. STM32之ADC+步骤小技巧（英文）

    神通广大的各位互联网的网友们.大家早上中午晚上好好好.今早起来很准时的收到了两条10086的扣月租的信息.心痛不已.怀着这心情.又开始了STM32的研究.早上做了计算机控制的PID实验,又让我想起了飞 ...

  3. vue.js的基本操作

    1.{{message}}输出data数据中的message. 2.v-for="todo in todos"输出data数据中的dotos数组 3.v-on:click=&quo ...

  4. java.net.ConnectException: Connection timed out

    原因可能如下: (1)生成的WSDL的IP地址是不是服务器的IP: (2)代码中是否需要代理,若否,取消代理,若是,设置代理:

  5. 递归一题总结（OJ P1117倒牛奶）

    题目:                    农民约翰有三个容量分别是A,B,C升的桶,A,B,C分别是三个从1到20的整数,最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另 ...

  6. 初识 Html5

    1.1认识HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...

  7. 使用Spring JdbcTemplate实现数据库操作

    今天我来演示 关于JDBCTemplate实现对数据库的查询和添加 首先是添加 第一步大家都知道 创建一个实体类 然后写一个方法 把实体类当参数传进去 在实现这个接口 JdbcDaoSupport这个 ...

  8. Hbuilder开发HTML5 APP之打开新页面

    mui.openWindow({ url: 'examples/info.html', id:'info' }); 要在页面间传递参数,需要使用一个extras:{}对象另外打开的页面显示的内容必须装 ...

  9. poj3187-Backward Digit Sums(枚举全排列)

    一,题意: 输入n,sum,求1~n的数,如何排列之后,相邻两列相加,直到得出最后的结果等于sum,输出1~n的排列(杨辉三角)  3 1 2 4 //1~n 全排列中的一个排列  4 3 6  7 ...

  10. 生活中的OO智慧——大话面向对象五大原则

    世间万物,以俗眼观纷纷各异,以道眼观种种是常.面向对象思想不仅是编程的智慧,同样也是人生的智慧.通过生活去领悟面向对象的智慧,以面向对象的智慧来指导生活. (部分图片取自How I explained ...