Loadding..
So sánh điểm khác nhau giữa Angular 1 và Angular 2

So sánh điểm khác nhau giữa Angular 1 và Angular 2

So sánh điểm khác nhau giữa Angular 1 và Angular 2

-Được phát triển mới hoàn toàn, ko phải là bản nâng cấp cho angularjs 1.x

-Hiện tại đang là phiên bản beta: 2.0.0-beta.9/ 10-Mar-2016 00:29

-Angularjs 1.x ko hỗ trợ mobile, angularjs 2.x thì có.

-Angularjs 1.x hỗ trợ ES5, ES6, Dart, Angularjs 2.x có thêm Typescript.

-Angularjs 1.x dễ cài đặt chỉ cần chèn thư viện và chạy. ở Angularjs 2.x có nhiều thư viện cần phải thiết lập phức tạp hơn để chạy đc.

-Angular CLI hỗ trợ tạo ứng dụng Angularjs 2.x

-Angular 2.x không còn controllers and $scope

-Controller:

Angular 1.x Controller

var myApp = angular
   .module("myModule", [])
   .controller("productController", function($scope) {
     var prods = { name: "Prod1", quantity: 1 };
     $scope.products = prods;
});

Angular 2 Components using TypeScript

import{ Component } from 'angular2/core';
@Component({
  selector: 'prodsdata',
  template: `
    <h3>{{prods.name}}</h3> `
})
exportclassProductComponent {
  prods = {  name: 'Prod1', quantity: 1 };
}

 

-Angular 1.x có 2 cách sủ dụng bootstrap. Một là sửa dụng thuộc tính ng-app, hai là sử dụng code.

angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
});

Trong Angular 2, không còn sửa dụng ng-app. Chỉ có thể sử dụng bootstrap qua code.

import { bootstrap } from 'angular2/platform/browser';
import { ProductComponent } from './product.component';
bootstrap(ProductComponent);

 

Structural directives: cú pháp thay đổi đó là ng-repeat được thay thế bằng *ngFor.
Angular 1.x structural directives

<ul>
   <li ng-repeat="technology in technologies">
     {{technology.name}}
   </li>
</ul>
<div ng-if="technologies.length">
   <h3>You have {{technologies.length}} technologies.</h3>
</div>

Angular 2.x structural directives

<ul>
  <li *ngFor="let technology of technologies">
    {{technology.name}}
  </li>
</ul>
<div *ngIf="technologies.length">
  <h3>You have {{technologies.length}} technologies.</h3>
</div>

 

-Angular 2, các biến local đều có sửa dụng tiền tố là ký tự (#) trong vòng lặp *ngFor.

-Angular 2 sử dụng cú pháp camelCase. Ví dụ, ng-class bây giờ là ngClass và ng-model bây giờ là ngModel.

-Thay đổi về HTML DOM. Angular 1.x là  ng-href, ng-src, ng-showng-hide ... Angular 2.x sẽ là href, src, hidden. Các sự viện cũng thay đổi ng-click and ng-blur => (click), (blur).

Angular 1.x

<button ng-click="doSomething()">

Angular 2.x

<button (click)="doSomething()">

 

– Angular 1.x, ng-bind, Angular 2.x được thay thế bằng thuộc tính trong ngoặc vuông [property]

Angular 1.x, data binding

<input ng-bind="technology.name"></input>

Angular 2,  data binding

<input [value]="technology.name"></input>
<div [style.color]="color">Some text...</div>

 

-Angular 1.x sử dụng ng-model , nhưng Angular 2 được thay thế bằng [(ngModel)].
Angular 1.x

<input ng-model="technology.name"></input>

Angular 2x

<input [(ngModel)]="technology.name"></input>

 

-Angular 1.x có thể định nghĩa service theo 5 cách: Factory, Service, Provider, Constant, Values. Còn Angular 2.x có một class duy nhất định nghĩa service.

Dependency Injection trong Angularjs 2.x được thông qua bởi constructor.

– Angular 1.x, sử dụng $routeProvider.when() để cấu hình route. Angular 2, dùng @RouteConfig{(...}). ng-view present in Angular 1.x is replaced with <router-outlet>.

-Angular 2.x  có performance tốt hơn Angular 1.x

-Cài đặt project angular 2.x bằng angular CLI:

npm install angular-cli -g
npm cache clean
ng new application-name
ng new AngularCLIDemoApp
ng serve
ng build
ng test
ng generate class Demo
ng g component demo-component
ng g service demo-service
ng g directive demo-directive
ng g pipe demo-pipe
ng g route test
ng g route demo
ng g route demo --inline-template --inline-style
ng lint
ng format

 

— Update 15-09-2016

Angularjs 2 đã ra phiên bản chính thức.

 

-Tổng kết:

Angular 2.x vẫn trong giai đoạn beta, vẫn cần phải đợi chính thức từ nhóm phát triển. Hiện tại Angular 2.x không tương thích với Angular 1.x.

Print

Chia sẻ điều này với mọi người !

Tags:
Image

enqtran

I'm enqtran - A coder and blogger :)

Clef two-factor authentication