Tạo ứng dụng với Angular 5

Tạo ứng dụng với Angular 5
access_time 11/14/2017 12:00:00 AM
person Nguyễn Mạnh Hùng

Sử dụng công cụ Angular Cli (Công cụ dòng lệnh) để tạo ứng dụng Angular 5. Đây là công cụ cho phép lập trình viên có thể thao tác với ứng dụng thông qua dòng lệnh như tạo ứng dụng Angular 5, thêm các file cho ứng dụng, thực hiện biên dịch, test, … deployment sản phẩm.

Thông thường Angular Cli có thể tích hợp với các bộ công cụ soạn thảo như Visual Studio Code…

Các bước tạo ứng dụng với Angular 5 được thực hiện như sau :

Bước 1 : Cài đặt môi trường phát triển

Hình số 1 : Hình ảnh Nodejs

npm install -g @angular/cli

Bước 2 : Cài đặt công cụ phát triển

Có thể sử dụng rất nhiều các bộ công cụ để phát triển ứng dụng Angular 5. Các ứng dụng phổ thông bao gồm :

Ở đây tôi giới thiệu bộ công cụ Visual Studio Code, đây là bộ công cụ miễn phí được phát triển bởi Microsoft. Sử dụng đơn giản và hỗ trợ cho phép cài các Add-On rất đơn giản.

Để cài đặt Visual Studio Code bạn vào địa chỉ : https://code.visualstudio.com/download để download về máy tính và thực hiện cài đặt theo hướng dẫn, quá trình cài đặt rất đơn giản.


Hình số 2 : Hình ảnh Visual Studio Code

Bước 3 : Tạo ứng dụng

Để tạo ứng dụng đầu tiên các bạn bật cửa sổ dòng lệnh (command line) sau đó điều hướng tới thư mục cần tạo ứng dụng.

Sau đó sử dụng câu lệnh:

ng new my-app

Để tạo ứng dụng, sau khi sử dụng câu lệnh trên, Angular-Cli sẽ tự động tạo ứng dụng


Hình số 3 : Hình ảnh tạo ứng dụng Angular-Cli

Chú ý : Angular-Cli sẽ tự động lấy toàn bộ các thư viên cần thiết để chạy ứng dụng do vậy quá trình tạo ứng dụng sẽ mất một vài phút.

Sau khi ứng dụng tạo sau các bạn sử dụng Visual Studio Code để bật ứng dụng lên

Bước 4 : Biên dịch và chạy chương trình


Hình số 4 : Biên dịch ứng dụng Angular 5


Hình số 5 : Thực hiện chạy chương trình

Khi đó các bạn sử dụng trình duyệt web và gõ đường dẫn http://localhost:4200 để hiển thị giao diện ứng dụng.

Bạn cần đăng nhập vào hệ thống mới có quyền download file kèm theo bài viết Đăng ký tài khoản

vertical_align_top
share
Chat...