Học lập trình Angular 2 – Angular 2 beta đã sẵn sàng trải nghiệm

Học lập trình Angular 2 – Angular 2 beta đã sẵn sàng trải nghiệm
access_time 12/16/2015 12:00:00 AM
person Đào Minh Giang

Giới thiệu

Ngày 16/12 trên Twiter chính thức của mình twitter.com/angularjs thông báo Augular 2 đã được chuyển sang giai đoạn thử nghiệm beta. Từ đây với các nhà phát triển sẽ dễ dàng xây dựng thành công các ứng dụng lớn bằng việc sử dụng Angular 2.
Trong suốt giai đoạn từ preview đến alpha, đội phát triển angular 2 đã làm việc chặt chẽ với một số dự án lớn tại Google gồm AdWords, GreenTea (một hệ thống CRM nội bộ của Google), và Google Fiber. Và chỉ một vài tuần đã ra mắt được Google Fiber trên cơ sở nền tảng Angular 2.
Ngoài ra, đội phát triển cũng làm việc chặt chẽ với các đội khác để tích hợp Angular 2 gồm nền tảng Ionic với Ionic 2, Teleric với NativeScript, Range.io với Batarangle và nhiều đội khác nữa.
Ngay lúc này các bạn có thể truy cập vào trang web chính thức của Angular 2 là angular.io để bắt đầu trải nghiệm của mình thông qua các mục Quickstart và Tutorial.
Nếu các bạn đã xây dựng ứng dụng của mình với Angular 1 thì cũng thể dễ dàng cập nhật lên Angular 2 thông qua việc sử dụng ngUpdate và ngForward trong đó:
Xây dựng ứng dụng Todo với Angular 2
Trong Angular bạn hiển thị dữ liệu bằng cách định nghĩa các component (thành phần). Dữ liệu trong các lớp component cho phép hiển thị với template (mẫu) hay được điều khiển cách hiển thị.
Trong ví dụ sau được xây dựng bằng TypeScript, Angular 2 kết hợp cùng SystemJS với công cụ Visual Studio Code (hoặc Visual Studio 2013 - 2015)
Đoạn mã sau thực hiện khai báo một component:
 
Khai bo Component TodoApp
Đoạn mã TypeScript này sử dụng cú pháp decorator (được giới thiệu ở phiên bản 1.5) để khai báo lớp TodoApp là một Angular component.
Thay vì sử dụng $scope trong Angular 1 thì ở đây template sẽ thao tác trực tiếp với các thành phần của TodoApp như các bạn thấy trong template
Tương tự vậy ta có các component thực hiện chức năng hiển thị form nhập mới TodoForm:
Khai bo component TodoForm
Và component hiển thị danh sách các task TodoList:
Khai bo component TodoList
Kết hợp các thành phần với nhau trong trang HTML index.html
Và cuối cùng là giao diện khi chạy trên trình duyệt:
 
vertical_align_top
share
Chat...