首页 > 网站 > WEB开发 > 正文

ng1和ng2的部分对比

2024-04-27 15:07:33
字体:
来源:转载
供稿:网友

前言:

  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'],

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表