Lời Nói Đầu.

Là một trong những framework Javascript giúp developer phát triển các ứng dụng web có tính tương tác cao, nhanh Angular 1 đã và đang được ứng dụng rộng rãi vào nhiều ứng dụng. Tuy nhiên với nhiều khái niệm và các công nghệ mới về javascript được đề xuất trong những năm gần đây có về Angular 1 đang bị chững lại. Để giải quyết vần đề này AngularJs 2 ra đời để cập nhật Angular 1 các khái niệm mới nhằm đơn giản và tăng hiệu quả cho framework Javascript này.

Giới Thiệu Về AngularJs 2.

AngularJs 2 là một framework Javascript mã nguồn mở được dùng để xây dựng các ứng dụng web bằng HTML và Javascript. Ngoài ra nó còn được dùng để phát triển các ứng dụng cho các thiết bị di động. AngularJs 2 được đưa ra vào tháng 3 năm 2015 nhằm thay thế AngularJs 1 với các khái niệm mới nhằm đơn giản hóa và tối ưu cho quá trình phát triển sử dụng framework này. Một số lợi ích của AngularJs 2:

• Nhanh hơn AngularJs 1
• Hỗ trợ đa nền tảng và đa trình duyệt.
• Cấu trúc code được tổ chức đơn giản hơn.
• Sử dụng dependency injection để maintane ứng dụng.
• Tất cả mọi thứ dựa vào component.

Môi Trường Phát Triển.

AngularJs 2 sử dụng TypeScript để phục vụ cho quá trình phát triển ứng dụng Angular. TypeScript là một ngôn ngữ có thể gọi là bao hàm Javascript, sử dụng TypeScript để viết các ứng dụng Angular và một trình compiler cho phép chúng ta biên dịch về ra các file javascript thuần nếu muốn. TypeScript cũng giúp giảm thiểu các lỗi khi viết các ứng dụng Angular. Môi trường để phát triển ứng dụng angular cần có:

• NodeJs.
• Npm.
• Một IDE
• Ngoài ra có thể thêm một ngôn ngữ khác để làm phần server side, phục vụ cho việc lưu trữ dữ liệu nếu cần thiết.

Kiến trúc của AngularJs 2.

Kiến trúc của AngularJs 2 bao gồm các thành phần sau:

• Modules
• Components
• Templates
• Metadatas
• Services
• Directives
• Dependence Injections

Module

Một ứng dụng AngularJs 2 tùy vào độ phức tạp thì nó có thể có một hoặc nhiều module. Một module là một block code thực hiện một hoặc nhiều tác vụ nào đó. Ở angular mỗi module bao gồm component, template, metadata và các service được inject vào các component của module thông qua cơ chế dependency injection.

Components

Component trong AngularJs 2 có thể coi như là một controller (tương ứng trong AngularJs 1) cùng với template nó giúp xử lý một nghiệp vụ nào đó và có thể hiển thị data lên view. Component có thể được sử dụng lại trong ứng dụng. Ở component có thể tự render ra view và cấu hình các dependence injection. Ngoài ra ta cũng có thể thực hiện các thao tác về CSS đối với template của component trong component. Để sử dụng component ta cần đăng ký nó thông qua @Component decorator

Templates

Đây là phần view của component, được sử dụng để hiển thị data hay bất cứ gì mà component sinh ra. Template có thể được định nghĩa trực tiếp trong Component hoặc có thể là một file html riêng và được liên kết với component thông qua url.

Metadatas

Metadata là cách chúng ta mô tả một class component bằng các dữ liệu cụ thể. Một component vẫn sẽ chỉ là một class cho đến khi ta mô tả chúng cho Angular biết đó là component thông qua metadata. Thông tin metadata được mô tả bằng việc khai báo trong decorator @Component. Các thông tin cở bản của metadata có thể có là: selector - đây là html tag tự định nghĩa mà trong đó component có hiệu lực, template - đây là nơi định nghĩa template của component, directives - khai báo các component khác hoặc các directives...

Data Binding

Đây là quá trình chúng ta liên kết dữ liệu của ứng dụng với một element của view trong html để hiển thị hoặc thiết lập giá trị cho element đó. Có 4 kiểu data binding: * Interpolation: hiển thị một biến, giá trị của component một cách trực tiếp bằng các thẻ html. * Property Binding: * Event Binding: khi tác thực hiện một thao tác lên một component method nó sẽ bắn ra một event và thực hiện thao tác tương ứng. * Two-way binding: sử dụng ngModel để binding các giá trị của component với view.

Services

Services là các block code thực hiện một tác vụ nào đó. Các services của Angular hoạt động dựa trên cơ chế Dependency Injection. Các service bao gồm các giá trị, các hàm và các tính năng sẽ được yêu cầu bởi ứng dụng

Directives

Các directives là các class biểu diễn cho các metadata. Có 3 kiểu directive:

• Component directive
• Decorator directive
• Template directive

Dependency Injection.

Đây là một cơ chế cho phép thêm các thành phần cần thiết cho component vào để dùng. Nó tự động tạo các đối tượng của các class mà component yêu cầu. Sử dụng Dependency Injection cho phép chúng ta thêm các service, provider, component khác vào component để sử dụng một cách dễ dàng hơn.

Kết Luận.

Bài viết vừa giới thiệu qua về AngularJs 2 cơ bản đó là môi trường để phát triển AngularJs 2 cũng như kiến trúc cơ bản của nó. Ở các bài sau sẽ đi sâu vào từng thành phần cụ thể của AngularJs 2

Tài Liệu Tham Khảo.

1. https://www.tutorialspoint.com/angular2/