Angular và ES6: Tạo bộ khung ứng dụng

Nếu bạn cũng như tôi, đã từng biết đến Angular1. Và khi bắt đầu với Angular2 bạn không biết bắt đầu từ đâu, các thư viện liên quan để chạy Angular...

Bài viết này sẽ hướng dẫn từ đầu cho các bạn. Quá trình này chỉ mất vài phút để cài đặt.

1. Cài đặt Yeoman và Generator

Tất cả mọi cài đặt đều thông qua npm nhé. Mở Terminal hoặc Cmd nếu bạn dùng Windows và gõ đoạn lệnh sau:

$ npm install -g yo
$ npm install generator-angular2

2. Tạo ứng dụng Hello Word

Tạo thư mục hello và vào đó chạy  yo  để tạo ra bộ khung cho ứng dụng của bạn. 

$ mkdir hello
$ cd hello
$ yo angular2

  Yo sẽ tự động chạy npm install cho bạn chứ bạn không cần chạy như trên hướng dẫn của angular.io nữa.

3. Chạy thử

Gõ lệnh sau rồi vào trình duyệt truy cập http://localhost:8000.

$ npm start

Trang web của bạn hiện ra đơn giản chỉ là chữ hello. Bởi vì chúng ta chưa xây dựng nội dung cho nó.

* Khám phá file của ứng dụng

Xem cấu trúc file: 

Nhìn hình trên các bạn đã biết được số file tạo ra bởi generator-angular2 rồi phải không. Giờ đi xem chức năng và nhiệm vụ từng file

- package.json: là file chứa tất cả thư viện mà Angular cũng như project cần. Sau này bạn muốn thêm thư viện cho project chỉ cần sửa trong file này là npm sẽ download về cho bạn.

- gulpfile.js: đây là mã nguồn Gulp cho project. Gulp là trình task runner được viết trên NodeJs, iúp chúng ta tự động hoá các thao tác thường diễn ra trong quá trình phát triên website như: Minify, kiểm tra lỗi Javascript, compile…

- readme.md: File này đơn giản là file ghi chú hay hướng dẫn của dự án, bạn thích ghi gì vào thì ghi thôi.

- index.html: File này import Angular và các thư viện, Sau đó dòng lệnh System.import('index') sẽ gọi đến file index.js

- index.js: File này để khai báo các component, view, service... rồi sau đó bootstrap project.

- hello.html: File này là view của module. Bạn có thể sửa html trong file này để thay đổi view

- hello.js: File này định nghĩa component.

Tổng kết

Với hướng dẫn này bạn sẽ không cần phải tự tạo các file và thư mục bằng tay, mọi việc cần thiết để tạo nên bộ khung cho project Angular2 hoàn toàn tự động. 

Lưu ý là hướng dẫn này chỉ dành cho ES6. Còn nếu bạn muốn thực hiện cho TypeScript thì vào angular.io mà đọc nhé. Trên đó hướng dẫn rõ ràng cho ngôn ngữ này rồi nên tôi không nhắc lại ở đây. Tuy nhiên nếu các bạn yêu cầu tôi vẫn sẵn lòng viết bài hướng dẫn cho các bạn. 

Hãy nêu ý kiến của bạn ở khung comment nhé. Cảm ơn đã đọc bài/

Bạn vẫn còn băn khoăn về Angular2?

Đăng ký nhận email bài viết mới để không bỏ lỡ bất kỳ bài viết nào về Angular. Chỉ vài email một tháng và có thể hủy đăng ký bất cứ lúc nào.

Email *

Angular 2 và các thư viện liên quan

Angular 2 ra đời và chính thức lấy tên là Angular chứ không còn là AngularJs nữa. Và như tôi nhận thấy thì rất rất nhiều người đã phải bối rối ngay từ khi Angular vẫn đang beta.

Thử nhìn vào source của ví dụ "Hello Word" từ chính trang angular.io. Bạn có thể xem trên Plunker tại đây.

Mở source file index.html ra và... Ôi mẹ ơi, một mớ lằng nhằng chẳng hiểu để làm cái gì nữa. Có đến 5 file được import chứ không phải chỉ 1 file như Angular1 nữa.

• system.js
• typescript.js
• angular2-polyfills.js
• Rx.js
• angular2.dev.js

Giờ đi tìm hiểu từng file xem nó là cái gì.

System.js

Đây là một thư viện được viết bởi Guy Bedford và các cộng sự. Được viết dựa trên es6-module-loader để thay vì chỉ load các module của es6 thì còn có thể load được cả CommonJs, AMD, global script. Được gọi là  “Universal dynamic module loader”.

Như vậy, Angular không có hệ thống module riêng như Angular1 mà sử dụng lại của System.js. Vậy nên đầu tiên phải import nó vào trước nếu không Angular sẽ không chạy được đâu nhá.

Typescript.js

Chắc hẳn các bạn đa số đều biết về TypeScript, trước đây tôi có một loạt bài viết về thằng này nhưng quên backup lại khi trả server.

TypeScript là ngôn ngữ mới do Microsoft phát triển. Được gọi là siêu javascript và khả năng là sẽ dần thay thế javascript trong tương lai. Về cơ bản là TypeScript có cấu trúc như các ngôn ngữ lập trình hướng đối tượng. Sau đó trình biên dịch sẽ dịch ra JavaScript để trình duyệt hiểu được,

File typescript.js này chính là transpiler cho system.js sử dụng để dịch TypeScript thành JavaScript .

System.config({
  transpiler: 'typescript',   // hắn đây
  typescriptOptions: { emitDecoratorMetadata: true }, 
  packages: {'src': {defaultExtension: 'ts'}} 
});

angular2-polyfills

File thực chất là hợp nhất giữa zone.js và reflect-metadata.

Rx.js

Là thư viện Observables. Thuật ngữ này sẽ gặp nhiều khi đi sâu vào Angular. Nó được bổ sung giống Promises ở Angular1. Cho dù bạn có hay không sử dụng Observables thì vẫn phải import thư viện này vào.

angular2.dev.js

Cái này nhìn thấy chữ dev là rõ rồi hen. Không cần nói thêm nữa.

Tổng kết

Hi vọng bài viết này sẽ giúp các bạn đỡ băn khoăn về các thư viện mà Angular sử dụng. Vào angular.io để tìm hiểu thêm trong lúc tôi viết bài mới.

Nhớ đăng ký theo dõi blog để nhận những bài viết mới nhất. Cảm ơn các bạn đã đọc bài.

Bạn vẫn còn băn khoăn về Angular2?

Đăng ký nhận email bài viết mới để không bỏ lỡ bất kỳ bài viết nào về Angular. Chỉ vài email một tháng và có thể hủy đăng ký bất cứ lúc nào.

Email *