Ứng dụng Shell

Bạn bắt đầu bằng cách tạo một ứng dụng ban đầu bằng cách sử dụng Angular CLI. Trong suốt hướng dẫn này, bạn sẽ sửa đổi và mở rộng ứng dụng khởi động đó để tạo ứng dụng Tour of Heroes.

 Thiết lập môi trường của bạn

Lưu ý: Bạn không cần phải hoàn thành toàn bộ Bắt đầu. Sau khi bạn hoàn thành hai phần trên của Bắt đầu, môi trường của bạn được thiết lập. Tiếp tục bên dưới để tạo không gian làm việc Tour of Heroes và một dự án ứng dụng ban đầu.

Tạo một không gian làm việc mới và một ứng dụng ban đầu

Bạn phát triển ứng dụng trong bối cảnh không gian làm việc Angular. Một không gian làm việc chứa các tệp cho một hoặc nhiều dự án. Dự án là tập hợp các tệp bao gồm các ứng dụng, thư viện hoặc các bài kiểm tra đầu cuối (e2e). Đối với hướng dẫn này, bạn sẽ tạo ra một không gian làm việc mới.

ng new angular-tour-of-heroes

Angular CLI cài đặt các gói npm Angular 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.

Nó cũng tạo ra các tệp dự án không gian làm việc và khởi động sau:

• Một không gian làm việc mới, với một thư mục gốc có tên angular-tour-of-hero.
• Một dự án ứng dụng bộ khung ban đầu, còn được gọi là angular-tour-of-hero (trong thư mục con src)
• . Một dự án thử nghiệm đầu cuối (trong thư mục con e2e).
• Tập tin cấu hình liên quan.

Chạy ứng dụng

Chuyển đến thư mục không gian làm việc và khởi chạy ứng dụng.

cd angular-tour-of-heroes
ng serve --open

 Lệnh ng serve xây dựng ứng dụng, khởi động máy chủ phát triển, xem các tệp nguồn và xây dựng lại ứng dụng khi bạn thay đổi các tệp đó. --open mở trình duyệt tới http: // localhost: 4200 /.

Bạn sẽ thấy ứng dụng chạy trên trình duyệt của bạn.

Angular components

Trang bạn nhìn thấy là bề ngoài ứng dụng. Vẻ bề ngoài được điều khiển bởi một thành phần Angular có tên AppComponent.

Các thành phần là các khối xây dựng cơ bản của các ứng dụng Angular. Họ hiển thị dữ liệu trên màn hình, lắng nghe đầu vào của người dùng và thực hiện hành động dựa trên đầu vào đó.

//app.component.ts (class title property)

title = 'Tour of Heroes';

//app.component.html (template)

<h1>{{title}}</h1>

//src/styles.css (excerpt)

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}