Giới thiệu về Angular Cli

Giới thiệu về Angular Cli
access_time 1/23/2018 12:00:00 AM
person Nguyễn Mạnh Hùng

Giới thiệu về Angular Cli

1. Giới thiệu về Angular Cli

Như chúng ta đã biết, Các ứng dụng Web hiện đại được các lập trình viên phát triển dựa trên các Framework mạnh mẽ như Angular. Các framework này cho phép các lập trình viên sử dụng các thư viện hiện đại và phức tạp của Javascript. Để thực hiện được điều này thì các nhà phát triển cần một môi trường để thiết lập các thư viện cần thiết cũng như là để phát triển các đoạn mã ứng dụng, toàn bộ các vấn đề này để cho đơn giả, nó đều được thiết lập để nằm trong cùng một thư mục, thư mục này sẽ chứa cả Code phần font-end của ứng dụng.

Thực tế chúng ta cần một công cụ để phát triển ứng dụng Angular ở mức cao với :

+ Để phát triển ứng dụng Angular thì chúng ta cần cài đặt Node.js, Node.js là 1 nền tảng phía server mã nguồn mở và miễn phí, cho phép dịch và chạy các Web Server sử dụng JavaScript. Nó được sử dụng rộng dãi để dịch ứng dụng Web. Node.js gắn liền với npm, npm (package manager) được sử dụng để quản lý các gói thông tin của Node.js. Các bạn có thể vào địa chỉ www.npmjs.com, Tại đây có chứa hàng ngàn các gói thông tin miễn phí, lập trình viên sẽ download thông qua câu lệnh (Command Line) về để sử dụng.

+ Ứng dụng được phát triển bởi Angular, nhật định phải cài đặt các gói thư viện cần thiết cho việc phát triển và biên dịch ứng dụng. các đoạn mã sẽ được viết bằng ngôn ngữ TypeScript, trong quá trình xây dựng ứng dụng sẽ phải thực hiện Unit Test, biên dịch để triển khai ứng dụng.

Để giảm thiểu các phiền hà kể trên, đội phát triển của Angular đã tạo ra Angular Cli. Angular Cli là bộ công cụ hỗ trợ cho phép tạo ứng dụng, tạo các thành phần của Angular như component, module,… thực hiện biên dịch ứng dụng một cách dễ dàng hơn.

 


Hình số 1: Hình ảnh Angular Cli

2. Cài đặt ứng dụng Angular Cli

Để thực hiện, đầu tiên các bạn phải cái đặt Node.js. Các bạn có thể vào địa chỉ url : https://nodejs.org/en/ để tiến hành download Node Js về máy tính và cài đặt.


Hình số 2 : Hình ảnh Node JS

Angular Cli được cài đặt thông qua cửa sổ lệnh command.

Cú pháp cài đặt như sau :

npm install -g @angular/cli

sau khi cài đặt thành công các bạn có thể kiểm tra phiên bản hiện tại trên máy tính thông qua câu lệnh :

ng -v


Hình số 3 : Phiên bản Angular Cli

3. Tạo Project bằng Angular Cli

Để tạo Project, đầu tiên các bạn phải bật cửa sổ thực thi dòng lệnh, sau đó điều hướng tới thư mục muốn tạo Project. Tiếp theo các bạn sử dụng cú pháp sau đây để tạo Project Angular 5 với Angular Cli như sau :

ng new PROJECT-NAME

PROJECT-NAME : Tên dự án muốn tạo

Ví dụ tạo Project với tên là SampleApp trong thư mục E:\ITProTraining\Angular 5\Vidu.


Hình số 4: Tạo Project

Câu lệnh sẽ được thực hiện trong một vài phút, với các nhiệm vụ như sau :

+ Tạo tên thư mục gốc chứa dự án có cùng tên với tên dự án (Ở đây là thư mục “SampleApp”.

+ Bổ sung các file và các thư mục cần thiết cho ứng dụng.

+ Bổ sung các gói thư viện nhỏ nhất của Angular, tối thiểu cần thiết cho quá trình dịch và triển khai ứng dụng.

+ Cài đặt các gói của npm.

Sau khi khởi tạo xong nếu thành công, kết quả sẽ hiển thị như sau :


Hình số 5 : Tạo Project thành công

Sử dụng Visual Source Code để mở thư mục có chứa dự án


Hình số 6: Cấu trúc ứng dụng Angular

Mô tả các cấu trúc trong ứng dụng :

e2e : Viết tắt của chữ end-to-end, được sử dụng để bổ sung các test, các test này sẽ được thực hiện nhằm kiểm định lại quá trình thực hiện các nghiệp vụ của font-end trên các trình duyệt khác nhau.

src: Thư mục chứa toàn bộ mã code của ứng dụng.

.angular-cli.json : file chứa thông tin cấu hình được sử dụng bởi Angular Cli, nội dung của file được đặt tả theo .json. Nó chứa thông tin của tên file .html được chạy đầu tiên của ứng dụng, các file typescrip được nạp trong quá trình chạy ứng dụng, các cấu hình để trỏ đến đường dẫn các file typescript trong Source Code và trong Test.

.editorconfig : File chứa thông tin về biên tập

karma.conf.js : file này được sử dụng là đầu vào cho quá trình chạy karma test. Toàn bộ các nội dung liên quan của file này được sử dụng để cấu hình cho Karma test.

package.json : Liệt kê danh sách các thư viện được sử dụng trong ứng dụng cũng như thiết lập các câu lệnh để thực hiện việc chạy, dịch, test ứng dụng.

protractor.conf.js : File cấu hình chứa các thông tin cấu hình để chạy end-to-end test khi sử dụng protractor.

tsconfig.json : File thông tin cấu hình được sử dụng khi thực hiện biên dịch Typescript.

tslint.json: Chứa thông tin cấu hình về quy tắc kiểm tra các đoạn mã của Typescrip khi được viết trong ứng dụng.

4. Một số các câu lệnh cơ bản của Angilar Cli

+ Chạy chương trình : Các bạn sử dụng câu lệnh : ng server

+ Dịch chương trình : Các bạn sử dụng câu lệnh : ng build

+ Test chương trình: Các bạn sử dụng câu lệnh : ng test

+ Kiểm tra cú pháp TypeScrip : Các bạn sử dụng câu lệnh : ng lint

Các câu lệnh này đều được mô tả trong file package.json

Các câu lệnh thường dùng khác:

+ Tạo Component : Các bạn sử dụng câu lệnh : ng g component my-new-component

+ Tạo Service : Các bạn sử dụng câu lệnh : ng g service my-new-service

+ Tạo Module : Các bạn sử dụng câu lệnh : ng g module my-module

+Tạo Class: Các bạn sử dụng câu lệnh : ng g class my-new-class

+Tạo Interface: Các bạn sử dụng câu lệnh : ng g class my-new-class

+Tạo Enum: Các bạn sử dụng câu lệnh : ng g enum my-new-enum

+Tạo Pipe: Các bạn sử dụng câu lệnh : ng g pipe my-new-pipe

Để biết thêm chi tiết các bạn có thể vào trang angular.io hoặc https://github.com/angular/angular-cli để nghiên cứu sâu hơn về Angular Cli.


vertical_align_top
share
Chat...