Tutor

Seri Angular 6+ cơ bản <P2> Ứng dụng Shell

Ứ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.

Trong phần hướng dẫn này, bạn sẽ làm như sau:
  • Thiết lập môi trường của bạn.
  • Tạo một không gian làm việc mới và dự án ứng dụng ban đầu.
  • Phục vụ ứng dụng.
  • Thay đổi ứng dụng.

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

Để thiết lập môi trường phát triển của bạn, hãy làm theo các hướng dẫn sau trong Bắt đầu:

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.

Để tạo một không gian làm việc mới và một dự án ứng dụng ban đầu:
  1. Đảm bảo rằng bạn chưa có trong thư mục không gian làm việc Angular. Ví dụ: nếu trước đây bạn đã tạo không gian làm việc Bắt đầu, hãy đổi thành thư mục cha của thư mục đó.
  2. Chạy lệnh CLI ng new và cung cấp tên angular-tour-of-hero, như được hiển thị ở đây:
  3. Lệnh ng new nhắc bạn thông tin về các tính năng để đưa vào dự án ứng dụng ban đầu. Chấp nhận mặc định bằng cách nhấn phím Enter hoặc Return.

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.
Dự án ứng dụng ban đầu chứa một ứng dụng Chào mừng đơn giản, sẵn sàng để chạy.

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 đó.

Thay đổi ứng dụng

Mở dự án trong trình soạn thảo hoặc IDE yêu thích của bạn và điều hướng đến thư mục src / app để thực hiện một số thay đổi cho ứng dụng khởi động. Bạn sẽ thấy việc triển khai AppComponent shell được phân phối trên ba tệp:
  1. app.component.ts được viết bằng TypeScript.
  2. app.component.html được viết bằng HTML.
  3. app.component.css :các kiểu CSS riêng của thành phần.

Thay đổi tiêu đề ứng dụng

Mở tệp (app.component.ts) và thay đổi giá trị của thuộc tính tiêu đề thành 'Tour of Heroes'.

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

title = 'Tour of Heroes';

Mở tệp (app.component.html) và xóa mẫu mặc định được tạo bởi Angular CLI. Thay thế nó bằng dòng HTML sau.

//app.component.html (template)

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

Các dấu ngoặc nhọn là cú pháp ràng buộc nội suy của Angular. Liên kết nội suy này thể hiện giá trị thuộc tính title của thành phần bên trong thẻ tiêu đề HTML.
Trình duyệt làm mới và hiển thị tiêu đề ứng dụng mới.

Thêm style ứng dụng

Hầu hết các ứng dụng cho ra một cái nhìn nhất quán trên toàn ứng dụng. CLI đã tạo một style.css trống cho mục đích này. Đặt style toàn ứng dụng của bạn ở đó.

Mở src / style.css và thêm mã dưới đây vào tệp.

//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;
}

Đánh giá code cuối cùng

Mã nguồn cho hướng dẫn này và các css toàn cục Tour of Heroes hoàn chỉnh có sẵn trong ví dụ trực tiếp

Tóm lại

  • Bạn đã tạo cấu trúc ứng dụng ban đầu bằng cách sử dụng Angular CLI.
  • Bạn đã học được rằng các thành phần Angular hiển thị dữ liệu.
  • Bạn đã sử dụng dấu ngoặc kép của phép nội suy để hiển thị tiêu đề ứng dụng.
Dịch bởi:Vũ Đức Nguyên
 
Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration