2. IT
    3. ng1和ng2的部分对比

    ng1和ng2的部分对比

    xiaoxiao2021-03-26  68

    前言：

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

     

    转载请注明原文地址: https://ju.6miu.com/read-663999.html

    技术

    最新回复(0)