Angular Cli Là Gì – Tạo Mới Angular Project Sử Dụng Angular Cli | Bostonenglish.edu.vn

Angular 2 được phát hành chính thức trong năm 2016 với rất nhiều thay đổi và tính năng tuyệt với so với phiên bản cũ. Có lễ đã có rất nhiều lập trình viên đã và đang làm việc hoặc bắt đầu tìm hiểu về nó. Tuy nhiên, vấn đề config ứng dụng như typescript, nodejs, testing,.. là tương đối phức tạp và làm mất nhiều thời gian cho các bạn. Để giải quyết vấn đề này, Google đã cho ra đời một công cụ là Angular-cli. Nó là công cụ tuyệt vời để tạo dựng môi trường phát triển, bảo trì cho ứng dụng angular 2.

1. Cài đặt

Để cài đặt Angular CLI chúng ta chạy lệnh sau:

npm install -g

Bạn đang xem: Angular cli là gì

angular/cli2. Tạo projectĐể tạo một project angular mới, ta chỉ đơn giản chạy lệnh:

ng new test-projectRất nhanh một cấu trúc project được tạo ra như bên dưới:

*

Các thành phần config, package, testing, environment, component đã được dựng sẵn, các bạn hoàn toàn có thể chạy ứng dụng ngay lập tức với lệnh

cd test-projectng serveMặc định, angular-cli sẽ thiết lập cổng 4200 để chạy web, bạn gõ http://localhost:4200/ trên trình duyệt để xem kết quả. Web sẽ tự động cập nhật khi có bất kì thay đổi nào trong code. Nếu không muốn chạy trên cổng mặc định, chúng ta cũng có thể thiết lập cổng cho ng serve:

See also  Hướng dẫn hạch toán các giao dịch liên quan đến kinh doanh chứng khoán năm 2019

ng serve –host 0.0.0.0 –port 42013. Tạo component, directives, pipes và servicesBạn có thể sử dụng lệnh ng generate (hoặc chỉ ng g) để tạo các components. Dưới đây là các tùy chọn để làm việc này

ng generate component news-componentng g component news-component # using the alias# components support relative path generation# if in the directory src/app/feature/ and you runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmpBạn có thể thấy việc generate component là rất linh hoạt. Khi chạy lệnh generate một loạt các thành phần cần thiết cho component được tạo ra như file .ts, .html, css tương ứng. Đồng thời angular-cli cũng thêm mới component mới tới app module.

Xem thêm: Vol Là Gì – Vol Nghĩa Là Gì Trong Tiếng Việt

Xem thêm: Hệ điều Hành Là Gì, Bài 10: Khái Niệm Về Hệ điều Hành

Công việc còn lại của chúng ta là viết logic trong component đó. Thật dễ dàng phải không ? Các bạn có thể quan sát các thành phần mà angular-cli đã tạo ra khi generate component như hình bên dưới:

*

Các bạn cũng thể tạo ra các thành phần khác của angular như bảng bên dưới:

ScaffoldUsage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g pipe my-new-pipe
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

4. Bundling

Angular-cli tích hợp webpack trong việc build và bundle code. Các bạn không phải bận tâm việc config webpack. Như vậy việc optimize code cho output cũng được angular cli thực hiện giúp chúng ta. Các bạn có thể quan sát output như hình bên dưới:

*

Build dành cho môi trường development

See also  Từ vựng tiếng Anh về hoa và ý nghĩa các loài hoa | Bostonenglish.edu.vn

ng buildBuild dành cho môi trường productionng build –prodng serve –prod5. TestingMột điều thú vị nữa trong angular-cli đó là nó tích hợp việc testing với Karma. Trong phát triển client-side ngày nay, việc testing code ngày càng được chú trọng. Chính vì vậy, việc tích hợp sẵn môi trường testing trong ứng dụng là rất cần thiết. Angular-cli đã config sẵn, bạn chỉ đơn giản viết thêm các hàm test và chạy lệnh sau:

ng testTests sẽ thực thi sau khi một build được thực thi thông qua Karma, và nó sẽ tự động watch những file thay đổi của bạn. Sau khi chạy lệnh trên, bạn có thể quan sát kết quả trên trình duyệt như bên dưới:

*

6. Kết luận

Bài viết này là những tìm hiểu bước đầu về angular-cli. Nó đang ở version 1.0, chắc chắn sẽ vẫn được Google tiếp tục phát triển thêm nhiều tính năng hấp dẫn khác. Tôi nghĩ đây là một tool khá hữu ích cho những ai muốn bắt đầu làm việc với angular 2. Các bạn có thể tham khảo thêm tại các link sau:

Chuyên mục: Hỏi Đáp

See more articles in the category: Wiki

Leave a Reply