前言：
angular2相比angular1做了革命性的改变。对于开发者来说，我们知道它框架的实现上改变极大。我们看到代码也能发现它写法上变化很大，似乎完全是另一个东西。
但是当我们真正去写下去的时候，又会发现，处处都有angular1的影子，处处都是angular1的概念。对，没错。angular始终是angular，换件“衣服”，还是angular。
最开始我第一眼看到angular2的代码的时候，是有点排斥的，怎么感觉就像是react的写法...而后，我自己亲手，写它的demo时候发现，这货还是原本的angular，一切都那么熟悉。
所以有angular1基础的同僚，完全不用排斥。下面来对比一部分两个版本的写法。
directive：
<table class="border-none" style="height: 247px; border-style: solid; width: 1258px; border-width: 3px; background-color: #ffffff;" border="0"> |
<tr>
<td style="text-align: center;">
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进行渲染
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-class
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">ngClass
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
">
">
?[class.active]指代的就是active类，最开始我一看到还以为是伪类的写法
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-controller
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">Component decorator
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>?
<div class="cnblogs_code">
'movie-list''app/movie-list.component.html''app/movie-list.component.css'
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-show or ng-hide
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">[hidden]?
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>?
<div class="cnblogs_code">
只是用[hidden]属性，没有[show]属性
</td>
<td>?
<div class="cnblogs_code">
'/movies''Movies'
[href] 对应的是路由配置里path链接， [routerLink] 对应的是路由name 。
="movies.length">
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-model
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">ngModel
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
ng-model在angular1中是双向绑定指令
[()]在angular2中代表双向绑定,也可以使用bindon-ngModel，推荐前者写法
</td>
<td>
<div class="cnblogs_code">
如果不加*，只会遍历一个项
![]()
</td>
<td>?
<div class="cnblogs_code">
![]()
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-style
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">ngStyle
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">ng-switch
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">ngSwitch
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
="
">
-when="true">!
-when="false">!
->
</td>
<td>?
<div class="cnblogs_code">
">
!
!
</td>
</tr>
Filters / Pipes:
<table class="border-none" style="height: 247px; border-style: solid; width: 1258px; border-width: 3px; background-color: #ffffff;" border="0">
<tr>
<td style="text-align: center;">
</td>
<td>
<div class="cnblogs_code">
属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">date
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">date
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">filter
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">none
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>
由于性能原因，ng2没有filter指令，需要在component用户自己定义过滤
{{movie | json}}
</td>
<td>?
<div class="cnblogs_code">
{{movie | json}}
和 JSON.stringify 功能相同 ，和 angular1 的 json 一样
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">lowercase
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">lowercase
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
{{movie.title | lowercase}}
</td>
<td>?
<div class="cnblogs_code">
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">number
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">number
</td>
</tr>
<tr valign="top">
<td>?
<div class="cnblogs_code">
</td>
<td>?
<div class="cnblogs_code">
number 和 percent 属性值控制小数点后面的位数，只是写法让人看不懂，有谁知道为什么是这样?
</td>
<td>
也是由于性能问题，ng2不再提供此指令
?
Controllers / Components：
? angular1 视图的模型和方法都在控制器（Controllers）里，angular2中建立这些在组件（Components）里。
<table class="border-none" style="height: 247px; border-style: solid; width: 1258px; border-width: 3px; background-color: #ffffff;" border="0">
<tr>
<td style="text-align: center;">
</td>
<td>
<div class="cnblogs_code">
属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
</td>
</tr>
<tr class="title-2">
<td>
<h2 id="ng-app" style="text-align: left;"><span style="color: #339966;">IIFE(函数表达式)
</td>
<td>
<h2 id="bootstrapping" style="text-align: left;"><span style="color: #339966;">none
</td>
</tr>
<tr valign="top">
<td>
?
?
angular.module("movieHunter",["ngRoute"]);
</td>
<td>?
<div class="cnblogs_code">
import { Component } from '@angular/core''@angular/router-deprecated';
angular2 使用es2015 modules ，每个代码文件都是模块，可以直接导入文件模块使用
"movieHunter""MovieListCtrl""movieService"
在angular1中，注册模块下的控制器，通过以上方法。
第一个参数是控制器命名，第二个参数用字符串定义所有依赖，和一个控制器引用函数
'movie-list'
?angular2中，我们通过@Component提供元数据，如模板和样式
在angular1中，我们编写模型和方法在控制器函数里。
在angular2中，我们创建一个组件类编写模型和方法
MovieListCtrl.$inject = ['MovieService'
ng1中，必须要对每个依赖进行注入
在ng2中，constructor注入依赖，但是需要模块被当前组件或者当前组件的父组件引入依赖。
比如，当前组件引入依赖服务， import { MovieService } from './MovieService';
Style Sheets：
<table class="border-none" style="height: 247px; border-style: solid; width: 1258px; border-width: 3px; background-color: #ffffff;" border="0">
<tr>
<td style="text-align: center;">
属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示
<h3 id="styleurls">StyleUrls
angular2 中 我们可以在@Component 中引入css，
此css默认会在当前组件形成一个独立的css作用域。
详情可以看此系列第三篇博客。
styleUrls: ['app/movie-list.component.css'],
</td>
</tr>
哎呀妈呀，写完累死宝宝了... 回顾了angular1和angular2，并进行了对比，还对遗漏过的知识点进行了补充学习。收获满满~
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
