UDN-企业互联网技术人气社区

板块导航

浏览  : 1128
回复  : 0

[AngularJS] Angular2路由模块简介

[复制链接]
爱飞的火车的头像 楼主

  Angular2路由模块简介
 
  Angular2虽然还没有正式发布,但全新设计的路由模块已经提前面世,它从AngularJS 1.4开始支持。相对于老的ngRoute,使用更方便,配置更简单,更加注重约定。新的路由模块被命名为Angualar New Router,以前的ui-view被新的ng-viewport取而代之,另外引入了component的概念。我们用一个例子来对它做一个简单的了解。

  先放代码和DEMO。

  基础代码

  先来构建基础的HTML和JS代码,index.html代码如下:

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Angular New Router Test</title>
  5. </head>
  6. <body ng-app="webApp" ng-controller="AppController as app">
  7.   <div class="container">
  8.     <ng-viewport></ng-viewport>
  9.   </div>

  10.   <script src="../lib/angular2/angular.js"></script>
  11.   <script src="../lib/angular-new-router/dist/router.es5.js"></script>
  12.   <script src="./app.js"></script>
  13. </body>
  14. </html>
复制代码

  然后是AngularJS基础代码,app.js:
 
  1. 'use strict';

  2. angular.module('webApp', ['ngNewRouter'])
  3.   .controller('AppController', ['$router', AppController]);

  4. AppController.$routeConfig = [
  5. ];

  6. function AppController ($router) {
  7. }
复制代码

  构件component

  AngularJS 1.3之前,在配置一个路由页面时,一般会包括一个HTML模板,一个控制器和一套路由配置。路由配置中,要指定相应的HTML模板和控制器名称。在新的路由策略中,这些被构件(component)所取代,一个构件包括以下几部分:

  • 独立的目录,目录名就是构件名
  • 目录内,与目录同名的一个js文件,用它来存储模块和控制器代码
  • 目录内,与目录同名的HTML文件

  比如,像下面这样:

 
  1. home/
  2. ├── home.html
  3. └── home.js
复制代码

  单从上面这几部分来讲,可能看不出来构件的优势,但在路由配置的时候,你根本不用指定HTML文件,也不用指定控制器名字,只需要直接使用构件名——也就是目录名就行了。像这样:
 
  1. {path: '/', component: 'home'}
复制代码

  配置的代码简化了许多,而你所需要做的,就是遵循约定,使用约定来取代配置。先来看看home.js文件,它包括控制器和模块代码:

 
  1. angular.module('webApp.home', [])
  2.   .controller('HomeController', ["$router", HomeController]);

  3. function HomeController($router) {
  4.   this.AppName = 'Angular New Router示例';
  5. }
复制代码

  终于不再$scope满天飞了,控制器更符合面向对象的概念,使用了this。以前在HTML中,是直接使用控制器内的变量,再在,需要指定构件名了,如下:

 
  1. <div class="page-header">
  2.   <h3>{{home.AppName}}</h3>
  3. </div>
复制代码

  构件的js文件,需要使用<script>来导入,另外还要在app.js的主模块中,加入对构件模块的依赖,如下:
 
  1. angular.module('webApp',
  2.     ['ngNewRouter', 'webApp.home', 'webApp.articles']
  3.   )
  4.   .controller('AppController', ['$router', AppController]);
复制代码

  在上面的index.html文件中,曾经为BODY元素指定了控制器:
 
  1. <body ng-app="webApp" ng-controller="AppController as app">
  2. </body>
复制代码

  如果要使用AppController中的变量,则需要像下面这样:
 
  1. <span>{{app.AppName}}</span>
复制代码

  路由的配置

  ngRoute中的路由配置,结构还是比较复杂的——反正我每次都是从现成的路由配置文件复制过来,不然可真记不住。但新的路由模块配置,相当简单方便,其实刚刚我们已经看过一行了,再来看看完整的代码:
 
  1. AppController.$routeConfig = [
  2.   {path: '/', component: 'home'}
  3. ];
复制代码

  没错,直接设置控制器的属性就行了。还可以在控制器代码内配置:

 
  1. function AppController($router) {
  2.   $router.config([
  3.     {path: '/index', redirectTo: '/'}
  4.   ]);
  5. }
复制代码

  以前的url属性,现在叫path了,单从字面意思上讲,其实用path更准确。如果要设置某个路由直接跳转到另外一个,使用redirectTo即可:
 
  1. AppController.$routeConfig = [
  2.   {path: '/', component: 'home'},
  3.   {path: '/index', redirectTo: '/'}
  4. ];
复制代码

  当然,你也可以直接设置别名:
 
  1. {path: '/', component: 'home', as: 'home'}
复制代码

  基本上,一个路由只需要一条无需换行的代码便可以配置完成了。

  指向路由的链接

  ngRoute中是使用ui-sref来创建链接,现在增加了一个ng-link,虽然名字变了,但用法其实差不多,使用如下:
 
  1. <a ng-link='index' class="navbar-brand">Angular2的路由</a>
复制代码


  实在不知道这个viewport怎么个翻译,查了下有道,居然叫视口——好吓人的感觉。

  其实,它和以前的ui-view差不多,用法如下:
 
  1. <ng-viewport></ng-viewport>
  2. <div ng-viewport></div>
  3. <div ng-viewport="content"></div>
复制代码

  这三种都行。最后一种用于有多个构件需要加载的情况。

  路由参数

  路由参数和以前相比,没什么变化,它在路由中的配置如下:
 
  1. {path: '/articles/:id', component: 'articles'}
复制代码

  在控制器中,也还是使用$routeParams,如下:

 
  1. angular.module('webApp.articles', [])
  2.   .controller("ArticlesController", ['$routeParams', '$router', ArticlesController]);

  3. function ArticlesController($routeParams, $router){
  4.   this.id = $routeParams.id || 0;
  5. }
复制代码

  链接的格式也没有变化,仍然使用:
 
  1. <li><a ng-link='articles({id: 1})'>AngularJS常用插件与指令收集</a></li>
复制代码

  打完收功。

  by:不可能不确定

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部