前言：
angular2相比angular1做了革命性的改变。对于开发者来说，我们知道它框架的实现上改变极大。我们看到代码也能发现它写法上变化很大，似乎完全是另一个东西。
但是当我们真正去写下去的时候，又会发现，处处都有angular1的影子，处处都是angular1的概念。对，没错。angular始终是angular，换件“衣服”，还是angular。
最开始我第一眼看到angular2的代码的时候，是有点排斥的，怎么感觉就像是react的写法...而后，我自己亲手，写它的demo时候发现，这货还是原本的angular，一切都那么熟悉。
所以有angular1基础的同僚，完全不用排斥。下面来对比一部分两个版本的写法。
directive：
angular1 | angular2 |
ng-app | Bootstrapping |
<body ng-app="myapp"> ng1中初始化引导应用，通过ngApp属性定义应用，并通过定义ng-view属性渲染到相应dom |
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
ng2引导应用通过bootstrap类实例化，AppComponent的@Component的selector属性选择dom进行渲染
|
ng-class | ngClass |
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,shazam: isImportant}">
|
<div [ngClass]="{active: isActive}">
<div [ngClass]="{active: isActive,shazam: isImportant}">
<div [class.active]="isActive">
[class.active]指代的就是active类，最开始我一看到还以为是伪类的写法 |
ng-click | click event |
<button ng-click="vm.toggleImage()"> <button ng-click="vm.toggleImage($event)">
|
<button (click)="toggleImage()"> <button (click)="toggleImage($event)">
|
ng-controller | Component decorator |
<div ng-controller="MovieListCtrl as vm">
|
@Component({
selector: 'movie-list',
templateUrl:'app/movie-list.component.html',
styleUrls: ['app/movie-list.component.css'],
pipes: [StringSafeDatePipe]
})
|
ng-show or ng-hide | [hidden] |
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
|
<h3 [hidden]="!favoriteHero">
Your favorite hero is: {{favoriteHero}}
</h3>
只是用[hidden]属性，没有[show]属性 |
ng-href | [href] |
<a ng-href="angularDocsUrl">Angular Docs</a>
|
@RouteConfig([
{
path: '/movies',
name: 'Movies',
component: HeroesComponent
}
])
<a [href]="movies">Angular Docs</a> <a [routerLink]="['Movies']">Movies</a> [href] 对应的是路由配置里path链接， [routerLink] 对应的是路由name 。 |
ng-if | *ngIf |
<table ng-if="movies.length">
|
<table *ngIf="movies.length">
|
ng-model | ngModel |
<input ng-model="vm.favoriteHero"/> ng-model在angular1中是双向绑定指令 |
<input [(ngModel)]="favoriteHero" /> [()]在angular2中代表双向绑定, 也可以使用bindon-ngModel，推荐前者写法 |
ng-repeat | *ngFor |
<tr ng-repeat="movie in vm.movies">
|
<tr *ngFor="let movie of vm.movies"> 如果不加*，只会遍历一个项 |
ng-src | [src] |
<img ng-src="{{movie.imageurl}}">
|
<img [src]="movie.imageurl">
|
ng-style | ngStyle |
<div ng-style="{color: colorPreference}">
|
<div [ngStyle]="{color: colorPreference}">
<div [style.color]="colorPreference">
|
ng-switch | ngSwitch |
<div ng-switch="vm.favoriteHero">
<div ng-switch-when="true">
Excellent choice!
</div>
<div ng-switch-when="false">
No movie, sorry!
</div>
<div ng-switch-default>
Please enter your favorite hero.
</div>
</div>
|
<span [ngSwitch]="favoriteHero">
<p *ngSwitchWhen="true">
Excellent choice!
</p>
<p *ngSwitchWhen="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>
|
Filters / Pipes:
angular1 | angular2 |
currency | currency |
|
<td>{{movie.price | currency}}</td>
|
<td>{{133567 | currency:'USD':true}}</td> //$133,567 <td>{{133567 | currency:'RMB':true}}</td> //RMB133,567 属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
|
date | date |
<td>{{movie.releaseDate | date}}</td>
|
<td>{{movie.releaseDate | date}}</td>
|
filter | none |
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
|
由于性能原因，ng2没有filter指令，需要在component用户自己定义过滤 |
json | json |
<pre>{{movie | json}}</pre>
|
<pre>{{movie | json}}</pre>
和 JSON.stringify 功能相同 ，和 angular1 的 json 一样 |
limitTo | slice |
<tr ng-repeat="movie in movieList | limitTo:2:0">
|
<tr *ngFor="let movie of movies | slice:0:2">
|
lowercase | lowercase |
<div>{{movie.title | lowercase}}</div>
|
<td>{{movie.title | lowercase}}</td>
|
number | number |
<td>{{movie.starRating | number}}</td>
|
<td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
number 和 percent 属性值控制小数点后面的位数，只是写法让人看不懂，有谁知道为什么是这样? |
orderBy | none |
<tr ng-repeat="movie in movieList | orderBy : 'title'">
|
也是由于性能问题，ng2不再提供此指令 |
Controllers / Components：
angular1 视图的模型和方法都在控制器（Controllers）里，angular2中建立这些在组件（Components）里。
angular1 | angular2 |
currency | currency |
|
<td>{{movie.price | currency}}</td>
|
<td>{{133567 | currency:'USD':true}}</td> //$133,567 <td>{{133567 | currency:'RMB':true}}</td> //RMB133,567 属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
|
IIFE(函数表达式) | none |
|
在angular1中,我们经常定义一个立即调用函数表达式(或IIFE)在我们的控制器代码。 这让我们的控制器代码全局命名空间。 |
angular2中我们不需要担心这个问题, 因为我们使用ES 2015模块和模块处理我们的命名空间 |
Angular modules | import |
angular.module("movieHunter", ["ngRoute"]);
|
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
angular2 使用es2015 modules ，每个代码文件都是模块，可以直接导入文件模块使用 |
Controller registration | Component Decorator |
angular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
在angular1中，注册模块下的控制器，通过以上方法。 第一个参数是控制器命名，第二个参数用字符串定义所有依赖，和一个控制器引用函数 |
@Component({
selector: 'movie-list',
templateUrl:'app/movie-list.component.html',
styleUrls: ['app/movie-list.component.css'],
pipes: [StringSafeDatePipe]
})
angular2中，我们通过@Component提供元数据，如模板和样式 |
Controller function | Component class |
function MovieListCtrl(movieService) {
}
在angular1中，我们编写模型和方法在控制器函数里。 |
export class MovieListComponent {
}
在angular2中，我们创建一个组件类编写模型和方法 |
Dependency Injection | Dependency Injection |
MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) {
}
ng1中，必须要对每个依赖进行注入 |
constructor(movieService: MovieService) {
}
在ng2中，constructor注入依赖，但是需要模块被当前组件或者当前组件的父组件引入依赖。 比如，当前组件引入依赖服务， import { MovieService } from './MovieService'; |
Style Sheets：
angular1 | angular2 |
link tag | link tag |
|
<link href="styles.css" rel="stylesheet" /> |
<link href="styles.css" rel="stylesheet" /> 属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
StyleUrlsangular2 中 我们可以在@Component 中引入css， 此css默认会在当前组件形成一个独立的css作用域。 详情可以看此系列第三篇博客。“英雄之旅”见闻和小结----angular2系列（三) styleUrls: ['app/movie-list.component.css'],
|
小结：
哎呀妈呀，写完累死宝宝了... 回顾了angular1和angular2，并进行了对比，还对遗漏过的知识点进行了补充学习。收获满满~