AngularJS 的嵌套路由 UI-Router

本篇文章翻译自：https://scotch.io/tutorials/angular-routing-using-ui-router

演示网站请查看：http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview

源码：http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview

下面是我自己做的demo。比上面的例子要简单一点。

github DEMO地址如下：https://github.com/roverliang/UI-Router-DEMO

受本人英语水平限制，所以只能简要翻译，英语水平比较好的可以直接查看原文。

AngularJs的指令集是一个非常好的方式用来构建单页的网页应用。当创建一个单页应用的时候，路由的重要性就凸显出来。我们希望我们的导航栏就如同普通的网站一样，点击后没有刷新，那么我们可以使用Angular的路由——ngRouter 方法。

但是，现在我们将注意力放在另外一个好用的方法上——UI-Router.

概览

Angular 的Router 是什么？

UI-Router 是Angular 团队创建的一个路由框架。他的指令和Angular的ngRoute方法很接近。它通过改变应用中视图的状态（State），而不是像ngRoute那样通过改变当前应用的url来实现。

状态（STATES）与 URL 路由 的异同。

使用这种方法，你的视图和路由不是绑定在一起的。你可以改变你的站点的某些部分，而你的url而不用也跟着变化。当使用ngRoute，你必须使用nginclude或者其他的方法，这可能会导致混淆。现在你所有的状态（state）、路由（route）以及视图（view）

你将全部接管，使用config()方法，这将创建一个自上而下（等会解释）的应用。

做一个示例

下面让我们做一个UI-Route的教程。这将创建一个Home和About页面。

开始

让我们开始书写我们的应用，我们需要一些文件。

  1. - index.html				// will hold the main template for our app
  2. - app.js					// our angular code
  3. - partial-about.html    	// about page code
  4. - partial-home.html    		// home page code
  5. - partial-home-list.html	// injected into the home page
  6. - table-data.html   	   // re-usable table that we can place anywhere

我们的应用框架已经搭建完毕，那就让我们按照框架的结构填充代码吧。

  1. 	<!-- index.html -->
  3. 	<!DOCTYPE html>
  4. 	<html>
  5. 	<head>
  6.     	<!-- CSS (load bootstrap) -->
  7.     	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  8.     	<style>
  9.     	.navbar { border-radius:0; }
  10.     	</style>
  12.     	<!-- JS (load angular, ui-router, and our custom js file) -->
  13.     	<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  14.     	<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  15.     	<script src="app.js"></script>
  16. 	</head>
  18. 	<!-- apply our angular app to our site -->
  19. 	<body ng-app="routerApp">
  21.     	<!-- NAVIGATION -->
  22.     	<nav class="navbar navbar-inverse" role="navigation">
  23. 	    	<div class="navbar-header">
  24. 	    		<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
  25. 	    	</div>
  26. 	    	<ul class="nav navbar-nav">
  27. 		    	<li><a ui-sref="home">Home</a></li>
  28. 		    	<li><a ui-sref="about">About</a></li>
  29. 	    	</ul>
  30.     	</nav>
  32.     	<!-- MAIN CONTENT -->
  33.     	<div class="container">
  35. 	    	<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
  36. 	    	<div ui-view></div>
  38.     	</div>
  40. 	</body>
  41. 	</html>

上面事我们首页的html文件，我们将引用BootStrap来傍午我们构建样式。值得注意的是必须在引用AngularJS之后引用ui-router。UI Router是AngularJS的核心组成部分，就像ngRoute一样。

当我们使用UI-Router创建一个链接的时候，你将会使用ui-sref。 这些在你的app.js将状态会转化成一个链接。

同理我们将使用

来 代替 ngRoute 的

让我们继续构建我们的app.js吧。

  1. // app.js
  2. var routerApp = angular.module('routerApp', ['ui.router']);
  4. routerApp.config(function($stateProvider, $urlRouterProvider) {
  6.     $urlRouterProvider.otherwise('/home');
  8.     $stateProvider
  10.         // HOME STATES AND NESTED VIEWS ========================================
  11.         .state('home', {
  12.             url: '/home',
  13.             templateUrl: 'partial-home.html'
  14.         })
  16.         // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
  17.         .state('about', {
  18.             // we'll get to this in a bit
  19.         });
  21. });

我们已经创建了我们的RouteAPP。我们将body放置在index.html中，在这个页面中，我们有一个home选项和about选项。我们将使用partial-home.html作为模板文件。 让我们在partial-home.html中填充些代码吧。

  1. <!-- partial-home.html -->
  3. <div class="jumbotron text-center">
  4.     <h1>The Homey Page</h1>
  5.     <p>This page demonstrates <span class="text-danger">nested</span> views.</p>
  6. </div>

截止现在我们已经拥有了我们的站点，虽然我们还没有敲多少代码，但是我们的确拥有了它。

上面一些无聊的构建文件的阶段已经过去，下面让我们看下为什么UI-Router会产生那么酷炫的效果。

嵌套视图

接下来看看如何构建我们的应用。首先我们将在首页添加两个button。其次将根据用户点击不同的button切换不同的页面。

我们将两个button添加到partial-home.html ，然后思考如何才能进行页面切换。

  1. <!-- partial-home.html -->
  3. <div class="jumbotron text-center">
  4.     <h1>The Homey Page</h1>
  5.     <p>This page demonstrates <span class="text-danger">nested</span> views.</p>  
  7.     <a ui-sref=".list" class="btn btn-primary">List</a>
  8.     <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
  9. </div>
  11. <div ui-view></div>

当我们链接到一个嵌套视图。我们将使用点（dot）：ui-sref=".list"和ui-sref=".paragraph"。我们将在这个文件中定义他们，定义后会被注入（inject）到我们的新的视图区

现在切换到我们app.js，让我们创建剩下的嵌套状态（states）

  1. // app.js
  2. ...
  4. $stateProvider
  6.     // HOME STATES AND NESTED VIEWS ========================================
  7.     .state('home', {
  8.         url: '/home',
  9.         templateUrl: 'partial-home.html'
  10.     })
  12.     // nested list with custom controller
  13.     .state('home.list', {
  14.         url: '/list',
  15.         templateUrl: 'partial-home-list.html',
  16.         controller: function($scope) {
  17.             $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
  18.         }
  19.     })
  21.     // nested list with just some random string data
  22.     .state('home.paragraph', {
  23.         url: '/paragraph',
  24.         template: 'I could sure use a drink right now.'
  25.     })
  27. ...

现在 ui-sref 被定义在home.html中，标注一个状态。随着home.list和home.paragraph页面创建。这些链接所对应的模板将会被注册到ui-view中。

我们最后一件事要做的是partial-home-list.html文件定义。此外还创建了一个控制器，我们将在模板中使用这些数据（dogs对象）。

  1. <!-- partial-home-list.html -->
  3. <ul>
  4.     <li ng-repeat="dog in dogs">{{ dog }}</li>
  5. </ul>

现在我们列表，它会将数据（dogs对象）注入到模板。如果我们点击Paragraph，它会将字符串注入页面中。

现在你应该发现了在我们的状态上切换不同的部分是多么的简单。我们并没有使用ngInclude、ngShow，ngHide。或者ngIf。这保持我们的app.js是足够的简单。

在About下添加更多页面

一个有多个视图的应用程序会更加强大。也许你的网站上还有侧边栏，上面有热门职位、最近的帖子、用户什么之类的。这些都可以被分离出来，并且注入我们的模板。并且可以为每一个模板使用是一个控制器，这将充分保持我们应用程序的干净。

对于我们的About页，让我们做一个双栏，并有各自的数据。我们将先处理视图，然后再看看我们如何使用用户界面的路由器。

  1. <!-- partial-about.html -->
  3. <div class="jumbotron text-center">
  4.     <h1>The About Page</h1>
  5.     <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
  6. </div>
  8. <div class="row">
  10.     <!-- COLUMN ONE NAMED VIEW -->
  11.     <div class="col-sm-6">
  12.         <div ui-view="columnOne"></div>
  13.     </div>
  15.     <!-- COLUMN TWO NAMED VIEW -->
  16.     <div class="col-sm-6">
  17.         <div ui-view="columnTwo"></div>
  18.     </div>
  20. </div>

这里会有更多的页面，一个是columnOne，一个是columnTwo.

为什么有人会使用这种方法？这是一个很好的问题。是我们创建一个应用程序太模块化，这可能会让人困惑？从官方的UI路由器文档，这里是一个坚实的例子，为什么你会有多个命名视图。在他们的例子中，他们展示了一个应用程序的不同部分。每一部分都有自己的数据，所以每一部分都有自己的控制器和模板文件，使得构建类似这样的东西很容易。

现在我们所有的视图已经创建完毕，让我们回到app.js

  1. // app.js
  3. ...
  5.     .state('about', {
  6.         url: '/about',
  7.         views: {
  9.             // the main template will be placed here (relatively named)
  10.             '': { templateUrl: 'partial-about.html' },
  12.             // the child views will be defined here (absolutely named)
  13.             'columnOne@about': { template: 'Look I am a column!' },
  15.             // for column two, we'll define a separate controller
  16.             'columnTwo@about': {
  17.                 templateUrl: 'table-data.html',
  18.                 controller: 'scotchController'
  19.             }
  20.         }
  22.     });
  24. }); // closes $routerApp.config()
  26. // let's define the scotch controller that we call up in the about state
  27. routerApp.controller('scotchController', function($scope) {
  29.     $scope.message = 'test';
  31.     $scope.scotches = [
  32.         {
  33.             name: 'Macallan 12',
  34.             price: 50
  35.         },
  36.         {
  37.             name: 'Chivas Regal Royal Salute',
  38.             price: 10000
  39.         },
  40.         {
  41.             name: 'Glenfiddich 1937',
  42.             price: 20000
  43.         }
  44.     ];
  46. });
  48. ...

整个流程就是这样。完整的文章请查看https://scotch.io/tutorials/angular-routing-using-ui-router#sample-application

演示网站请查看：http://embed.plnkr.co/IzimSVsstarlFviAm7S7/preview

源码：http://plnkr.co/edit/IzimSVsstarlFviAm7S7?p=preview

。

下面是我自己做的demo。比上面的例子要简单一点。

github DEMO地址如下：https://github.com/roverliang/UI-Router-DEMO

应用目录如下。

AngularJS 的嵌套路由 UI-Router的更多相关文章

  1. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  2. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  3. angularjs的路由ui.router

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

  4. Angularjs中的嵌套路由ui-router

    先看看ng-router和ui-router的区别 (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换.  (2)ui-route的改进:在具 ...

  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 实现表单向导

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

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

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

  8. angularjs ui-view多视口多层嵌套路由配置

    最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...

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

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

随机推荐

  1. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理1

    首先给上项目的整体框架图:,这里我没有使用BLL,因为感觉太烦了就没有去使用. 那么接下来我们首先先去Model层中添加Model. 管理员类: using System; using System. ...

  2. Apache 安装配置详情

    本次文章讲解Apache的安装和基本的配置 输入PHP环境搭建的一部分 PHP完整配置信息请参考 http://www.cnblogs.com/azhe-style/p/php_new_env_bui ...

  3. SQL SERVER 2014 各个版本支持的功能

    转自:https://technet.microsoft.com/library/cc645993 转换箱规模限制 功能名称 Enterprise Business Intelligence Stan ...

  4. java自带工具-javap使用

    javap是JDK自带的反汇编器,可以查看java编译器为我们生成的字节码.通过它,我们可以对照源代码和字节码,从而了解很多编译器内部的工作,有助与我们更加理解java特性. javap(反汇编命令) ...

  5. Redmine 插件安装

    将对应的插件都复制进redmine的plugins 安装对应所需要的GEMS bundle install --without development test rmagick 执行插件合并 bund ...

  6. C#学习笔记-ContextMenuStrip

    ContextMenuStrip是就是所说的右键菜单,在VS里可以直接新建,挺方便.但是跟着师父看了很多代码,发现了好多时候都需要自己写这部分代码.这个部分目前为止我了解的还不是很多,更细致的就只有等 ...

  7. java中Class对象详解和类名.class, class.forName(), getClass()区别

    一直在想.class和.getClass()的区别,思索良久,有点思绪,然后有网上搜了搜,找到了如下的一篇文章,与大家分享. 原来为就是涉及到Java的反射----- Java反射学习 所谓反射,可以 ...

  8. HDU 1848 Fibonacci again and again【SG函数】

    对于Nim博弈,任何奇异局势(a,b,c)都有a^b^c=0. 延伸: 任何奇异局势(a1, a2,… an)都满足 a1^a2^…^an=0 首先定义mex(minimal excludant)运算 ...

  9. 发一份shiro标准配置，特此记录

    主要还是整合了本地ehcache,集群session管理过段时间放出 <?xml version="1.0" encoding="UTF-8"?> ...

  10. Hibernate批量处理数据

    01.批量插入数据 步骤一.创建实体类,Dept和Emp /** * 员工类 * @author Administrator * */ public class Emp { private Integ ...