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 *