前言：

　　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-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>
<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，并进行了对比，还对遗漏过的知识点进行了补充学习。收获满满~

ng1和ng2的部分对比----angular2系列（四)的更多相关文章

  1. angular2系列教程（十）两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  2. angular2系列教程（一）hello world

    今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...

  3. RX系列四 | RxAndroid | 加载图片 | 提交表单

    RX系列四 | RxAndroid | 加载图片 | 提交表单 说实话,学RxJava就是为了我们在Android中运用的更加顺手一点,也就是RxAndroid,我们还是先一步步来,学会怎么去用的比较 ...

  4. 网络结构解读之inception系列四：Inception V3

    网络结构解读之inception系列四:Inception V3   Inception V3根据前面两篇结构的经验和新设计的结构的实验,总结了一套可借鉴的网络结构设计的原则.理解这些原则的背后隐藏的 ...

  5. Paddle Graph Learning (PGL)图学习之图游走类模型[系列四]

    Paddle Graph Learning (PGL)图学习之图游走类模型[系列四] 更多详情参考:Paddle Graph Learning 图学习之图游走类模型[系列四] https://aist ...

  6. 前端构建大法 Gulp 系列 (四)：gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  7. Netty4.x中文教程系列(四) 对象传输

    Netty4.x中文教程系列(四)  对象传输 我们在使用netty的过程中肯定会遇到传输对象的情况,Netty4通过ObjectEncoder和ObjectDecoder来支持. 首先我们定义一个U ...

  8. S5PV210开发系列四_uCGUI的移植

    S5PV210开发系列四 uCGUI的移植 象棋小子          1048272975 GUI(图形用户界面)极大地方便了非专业用户的使用,用户无需记忆大量的命令,取而代之的是能够通过窗体.菜单 ...

  9. WCF编程系列(四)配置文件

    WCF编程系列(四)配置文件   .NET应用程序的配置文件 前述示例中Host项目中的App.config以及Client项目中的App.config称为应用程序配置文件,通过该文件配置可控制程序的 ...

随机推荐

  1. 文件过滤驱动框架Minispy解析一

    因工作需要,研究minispy文件过滤框架,上图为我整理出的其内核部分代码的逻辑.

  2. 安卓工具箱：color of Style

    <?xml version="1.0" encoding="utf-8"?> <resources> <color name=&q ...

  3. matlab 采样函数

    dyaddown 功能:对时间序列进行二元采样,每隔一个元素提取一个元素,得到一个降采样时间序列. 格式: 1.y = dyaddown(x, EVENODD) 当EVENODD=0时,从x中第二个元 ...

  4. shell简单用法笔记（一）

    一.linux中主要用的bash shell:查看linux系统中支持的shell种类可用: vim /etc/shell 执行shel脚步的方式: 1.赋予脚步可执行权限,使用相对或绝对路径调用该脚 ...

  5. ASP.NET Aries 开源开发框架：开发指南（一）

    前言: 上周开源了Aries开发框架后,好多朋友都Download了源码,在运行过程里,有一些共性的问题会问到. 所以本篇打算写一下简单的开发指南,照顾一下不是太看的懂源码的同学,同时也会讲解一下框架 ...

  6. ViewBag 找不到编译动态表达式所需的一种或多种类型，是否缺少引用？

    症状: 类似上面的警告提示,运行程序不会有任何错误,但若干地方都提示警告,并且明明dll的引用都是正确的. 解决方案: 删除:C:\Users\{your computer name}\AppData ...

  7. 剑指Offer面试题：12.在O(1)时间删除链表结点

    一.题目:在O(1)时间删除链表结点 题目:给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该结点. 原文采用的是C/C++,这里采用C#,节点定义如下: public class ...

  8. ASP.Net MVC开发基础学习笔记：一、走向MVC模式

    一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...

  9. SQL Server 权限管理

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/权限控制/管理/分配/登入名/数据库用户/角色 概述 对数据库系统而言,保证数据的安全性永远都是最重要的问题之一.一个好的数据库环 ...

  10. ASP.NET MVC 5 - 将数据从控制器传递给视图

    在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果 ...