ng1和ng2的部分对比----angular2系列,四

  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 ng-class="{true: 'active',false: 'isImportant'}[isActive]
<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" />
<input bindon-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->
<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>
<td>{{movie.approvalRating | percent:'4.3-5'}}</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这样写,否则不显示

StyleUrls

angular2 中 我们可以在@Component 中引入css,

此css默认会在当前组件形成一个独立的css作用域。

详情可以看此系列第三篇博客。“英雄之旅”见闻和小结----angular2系列(三)

styleUrls: ['app/movie-list.component.css'],

小结:

  哎呀妈呀,写完累死宝宝了... 回顾了angular1和angular2,并进行了对比,还对遗漏过的知识点进行了补充学习。收获满满~