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

Angularjs 2019-02-07

前言：

　　angular2相比angular1做了革命性的改变。对于开发者来说，我们知道它框架的实现上改变极大。我们看到代码也能发现它写法上变化很大，似乎完全是另一个东西。

但是当我们真正去写下去的时候，又会发现，处处都有angular1的影子，处处都是angular1的概念。对，没错。angular始终是angular，换件“衣服”，还是angular。

最开始我第一眼看到angular2的代码的时候，是有点排斥的，怎么感觉就像是react的写法...而后，我自己亲手，写它的demo时候发现，这货还是原本的angular，一切都那么熟悉。

所以有angular1基础的同僚，完全不用排斥。下面来对比一部分两个版本的写法。

directive：

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:

</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）里。

</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：

属性值不支持￥，$等符号，必须按照USD，RMB这样写，否则不显示

<h3 id="styleurls">StyleUrls

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

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

详情可以看此系列第三篇博客。

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

</td>
</tr>

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

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...

AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例

AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是...

AngularJS进阶(三十七)IE浏览器兼容性后续

IE浏览器兼容性后续前言继续尝试解决IE浏览器兼容性问题，...

AngularJS进阶(五)Angular实现下拉菜单多选

Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：h...

AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能

在AngularJS应用中集成科大讯飞语音输入功能前言根据项目...

AngularJS进阶(三十四)Angular数据更新不及时问题探讨

Angular数据更新不及时问题探讨前言在修复控制角标正确变...

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

前言：

directive：

Filters / Pipes:

Controllers / Components：

相关文章