前言：

　　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. Python之路Day15--CSS补充以及JavaScript（一）

    一.上节作业问题: 上节作业问题: 1.css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } < ...

  2. 利用http缓存数据

    通过一个简单的ajax请求来详解http的缓存技术 register.html <!DOCTYPE> <html> <head> <title>http ...

  3. JavaScript 作用域知识点梳理

    JavaScript的作用域一直以来是前端开发中难以理解的知识点,对于JavaScript的作用域主要记住几句话. 一.“JavaScript” 中无块级作用域 在   Java 或 C# 中存在块级 ...

  4. Javascript中call和apply的区别和用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别.其实就是更改对象的内部指针,即改变对象的this指向的内容.这在面向对象的js编程过程中有时是很有用的.call ...

  5. jquery 中的框架

    DWZ 国产Ajax RIA开源框架 Ninja UI 框架    提供页面插件 angela ui框架  表单布局等 Chico UI    快速页面布局  PrimeUI    w2ui   布局 ...

  6. 【开源】MQTT推送服务器——zer0MqttServer（Java编写）

    目录 说明 功能 如何使用 参考帮助 说明 重要的放前面:V1.0版本是一个非常基础的版本,除了完整的MQTT协议实现外,其他功能什么都没做. MQTT 协议是 IBM 开发的即时通讯协议,相对于 I ...

  7. Server.Transfer 和 Response.Redirect 用法区别

    在ASP.NET中,在后台传值方式目前大多都是用 Response.Redirect("页面地址") 来重定向页面的,但是现在还有一种方式也可以达到重定向页面的作用,而且在某些时刻 ...

  8. dereverberation

    Typical Approach to Dereverberation DOAs Estimating the directions of arrival of a direct source sig ...

  9. Lesson 4 An existing trip

    Text I have just received a letter from my brother,Tim. He is in Australia. He has been there for si ...

  10. 【玩转单片机系列001】 08接口双色LED显示屏驱动方式探索

    前些日子,从淘宝上购得一块08接口的双色LED显示屏(打算做个音乐频谱显示器),捣鼓了好几天,终于搞清楚了其控制原理,在这里做个总结,算是备忘吧. 1.LED显示屏的扫描方式 LED显示屏的扫描方式有 ...