前言：
angular2相比angular1做了革命性的改变。对于开发者来说，我们知道它框架的实现上改变极大。我们看到代码也能发现它写法上变化很大，似乎完全是另一个东西。
但是当我们真正去写下去的时候，又会发现，处处都有angular1的影子，处处都是angular1的概念。对，没错。angular始终是angular，换件“衣服”，还是angular。
最开始我第一眼看到angular2的代码的时候，是有点排斥的，怎么感觉就像是react的写法...而后，我自己亲手，写它的demo时候发现，这货还是原本的angular，一切都那么熟悉。
所以有angular1基础的同僚，完全不用排斥。下面来对比一部分两个版本的写法。
directive：
angular1
|
angular2
|
ng-app
|
Bootstrapping
|
|
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
|
{active: isActive,shazam: isImportant}">
{active: isActive,shazam: isImportant}">
[class.active]指代的就是active类，最开始我一看到还以为是伪类的写法
|
ng-click
|
click event
|
|
|
|
ng-controller
|
Component decorator
|
|
@Component({
selector: 'movie-list',
templateUrl:'app/movie-list.component.html',
styleUrls: ['app/movie-list.component.css'],
pipes: [StringSafeDatePipe]
})
|
ng-show or ng-hide
|
[hidden]
|
Your favorite hero is: {{vm.favoriteHero}}
|
Your favorite hero is: {{favoriteHero}}
只是用[hidden]属性，没有[show]属性
|
ng-href
|
[href]
|
Angular Docs
|
@RouteConfig([
{
path: '/movies',
name: 'Movies',
component: HeroesComponent
}
])
Angular Docs
Movies
[href] 对应的是路由配置里path链接， [routerLink] 对应的是路由name 。
|
ng-if
|
*ngIf
|
if="movies.length">
如果不加*，只会遍历一个项
ng-model
|
ngModel
|
|
ng-model在angular1中是双向绑定指令
|
bindon-ngModel="favoriteHero">
[()]在angular2中代表双向绑定, 也可以使用bindon-ngModel，推荐前者写法
|
ng-repeat
|
*ngFor
|
|
|
|
|
ng-src
|
[src]
|
![]()
|
![]()
|
ng-style
|
ngStyle
|
|
|
ng-switch
|
ngSwitch
|
switch=" vm.favoriteHero">
switch-when="true">
Excellent choice!
switch-when="false">
No movie, sorry!
switch-default>
Please enter your favorite hero.
|
favoriteHero">
Excellent choice!
No movie, sorry!
Please enter your favorite hero.
|
Filters / Pipes:
//$133,567 //RMB133,567属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
number 和 percent 属性值控制小数点后面的位数，只是写法让人看不懂，有谁知道为什么是这样?
angular1
|
angular2
|
currency
|
currency
|
|
| {{movie.price | currency}} |
| {{133567 | currency:'USD':true}} |
{{133567 | currency:'RMB':true}} |
date
|
date
|
|
| {{movie.releaseDate | date}} |
| {{movie.releaseDate | date}} |
filter
|
none
|
|
|
|
由于性能原因，ng2没有filter指令，需要在component用户自己定义过滤
|
json
|
json
|
{{movie | json}}
|
{{movie | json}}
和 JSON.stringify 功能相同 ，和 angular1 的 json 一样
|
limitTo
|
slice
|
|
|
|
|
lowercase
|
lowercase
|
{{movie.title | lowercase}}
|
| {{movie.title | lowercase}} |
number
|
number
|
|
| {{movie.starRating | number}} |
| {{movie.starRating | number}} |
{{movie.starRating | number:'1.1-2'}} |
{{movie.approvalRating | percent: '1.0-2'}} | {{movie.approvalRating | percent:'4.3-5'}} |
orderBy
|
none
|
|
|
|
也是由于性能问题，ng2不再提供此指令
|
Controllers / Components：
angular1 视图的模型和方法都在控制器（Controllers）里，angular2中建立这些在组件（Components）里。
//$133,567 //RMB133,567属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
angular1
|
angular2
|
currency
|
currency
|
|
| {{movie.price | currency}} |
| {{133567 | currency:'USD':true}} |
{{133567 | currency:'RMB':true}} |
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
|
|
|
属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
StyleUrls
angular2 中 我们可以在@Component 中引入css，
此css默认会在当前组件形成一个独立的css作用域。
详情可以看此系列第三篇博客。“英雄之旅”见闻和小结----angular2系列（三)
styleUrls: ['app/movie-list.component.css'],
|
小结：
哎呀妈呀，写完累死宝宝了... 回顾了angular1和angular2，并进行了对比，还对遗漏过的知识点进行了补充学习。收获满满~
| |