Angular 2 là gì

Share:
I. Angular 2 là gì ?Angular 2 là 1 trong framework UI nhằm xây dựng áp dụng web bên trên desktop cùng mobile.Nó được xây dựng dựa vào Javascript. Bạn có thể dùng nó để sản xuất 1 áp dụng client side thú vị dùng HTML, CSS cùng Javascript.Angular 2 có rất nhiều đổi mới so với Angular 1 để tiện lợi học và cách tân và phát triển các ứng dụng quy mô doanh nghiệp.Với angular 2 thì bọn họ dễ dàng xây dựng được 1 ứng dụng rất có thể dễ dàng mở rộng, bảo trì, kiểm tra và chuẩn chỉnh hóa áp dụng của mình.II. Những tính năng trong angular 2

Dưới đó là các tính năng trông rất nổi bật trong angular 2

Two-way data bindingĐây là 1 trong số những tính năng hay với tuyệt nhất trong angular 2. Tài liệu được binding một cách auto và cấp tốc chóng, những biến hóa trong view sẽ được tự động hóa cập nhật vào trong số component class.Powerful routing supportAngular 2 cung ứng mạnh mẽ các routing thông qua cách tải trang không nhất quán trên thuộc 1 trang mang lại phép bọn họ tạo ra 1 single page application.Expressive HTMLAngular 2 đến phép họ 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ế với theo hướng modul hóa để tổ chức triển khai và làm chủ code 1 cách tốt hơn.Built in back end supportAngular 2 được thiết kế để cung cấp việc giao tiếp với back-end servers và thực thi ngẫu nhiên business súc tích hoặc mang dữ liệu.Active communityAngular 2 được hỗ trợ bởi google và có 1 cộng đồng đông đảo sẵn sàng cung cấp và giải đáp bất cứ câu hỏi như thế nào của bạn.III. Sự khác hoàn toàn chính giữa angular 1 cùng angular 2

1. Hỗ trợ ES6

Angular 2 trọn vẹn được viết bằng Typescript. Điều đó đồng nghĩa tương quan là nó cung cấp cho ES6 Modules, class frameworks, ..

Bạn đang đọc: Angular 2 là gì

2. Components là một controller mới

Trong angular 1 bọn họ có controllers còn vào angular 2 thì controller được sửa chữa bởi components.Controller với view trong angular 1 được khái niệm 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 thay mặt đại diện cho một phần tử UI. Bạn có thể có những component trong một single web page. Các component là độc lập với nhau và cai quản 1 vùng của trang. Component rất có thể có component con và component cha.

Xem thêm: Nấu Ăn Cuối Tuần: Cách Rang Hạt Dẻ Rừng Đà Lạt, Cách Rang Hạt Dẻ Thơm Ngon Đơn Giản

3. Directives

Angular 1 có khá nhiều directives. Cùng một vài directives được thực hiện nhiều duy 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 đều có directives tuy nhiên với 1 cú pháp khác. Nó có 1 dấu * trước tên của directives.

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 đã mất tích và bọn chúng được thay thế bởi property binding.Việc tạo nên 1 custom directives là cực kì đơn giản vào 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, bạn có thể bind đến bất kể thuộc tính nào của bộ phận html

4.3 event Binding

//Angular 1button ng-click=”vm.save()”>Savebutton> //Angular 2button (click)=”save()”>Savebutton>Trong angular 1 sử dụng directive ngClick nhằm bind 1 sự kiện còn trong angular 2 directive ngClick đang được sa thải và bạn có thể bind trực tiếp đến DOM events.

4.4 Two- way binding

//Angular 1input ng-model=”vm.customer.name”> //Angular 2input <(ng-model)>=”customer.name”>

5. Filters được thay tên thành Pipes

Trong angular 1, họ dùng Filters như sau

td> 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 bọn chúng là pipes

td> 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 vào 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ới values và họ injected vào vào controller để có thể dùng, còn vào angular 2 toàn bộ mọi trang bị trên phần lớn được gộp vào Service.Class

Hy vọng qua nội dung bài viết này vẫn giúp các bạn có 1 tầm nhìn tổng quan lại về angular 2. ThankyouLink tham khảo : angular2

Bài viết liên quan