前言：

　　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. ng1和ng2的部分对比

    前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...

  2. Go语言 和 Java语言对比理解系列四：门闩（WaitGroup/CountDownLatch）

    文章目录 Java中的门闩最基础的实现方式就是CountDownLatch,可以参考之前的文章<使用三个线程,按顺序打印X,Y,Z,连续打印10次>: 而Go中可以通过sync.WaitG ...

  3. 时隔500天后，对比Excel系列又一新书发布

    时隔500天后,对比Excel系列的又一本新书发布,本来这本书应该早出现在大家面前了,因为最近一年工作有些忙,所以一直拖到了现在.新书就是下面这本<对比Excel,轻松学习Python报表自动化 ...

  4. 大咖微课 | 直面Angular2系列课第二期开讲

    1.背景介绍:Angular1.x与Angular2 近年来,Web 开发技术的发展日新月异,各种框架层出不穷.在这样的大背景之下,2010年10月,Google 首次发布了自己的 Web 开发框架, ...

  5. 报表工具对比选型系列用例——过程计算

    我们知道,报表呈现的数据常常并不是直接从数据库(源)取出来的数据,而还要进行一些运算,报表工具通常也会提供一定的运算能力(如过滤.分组等)以应对这种需求.但是,情况复杂时,报表数据集上的运算可能要多个 ...

  6. 自监督对比学习系列论文（二）：有引导对比学习--SCCL，SwAV，PCL，SupervisedCon

    自监督对比学习  本篇承接前一篇自监督对比学习的介绍自监督对比学习系列论文(一):无引导对比学习–MOCO,SimCLR,这次主要关注于包含先验指导的对比学习,这一指导更进一步的可以区分为聚类指导以及 ...

  7. [常微分方程的数值解法系列四] 中值法

    中值法 简介 具体步骤 截断误差 例子 在惯性导航以及VIO等实际问题中利用IMU求解位姿需要对IMU测量值进行积分得到需要的位置和姿态,其中主要就是求解微分方程.但之前求解微分方程的解析方法主要是应 ...

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

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

  9. 机器学习、数据科学与金融行业 系列四：智能投顾、量化投资与机器学习

    机器学习.数据科学与金融行业 系列四:智能投顾.量化投资与机器学习 难点不在于没有新思维,而在于无法摆脱陈旧思想的束缚.-- 巴菲特 历史不会重演,但却有韵律.-- 马克吐温 我可以计算出天体的运动和 ...

最新文章

  1. BAT数据披露：缺人！110万AI人才缺口，两者矛盾，凉凉了！
  2. 优化网站的TDK要注意哪些问题？
  3. pct_change()
  4. 七桥问题属于计算机科学方法论中的,计算机科学与技术方法论-计算学科中的科学问题ppt...
  5. C和指针之动态内存分配（读取范围在1和标准输入读取的size之前每个数据出现的次数）
  6. input发送a.jax_JAX-RS 2.0：服务器端处理管道
  7. mysql c api example_The MySQL C API 编程实例
  8. JavaScript onmouseup 事件
  9. Linux 6.8 源码安装MySQL8.0
  10. 基于OpencCV的彩色图像的分离与合并
  11. html ios导航栏下拉菜单,Flutter -- iOS导航栏TabBar
  12. android 导航抽屉_Android导航抽屉示例教程
  13. global mapper提取等高线
  14. 洛谷—— P1069 细胞分裂
  15. hypervisor详解
  16. mysql字段掩码_什么叫掩码
  17. vue引入腾讯地图,去除水印
  18. powershell:调用7z,haozip解压缩文件
  19. windows7安装打印机提示“本地打印后台处理程序服务没有运行”
  20. Window_MySQL初始化(重置)数据库

热门文章

  1. javascript自定义cookie
  2. Backbone的写类方式
  3. ASP.NET控件Repeater遍历
  4. OCS2007R2部署之一软硬件环境准备
  5. scala报错20/08/31 23:48:40 WARN TaskSetManager: Lost task 1.0 in stage 0.0 (TID 1, 192.168.28.94, exec
  6. 华硕fx80装linux,华硕fx80【解决思路】
  7. Python中相见恨晚的技巧
  8. linux虚拟网卡名不是eth0,linux不能启动虚拟网卡eth0
  9. 简单介绍Tomcat中catalina.out 和 catalina.log的区别和用途
  10. 电子科学与技术的就业方向