Angular 2 là gì
Dưới đây là các tính năng nổi bật trong angular 2
Two-way data bindingĐây là 1 trong những tính năng tuyệt với nhất trong angular 2. Dữ liệu được binding một cách tự động và nhanh chóng, những thay đổi trong view sẽ được tự động cập nhật vào trong các component class.Powerful routing supportAngular 2 hỗ trợ mạnh mẽ các routing thông qua cách tải trang không đồng bộ trên cùng 1 trang cho phép chúng ta tạo ra 1 single page application.Expressive HTMLAngular 2 cho phép chúng ta dùng các cấu trúc lập trình như câu lệnh if, vòng lặp for, .. để render và kiểm soát các trang HTML.Modular by designAngular 2 được thiết kế theo hướng modul hóa để tổ chức và quản lý code 1 cách tốt hơn.Built in back end supportAngular 2 được xây dựng để hỗ trợ việc giao tiếp với back-end servers và thực thi bất kỳ business logic hoặc lấy dữ liệu.Active communityAngular 2 được hỗ trợ bởi google và có 1 cộng đồng đông đảo sẵn sàng hỗ trợ và giải đáp bất cứ câu hỏi nào của bạn.III. Sự khác biệt chính giữa angular 1 và angular 2
Tóm Tắt
4. Data Bindings
1. Hỗ trợ ES6
Angular 2 hoàn toàn được viết bằng Typescript. Điều đó đồng nghĩa là nó hỗ trợ cho ES6 Modules, class frameworks, ..
Bạn đang xem: Angular 2 là gì
Bạn đang xem: Angular 2 là gì
2. Components là 1 controller mới
Trong angular 1 chúng ta có controllers còn trong angular 2 thì controller được thay thế bởi components.Controller và view trong angular 1 được định nghĩa như sau.
//Viewbody ng-controller=’appController’> h1>vm.messageh1>/body>//Controllerangular.module(‘app’).controller(‘appController’,appcontroller) { message=’Hello Angular2’;}Còn trong angular 2 thì chúng ta sử dụng component.
import { Component } from “Component({ selector: “app”, template: “{{message}} “})export class AppComponent { message: string=’Hello Angular2’;}Trong angular 2, 1 component đại diện cho 1 phần tử UI. Chúng ta có thể có nhiều component trong 1 single web page. Các component là độc lập với nhau và quản lý 1 vùng của trang. Component có thể có component con và component cha.
Xem thêm: (Back Taxes) Là Gì? Hiểu Về Thuế Bị Truy Thu Thuế Tiếng Anh Là Gì ?
3. Directives
Angular 1 có rất nhiều directives. Và một vài directives được sử dụng nhiều nhất là ng-repeat và ng-if.
ul> li ng-repeat =customer in vm.customers> {{customer.name}} /li>/ul> div ng-if=”vm.isVIP”> h3> VIP Customer /h3>/div>Trong angular 2 cũng có directives nhưng với 1 cú pháp khác. Nó có 1 dấu * trước tên của directives.
Xem thêm: Thông Tin Quy Hoạch Thành Phố Quy Nhơn, Quy Nhơn Cập Nhật Liên Tục
ul> li *ngFor =#customer of customers> {{customer.name}} /li>/ul> div *ngIf=”vm.isVIP”> h3> VIP Customer /h3>/div>Trong angular 2 ng-style, ng-src , ng-href đã biến mất và chúng được thay thế bởi property binding.Việc tạo 1 custom directives là cực kỳ đơn giản trong angular 2
Directive({ selector: ““})class MyDirective {}
4. Data Bindings
4.1 Interpolation
//Angular 1h3> {{vm.customer.Name}}/h3> //Angular 2h3> {{customer.Name}}/h3>
4.2 One way Binding
//Angular 1h3> ng-bind=vm.customer.name>/h3> //Angular 2h3 =”customer.name” >/h3>Trong angular 2, chúng ta có thể bind đến bất cứ thuộc tính nào của phần tử html
4.3 Event Binding
//Angular 1button ng-click=”vm.save()”>Savebutton> //Angular 2button (click)=”save()”>Savebutton>Trong angular 1 dùng directive ngClick để bind 1 sự kiện còn trong angular 2 directive ngClick đã được loại bỏ và chúng ta có thể bind trực tiếp đến DOM events.
4.4 Two- way binding
//Angular 1input ng-model=”vm.customer.name”> //Angular 2input =”customer.name”>
5. Filters được đổi tên thành Pipes
Trong angular 1, chúng ta dùng Filters như sau
td>{{vn.customer.name | uppercase}}/td>Còn trong angular 2 chúng ta cũng dùng 1 cú pháp tương tự nhưng tên chúng là pipes
td>{{customer.name | uppercase}}/td>
6. Platform specific Bootstrap
Trong angular 1 thì chúng ta dùng directive ng-app trong HTML
body ng-app=’app’>Còn trong angular 2 thì nó sẽ phức tạp hơn 1 chút
import { platformBrowserDynamic } from “angular/platform-browser-dynamic”;import {AppModule } from “./app.module”; platformBrowserDynamic().bootstrapModule(AppModule);
7. Services
Trong angular 1 có Services, Factories , Providers, Constants và values và chúng ta injected vào trong controller để có thể dùng, còn trong angular 2 tất cả mọi thứ trên đều được gộp vào Service.Class
Hy vọng qua bài viết này sẽ giúp các bạn có 1 cái nhìn tổng quan về angular 2. ThankyouLink tham khảo : angular2
