Bài thực hành số 1

Thiết lập môi trường và không gian làm việc cho Angular
A. Điều kiện tiên quyết
Để sử dụng Framework Angular, cần nắm vững: JavaScript, TypeScript, HTML,
CSS
B. Nội dung thực hành
1. Để cài đặt Angular trên máy tính
1.1. Tải và cài đặt Node.js
Angular yêu cầu phiên bản LTS active hoặc LTS maintenance của Node.js. Sau
khi cài đặt xong để kiểm tra phiên bản dùng lệnh:
node –v
Trình quản lý gói npm
Angular, Angular CLI và các ứng dụng Angular phụ thuộc vào gói npm cho nhiều
tính năng và chức năng. Để tải xuống và cài đặt các gói npm, bạn cần một trình quản lý
gói npm. Hướng dẫn này sử dụng npm client giao diện dòng lệnh, được cài đặt mặc định
theo Node.js. Để kiểm tra xem bạn đã cài đặt ứng dụng npm client hay chưa, hãy chạy
lệnh sau trong cửa sổ dòng lệnh.
npm –v
Cài đặt Angular CLI
Bạn sử dụng Angular CLI để tạo dự án, tạo mã ứng dụng và thư viện, đồng thời
thực hiện nhiều tác vụ phát triển liên tục như kiểm thử, đóng gói và triển khai. Để cài đặt
Angular CLI, hãy mở cửa sổ dòng lệnh và chạy lệnh sau:
npm install -g @angular/cli
1.2. Cài Visual Studio Code (hoặc bất kỳ trình soạn thảo nào khác mà bạn chọn).
2. Tạo không gian làm việc và khởi tạo ứng dụng
Để tạo không gian làm việc mới và khởi tạo ứng dụng ban đầu:
1. Chạy lệnh ng new và cung cấp tên ứng dụng thay cho my-app, như sau:
ng new my-app
2. Lệnh ng new sẽ nhắc bạn biết thông tin về các tính năng được bao gồm trong ứng
dụng. Chấp nhận các giá trị mặc định bằng cách nhấn phím Enter hoặc Return. Angular
CLI cài đặt các gói Angular npm cần thiết và các phụ thuộc khác. Quá trình này có thể
mất vài phút. Angular CLI tạo một không gian làm việc mới và một ứng dụng Welcome
đơn giản, sẵn sàng chạy.
Chạy ứng dụng: Angular CLI bao gồm một máy chủ để bạn có thể xây dựng và chạy ứng
dụng của mình trên máy cục bộ.
1. Điều hướng đến thư mục không gian làm việc, chẳng hạn như my-app.
2. Chạy lệnh sau:
cd my-app
ng serve –open (hoặc npm start)
Lệnh ng serve khởi chạy máy chủ, chạy ứng dụng của bạn, và xây dựng lại ứng dụng khi
bạn thực hiện thay đổi đối với các tập tin.
Lưu ý: Để dừng chạy ứng dụng ta dùng tổ hợp phím: Ctrl + C
Nếu cài đặt và thiết lập thành công, bạn sẽ thấy một trang tương tự như sau.
3. Các thành phần trong một ứng dụng Angular
3.1. File cấu hình không gian làm việc
Tất cả các dự án trong một không gian làm việc chia sẻ một bối cảnh cấu hình CLI. Cấp
cao nhất của không gian làm việc chứa các tệp cấu hình trên toàn không gian làm việc,
tệp cấu hình cho ứng dụng gốc và các thư mục con cho mã nguồn ứng dụng gốc và các
file kiểm thử
3.2. Cấu trúc file dự án
Theo mặc định, lệnh CLI ng new my-app tạo một thư mục không gian làm việc có
tên my-app và tạo một khung ứng dụng mới trong một thư mục src/ ở cấp cao nhất của
không gian làm việc. Ứng dụng mới được tạo chứa các file nguồn cho module gốc, với
component gốc và template.
 Đối với không gian làm việc đơn ứng dụng, thư mục con src/ của không gian làm
việc chứa các file nguồn (logic ứng dụng, dữ liệu và nội dung) cho ứng dụng gốc. Đối với
không gian làm việc nhiều dự án, các dự án bổ sung trong thư mục projects/ chứa một thư
mục con project-name/src/ có cùng cấu trúc.
3.3. File mã nguồn ứng dụng
Các |le ở cấp cao nhất của thư mục src/ hỗ trợ việc kiểm thử và chạy ứng dụng của
bạn. Các thư mục con chứa mã nguồn ứng dụng và cấu hình dành riêng cho ứng dụng.
Bên trong thư mục src/ , thư mục app/ chứa dữ liệu và logic của dự án của bạn. Các
component, template và style của Angular có ở đây

3.4. Tệp cấu hình ứng dụng

Các tệp cấu hình ứng dụng cụ thể cho ứng dụng gốc nằm ở cấp cơ sở không gian
làm việc. Đối với không gian làm việc nhiều dự án, các tệp cấu hình dành riêng cho dự án
nằm trong thư mục gốc của dự án projects/project-name/. Dự án cụ thể TypeScript các
tệp cấu hình kế thừa từ toàn bộ không gian làm việc tsconfig.json và dành riêng cho dự
án TSLint các tệp cấu hình kế thừa từ toàn bộ không gian làm việc tslint.json
APPLICATION PURPOSE
SPECIFIC CONFIG
FILES
Configures sharing of target browsers and Node.js
.browserslistrc versions among various front-end tools. See
Browserslist on GitHub for more information.
karma.conf.js Application-specific Karma configuration.
Application-specific TypeScript configuration,
including TypeScript and Angular template
tsconfig.app.json
compiler options. See TypeScript Configuration and
Angular Compiler Options
TypeScript configuration for the application tests.
tsconfig.spec.json
See TypeScript Configuration.
tslint.json Application-specific TSLint configuration