Kiến trúc của Angular 8

Trong hướng dẫn này bạn sẽ tìm hiểu về cách tạo ứng dụng Angular 8 đầu tiên và kiến trúc của Angular 8.

Tạo ứng dụng Angular 8 đầu tiên

Chúng ta sẽ tạo ứng dụng có tên là expense-manager bằng cách sử dụng lệnh dưới đây:

cd /path/to/workspace 
ng new expense-manager

Trong đó new là một trong những lệnh của ứng dụng ng CLI. Nó sẽ được sử dụng để tạo ứng dụng mới. Nó sẽ hỏi một số câu hỏi cơ bản để tạo ứng dụng mới. Nó là đủ để cho phép ứng dụng chọn các lựa chọn mặc định.

Về câu hỏi định tuyến như được đề cập bên dưới, hãy chỉ định No. Chúng ta sẽ xem cách cấu hình định tuyến sau trong hướng dẫn về Định tuyến.

Would you like to add Angular routing? No

Khi những câu hỏi cơ bản được trả lời, ứng dụng ng CLI tạo một ứng dụng Angular mới trong thư mục expense-manager.

Chúng ta hãy di chuyển vào thư mục ứng dụng mới được tạo của chúng ta bằng lệnh sau.

cd expense-manager

Chúng ta hãy kiểm tra cấu trúc từng phần của ứng dụng. Cấu trúc của ứng dụng như sau:

| favicon.ico 
| index.html 
| main.ts 
| polyfills.ts 
| styles.css 
| 
+--app 
|  app.component.css 
|  app.component.html 
|  app.component.spec.ts 
|  app.component.ts 
|  app.module.ts 
| 
+--assets 
|  .gitkeep 
| 
+--environments 
   environment.prod.ts 
   environment.ts

Chúng tôi chỉ liệt kê những tệp và thư mục quan trọng nhất của ứng dụng như sau:

  • favicon.ico là icon của ứng dụng và assets là thư mục tài nguyên gốc của ứng dụng.
  • polyfills.ts chứa mã tiêu chuẩn hữu ích cho khả năng tương thích của trình duyệt.
  • thư mục environments sẽ có cài đặt của ứng dụng. Nó bao gồm thiết lập production và development.
  • Tệp main.ts chứa mã khởi động.
  • index.html là mã HTML cơ sở của ứng dụng.
  • styles.css là mã CSS cơ sở.
  • thư mục app chứa mã ứng dụng Angular, sẽ được tìm hiểu kỹ trong các hướng dẫn sắp tới.

Bây giờ hãy khởi động ứng dụng bằng lệnh dưới đây -

ng serve
# 10% building 3/3 modules 0 activei wds: Project is running at http://localhost:4200/webpack-dev-server/
# i wds: webpack output is served from /

# i wds: 404s will fallback to //index.html 
# chunk {main} main.js, main.js.map (main) 49.2 kB [initial] [rendered] 
# chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 269 kB [initial] [rendered] 
# chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] 
# chunk {styles} styles.js, styles.js.map (styles) 9.75 kB [initial] [rendered] 
# chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] 
# Date: 2020-05-26T05:02:14.134Z - Hash: 0dec2ff62a4247d58fe2 - Time: 12330ms 
# ** Angular Live Development Server is listening on localhost:4200, open your 
# browser on http://localhost:4200/ ** 
# i wdm: Compiled successfully.

Trong đó serve là lệnh được sử dụng để biên dịch và chạy ứng dụng Angular bằng máy chủ web phát triển cục bộ. ng server sẽ khởi động một máy chủ web phát triển và phục vụ ứng dụng ở cổng 4200.

Bây giờ bạn có thể mở trình duyệt và truy cập địa chỉ http://localhost:4200. Trình duyệt sẽ hiển thị ứng dụng như hình dưới đây -

Ứng dụng Angular đầu tiên

Kiến trúc của Angular 8

Angular framework dựa trên bốn khái niệm cốt lõi sau:

  • Component.
  • Template với Data Binding và Directive.
  • Module.
  • Service và Dependency Injection.

Component trong Angular

Cốt lõi của kiến ​​trúc Angular framework là component. Component là khối xây dựng của mọi ứng dụng Angular. Mọi ứng dụng Angular đều được tạo thành từ một hoặc nhiều component. Về cơ bản, nó là một lớp Typescript thuần túy cùng với một template HTML và một tên liên quan.

Template HTML có thể truy cập dữ liệu từ lớp Typescript tương ứng của nó. Template HTML của component có thể bao gồm component khác bằng cách sử dụng giá trị của selector (name). Component có thể có style CSS tùy chọn được liên kết với nó và template HTML cũng có thể truy cập style CSS.

Component trong Angular

Component AppComponent trong ứng dụng ExpenseManager của chúng ta trông sẽ như sau -

// src/app/app.component.ts 
import { Component } from '@angular/core'; 

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Expense Manager'; 
}

Trong đó @Component là một decorator và nó được sử dụng để chuyển đổi một lớp Typescript thông thường thành Angular Component.

app-root là selector/name của component và nó được chỉ định bằng cách sử dụng siêu dữ liệu selector của decorator của component. app-root có thể được sử dụng bởi tài liệu gốc của ứng dụng, src/index.html như được chỉ định bên dưới.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

app.component.html là template HTML được liên kết với component. Template của component được chỉ định bằng cách sử dụng siêu dữ liệu templateUrl của decorator @Component.

app.component.css là style CSS được liên kết với component. Style của component được chỉ định bằng cách sử dụng siêu dữ liệu styleUrls của decorator @Component .

Thuộc tính title của AppComponent có thể được sử dụng trong template HTML như sau:

{{ title }}

Template trong Angular

Về cơ bản, template là một tài liệu HTML. Template bao gồm tất cả các tính năng của HTML và cung cấp chức năng bổ sung để liên kết dữ liệu component vào HTML và tạo động các phần tử DOM HTML.

Khái niệm cốt lõi của template có thể được phân loại thành hai thành phần:

  • Data Binding (liên kết dữ liệu).
  • Directive (chỉ thị).

Data Binding

Được sử dụng để liên kết dữ liệu từ component với template.

{{ title }}

Ở đây, title là một thuộc tính trong component AppComponent và nó được liên kết với template bằng Interpolation.

Directive

Được sử dụng để thêm các logic cũng như cho phép tạo các phần tử DOM HTML phức tạp.

<p *ngIf="canShow">
   This sectiom will be shown only when the *canShow* propery's value in the corresponding component is *true* </p> 
<p [showToolTip]='tips' />

Ở ví dụ trên, ngIf  và showToolTip là các chỉ thị. ngIf chỉ tạo phần tử DOM nếu canShow là true. Tương tự, showToolTipchỉ thị thuộc tính, bổ sung chức năng tooltip cho phần tử p.

Khi người dùng di chuột qua thẻ p, một tooltip sẽ được hiển thị. Nội dung của tooltip đến từ thuộc tính tips của component tương ứng của nó.

Module trong Angular

Module về cơ bản là một tập hợp các tính năng/chức năng liên quan. Module nhóm nhiều component và service vào một ngữ cảnh duy nhất.

Ví dụ, chức năng liên quan đến animation có thể được nhóm thành một module duy nhất và Angular đã cung cấp một module cho chức năng liên quan đến animation là BrowserAnimationModule.

Một ứng dụng Angular có thể có nhiều module nhưng chỉ có một module được đặt làm module gốc (root module), module này sẽ khởi động ứng dụng và sau đó gọi các module khác khi cần thiết.

Một module cũng có thể được cấu hình để truy cập chức năng từ module khác. Tóm lại, component từ module này có thể truy cập component và service từ module khác.

Sơ đồ sau mô tả sự tương tác giữa các module và các component của nó.

Module trong Angular

Hãy xem module gốc của ứng dụng ExpenseManager của chúng ta.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Trong đó:

  • NgModule là decorator được sử dụng để chuyển đổi một lớp Typecript thuần túy thành module Angular.
  • Tùy chọn declarations được sử dụng để đưa các component vào module AppModule.
  • Tùy chọn bootstrap được sử dụng để thiết lập component gốc của module AppModule.
  • Tùy chọn providers được sử dụng để thêm các service cho module AppModule.
  • Tùy chọn imports được sử dụng để import các module khác vào module AppModule.

Service trong Angular

Service là lớp Typecript đơn giản cung cấp một chức năng rất cụ thể. Service sẽ thực hiện một nhiệm vụ duy nhất và làm nó tốt nhất. Mục đích chính của service là khả năng tái sử dụng. Thay vì viết một chức năng bên trong một component, việc tách nó thành một service sẽ làm cho nó có thể sử dụng được trong component khác.

Ngoài ra, service cho phép nhà phát triển tổ chức logic nghiệp vụ của ứng dụng. Về cơ bản, component sử dụng các service để thực hiện công việc của riêng nó.

Dependency Injection được sử dụng để khởi tạo service đúng cách trong component để nó có thể truy cập các service khi cần thiết mà không cần bất kỳ thiết lập nào.

Tiến trình xử lý của ứng dụng Angular

Chúng ta đã học các khái niệm cốt lõi của ứng dụng Angular. Hãy để chúng tôi giới thiệu toàn bộ tiến trình của một ứng dụng Angular điển hình.

Tiến trình xử lý của ứng dụng Angular

Trong đó:

src/main.ts là điểm vào của ứng dụng Angular. Nó khởi động AppModule (src/app.module.ts) là module gốc cho mọi ứng dụng Angular.

platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));

AppModule khởi động AppComponent (src/app.component.ts) là component gốc của mọi ứng dụng Angular.

@NgModule({  
   declarations: [ 
      AppComponent
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

AppModule tải các module thông qua tùy chọn import.

AppModule cũng tải tất cả service đã đăng ký bằng cách sử dụng Dependency Injection.

AppComponent hiển thị template của nó (src/app.component.html) và sử dụng style css tương ứng (src/app.component.css). Tên của AppComponentapp-root được sử dụng để đặt bên trong src/index.html.

<!doctype html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8"> 
      <title>ExpenseManager</title> 
      <base href="/"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="icon" type="image/x-icon" href="favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

AppComponent có thể sử dụng bất kỳ component nào khác đã đăng ký trong ứng dụng.

@NgModule({ 
   declarations: [ 
      AppComponent 
      AnyOtherComponent
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Component sử dụng component khác thông qua chỉ thị trong template của nó bằng cách sử dụng tên bộ chọn của component đích.

<component-selector-name></component-selector-name>

Ngoài ra, tất cả các service đã đăng ký đều có thể truy cập vào tất cả các component Angular thông qua Dependency Injection.

Angular
Bài Viết Liên Quan:
Giới thiệu Angular 8
Trung Nguyen 26/03/2021
Giới thiệu Angular 8

Angular 8 là một web framework dựa trên TypeScript để xây dựng các ứng dụng web và di động.

Hướng dẫn lập trình Angular từ đầu từng bước (part 3)
Trung Nguyen 22/03/2021
Hướng dẫn lập trình Angular từ đầu từng bước (part 3)

Trong hướng dẫn này, bạn sẽ tìm hiểu về điều hướng ứng dụng bằng Angular Router

Hướng dẫn lập trình Angular từ đầu từng bước (part 2)
Trung Nguyen 22/03/2021
Hướng dẫn lập trình Angular từ đầu từng bước (part 2)

Trong hướng dẫn này, bạn sẽ tìm hiểu kiến trúc ứng dụng Angular, cấu trúc một dự án Angular, định tuyến và điều hướng ứng dụng Angular.

Hướng dẫn lập trình Angular từ đầu từng bước (part 1)
Trung Nguyen 21/03/2021
Hướng dẫn lập trình Angular từ đầu từng bước (part 1)

Bạn tìm hiểu Angular là gì, so sánh các phiên bản Angular, thiết lập môi trường lập trình Angular và đã tạo ứng dụng Angular đơn giản đầu tiên.