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

時間  2019-11-15
標籤 ng1 ng2 部分 對比 angular2 angular 系列 欄目 AngularJS 简体版
原文   原文鏈接

前言：

　　angular2相比angular1作了革命性的改變。對於開發者來講，咱們知道它框架的實現上改變極大。咱們看到代碼也能發現它寫法上變化很大，彷佛徹底是另外一個東西。css

可是當咱們真正去寫下去的時候，又會發現，到處都有angular1的影子，到處都是angular1的概念。對，沒錯。angular始終是angular，換件「衣服」，仍是angular。html

最開始我第一眼看到angular2的代碼的時候，是有點排斥的，怎麼感受就像是react的寫法...然後，我本身親手，寫它的demo時候發現，這貨仍是本來的angular，一切都那麼熟悉。react

因此有angular1基礎的同僚，徹底不用排斥。下面來對比一部分兩個版本的寫法。json

 

directive：

 

angular1

angular2

ng-app

Bootstrapping

 
<body ng-app="myapp">

ng1中初始化引導應用，經過ngApp屬性定義應用，並經過定義ng-view屬性渲染到相應dombootstrap

 
import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component'; bootstrap(AppComponent);

ng2引導應用經過bootstrap類實例化，AppComponent的@Component的selector屬性選擇dom進行渲染angular2

 

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類，最開始我一看到還覺得是僞類的寫法app

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 。dom

ng-if

*ngIf
  
<table ng-if="movies.length">

 

   
<table *ngIf="movies.length">

 

ng-model

ngModel
  
<input ng-model="vm.favoriteHero"/>

ng-model在angular1中是雙向綁定指令ide

   
<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，並進行了對比，還對遺漏過的知識點進行了補充學習。收穫滿滿~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程