Đôi Nét về Angular 2.0

Bắt đầu với những tính năng mới

Hãy xem phiên bản này đem đến cho chúng ta những lợi ích và tính năng gì mới?

Phát triển các ứng dụng di động

Các thư viện modul và định tuyển trong angular được nạp ưu tiên giúp ứng dụng của bạn được nạp đầy đủ các thư viện cần thiết, kể cả khi sử dụng các mạng có băng thông thấp cũng không cần phải chờ đợi lâu. Các tính năng đầu tiên trên di động bao gồm hỗ trợ cảm ứng, điều chỉnh hiệu suất và cách sử dụng tối thiểu bộ nhớ trên nền tảng di động, và các thành phần thiết kế giao diện người dùng thích nghi với nhiều thiết bị.

Future Ready

Angular phiên bản 2.0 được viết trong nền tảng ES6 (ECMAScript 6), với việc bổ sung thêm các kiểu và chú thích. ES6 cho phép Angular được hưởng lợi từ các sản phẩm tốt nhất của JavaScript giúp mã viết ra dễ đọc và rõ ràng hơn.

Phát triển linh hoạt hơn

Sự lựa chọn ngôn ngữ nào là tùy thuộc vào bạn. Ngoài việc cung cấp hỗ trỡ đầy đủ tính năng của ES6 và TypeScript, Angular 2.0 vẫn hoạt động tốt ngay cả trên các nền tảng ES5, Dart, CoffeScript, và các ngôn ngữ khác để biên dịch JavaScript. Như vậy đừng quá lo lắng về môi trường phát triển Angular 2.0.

Tốc độ và hiệu năng

Tốc độ được cải thiện nhanh hơn gấp 5 lần, nhờ tính năng tuning Của JavaScript. Nếu bạn muốn đảm bảo tốc độ cho ứng dụng hiện tại của bạn thì Angular phiên bản 2.0 sẽ là lựa chọn tốt nhất.

Đơn giản và dễ viết

Ngôn ngữ phù hợp với ngữ nghĩa, cú pháp viết dễ dàng. Giảm độ phức tạp cho nhóm của bạn: cấu trúc mới đơn giản, dễ học, nhiều template mẫu.

Đơn giản việc định tuyến

Đơn giản trong việc định tuyến các URL. Angular 2.0 hỗ trợ nav, animated hiệu ứng, và lazy loading cho trình duyệt di động. Nếu bạn đang sử dụng route ở phiên bản trước, bạn cũng có thể dễ dàng chuyển đổi sang angular 2.0.

Hiệu ứng ANIMATIONS

Hỗ trợ các hiệu animation trên thiết bị di động và ứng dụng destop bằng cách sử dụng các event Angular. Bạn có thể sử dụng CSS, JavaScript và các dịch vụ cung cấp animate khi người dùng tương tác. Tính năng animations được sắp xếp trên một timeline.

INJECTION

Angular 2.0 tạo liên hết mạnh mẽ, đơn giản để sử dụng khai báo injection. Khai báo injection giúp bạn viết kiểm thử dễ dàng hơn.

Hỗ trợ các thành phần web

Cung cấp thêm các thành phần web, được xây dựng bằng cách sử dụng các thư việc khác, cho phép bạn truyền dữ liệu qua lại dễ dàng. Các thành phần Angular sử dụng các tiêu chuẩn web HTML 5 trong trình duyệt hỗ trợ.

Hỗ trợ đa ngôn ngữ

Dễ dàng đưa ứng dụng trở nên dễ tiếp cận thông qua trình đọc màn hình và các thiết bị trợ giúp bằng cách tự tạo ra các thuộc aria thích hợp.

Bắt đầu với Angular 2.0

1. Tạo một Project cho Angular2.0

Bài viết này sẽ hướng dẫn này bạn làm thế nào viết một thành phần angular sử dụng trình biên dịch TypeScript. Bạn có thể lựa chọn một ngôn ngữ mà bạn quen thuộc như ES5, dark.

Mục tiêu của bài tập là viết một thành phần Angular để in ra một string. Bài tập này yêu cầu bạn đã cài đặt node và npm để làm việc.

Đầu tiên, tạo mới một thư mục để chứa Bài tập. Tất cả dòng lệnh nên được chạy trong thư mục này.

Để sử dụng tốt các tính năng của trình biên dịch TypeScript, yêu cầu bạn đọc thêm trình biên dịch JavaScript tại DefinitelyTyped. Và đọc thêm về ES6 - và những khái niệm mới cần biết.

Cài đặt môt trường.

1 2	$ sudo npm install -g tsd@^0.6.0 $ sudo tsd install angular2 es6-promise rx rx-lite

Sau đó, vào thư mục chứa project, tạo mới 2 file index.html và app.ts

1 2	$ touch app.ts $ touch index.html

Sau khi cài đặt thành công thư mục của bạn sẽ trông như thế này:

2. Chạy trình biên dịch TypeScript

Với mã TypeScript ở trên, trình duyệt sẽ không thể hiểu được, vì vậy chúng ta cần chạy một trình biên dịch để dịch nó thành mã JavaScript mà trình duyệt có thể hiểu được. Chúng ta sẽ bắt đầu sử dụng trình biên dịch TypeScript để biên dịch mã trong file app.ts.

1 2	$ sudo npm install -g typescript@^1.5.0-beta $ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

3. Import thư viện Angular

Mở file app.ts khai báo đoạn code sau:

1	/// <reference path="typings/angular2/angular2.d.ts" />

Sử dụng cú pháp ES6, các thư viện sẽ tự động được nạp khi chạy ứng dụng.

1	import {Component, View, bootstrap} from 'angular2/angular2';

4. Khai báo một component

Trong file app.ts thêm đoạn code sau:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// Annotation section @Component({ selector: 'my-app' }) @View({ template: '<h1>Hello </h1>' }) // Component controller class MyAppComponent { name: string; constructor() { this.name = 'Hello Angular2.0'; } }

@Component và @View

• Một @Component định nghĩa một tag HTML hay một Selector trong CSS
• @View khai báo template hiện thị cho component.

5. Bootstrap

Cuối file app.ts gọi tới hàm bootstrap()

1	bootstrap(MyAppComponent);

6. Khai báo HTML

Trong tag head khai báo như sau:

1 2 3 4 5 6 7 8 9 10 11

<html> <head> <title>Angular 2 Quickstart</title> <script src="https://github.jspm.io/jmcriffey/bởe-traceur-runtime@0.0.87/traceur-runtime.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script> </head> <body> <!-- The app component created in app.ts --> <my-app></my-app> </body> </html>

7. Nạp component

JS

1 2 3

<head> <script src="https://jspm.io/system@0.16.js"></script> </head>

Component

1 2	<my-app></my-app> <script>System.import('app');</script>

8. Chạy thử trên localhost

• Bạn cần cài đặt gói http-server

1 2	$ sudo npm install -g http-server cd angular2 && http-server