Angular2路由模块简介

由于该模块已经停止针对 AngularJS 1.4.7 及以下版本的维护,请不要再在项目中使用。**由于该模块已经停止针对 AngularJS 1.4.7 及以下版本的维护,请不要再在项目中使用。

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

先放代码和DEMO。

基础代码

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


<html>
<head>
  <title>Angular New Router Testtitle>
head>
<body ng-app="webApp" ng-controller="AppController as app">
  <div class="container">
    <ng-viewport>ng-viewport>
  div>

  <script src="../lib/angular2/angular.js">script>
  <script src="../lib/angular-new-router/dist/router.es5.js">script>
  <script src="./app.js">script>
body>
html>

然后是AngularJS基础代码,app.js:

'use strict';

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

AppController.$routeConfig = [
];

function AppController ($router) {
}

构件component

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

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

比如,像下面这样:

home/
├── home.html
└── home.js

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

{path: '/', component: 'home'}

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

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

function HomeController($router) {
  this.AppName = 'Angular New Router示例';
}

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

<div class="page-header">
  <h3>{{home.AppName}}h3>
div>

构件的js文件,需要使用

你可能感兴趣的:(angular2)