ng1和ng2的部分对比
来源:互联网 发布:海岛奇兵机枪升级数据 编辑:程序博客网 时间:2024/06/10 12:58
前言:
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'],
- ng1和ng2的部分对比
- ng1和ng2的部分对比
- 从ng1到ng2的平滑升级
- 我是怎么明白vue和ng1的响应式原理的
- ng2的深入
- 封装ng2的Http请求
- ng2通用组件的概述
- JavaScript和php数组部分方法对比
- ng2搭建系统-Accordion可折叠的面板
- 大数据学习[08]:基于HDFS存储的Flume-ng1.7.0集群实践
- SLP 系列第 1 部分:基本介绍和对比分析
- Angular4的ng2-ckeditor富文本编辑框的使用
- ng2学习——简单后台demo的实现
- typescript(ng2)中使用nodejs模块的方法
- ng2 DI
- ng2功能模块
- NG2动画
- ng2 路由
- [一天几个linux命令] dirname basename 取得路径的文件名与目录名称
- SQLAlchemy 作用
- 测试内容我的第一篇
- Problem B: 时间类的错误数据处理
- 南阳理工oj23
- ng1和ng2的部分对比
- C#回顾 – 1.IO文件操作
- 36 C语言标识符、关键字和注释
- mybatis-映射器-resultMap结果集映射1
- 详解Cocos2d-X中宏CC_DLL(转)
- 判断是否为对称矩阵
- User Thread与Daemon Thread- java
- leetcode | 用拟牛顿法求一个数的平方根 | Python
- android软键盘(一)