Lập trình Angular 8 phần 1

Bản phát hành mới nhất này của Angular Framework của Google chứa nhiều tính năng hấp dẫn cùng với một số cải tiến về các tính năng hiện có. Angular 8 đã xuất hiện với một loạt quy trình làm việc và danh sách mới các tính năng mạnh mẽ và quan trọng mà các nhà phát triển Angular sẽ đánh giá cao nó như một khung cốt lõi như Angular Material Library và cùng với giao diện dòng lệnh. Google cũng đã kích hoạt Angular Console như một đối tác khởi chạy chính để chạy các Dự án Angular, tích hợp Angular với Firebase với sự trợ giúp của các gói angle / fire, cùng với hỗ trợ IDE và NativeScript tích hợp StackBlitz để xây dựng các ứng dụng di động gốc với Angular. Vì vậy, theo một cách đơn giản, chúng ta có thể nói rằng Angular 8 cung cấp một nhóm các thư viện và khuôn khổ thế hệ mới nhằm hỗ trợ sự phát triển của các

Angular là gì?

Về cơ bản, Angular là một framework phía máy khách mã nguồn mở, dựa trên JavaScript giúp chúng ta phát triển một ứng dụng dựa trên web. Trên thực tế, Angular là một trong những khuôn khổ tốt nhất để phát triển bất kỳ Ứng dụng Trang đơn hoặc Ứng dụng SPA nào. Định nghĩa về Angular theo tài liệu chính thức của Angular trên trang web angle.io

Angular là một khung cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML làm ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để thể hiện các thành phần ứng dụng của bạn một cách rõ ràng và ngắn gọn. Liên kết dữ liệu và chèn phụ thuộc của nó loại bỏ phần lớn mã bạn hiện phải viết. Và tất cả đều diễn ra trong trình duyệt, khiến nó trở thành đối tác lý tưởng với bất kỳ công nghệ máy chủ nào. ” - (lịch sự - Hội nghị Angular, 2014).

Vì vậy, trong một từ rất đơn giản, Angular là

Khung cấu trúc dựa trên MVC
Khuôn khổ để phát triển ứng dụng dựa trên SPA (Ứng dụng một trang)
Hỗ trợ các tính năng tạo khuôn mẫu phía máy khách.
Cung cấp cho chúng tôi cơ sở để thực hiện kiểm thử đơn vị để mã của chúng tôi có thể được kiểm tra trước khi triển khai.

Lợi ích của việc sử dụng Angular

Angular là một phía máy khách dựa trên một khung mã nguồn mở do Google duy trì. Thư viện có khả năng đọc trang HTML lần đầu tiên, trang này cung cấp các thuộc tính thẻ tùy chỉnh bổ sung được nhúng vào đó. Các thuộc tính đó được hiểu là các chỉ thị hướng dẫn Angular Framework liên kết các phần đầu vào hoặc đầu ra của trang với một mô hình được đại diện bởi các biến JavaScript tiêu chuẩn. Giá trị của các biến JavaScript đó có thể được đặt theo cách thủ công trong mã hoặc được truy xuất từ các tài nguyên JSON tĩnh hoặc động bao gồm bất kỳ nhà cung cấp dữ liệu phía máy chủ nào như REST API hoặc các tài nguyên khác.

Các lợi ích chính của việc sử dụng Angular trong các ứng dụng web là

Angular sửa đổi trực tiếp DOM trang thay vì thêm mã HTML bên trong nhanh hơn.

Liên kết dữ liệu không xảy ra trên mỗi điều khiển hoặc thay đổi giá trị (không có trình xử lý thay đổi) mà tại các điểm cụ thể của quá trình thực thi mã JavaScript. Điều đó cải thiện đáng kể hiệu suất, vì một bản cập nhật Mô hình / Chế độ xem hàng loạt duy nhất sẽ thay thế hàng trăm sự kiện thay đổi dữ liệu theo tầng.
Không cần sử dụng các chức năng có thể quan sát được. Angular phân tích DOM trang và xây dựng các liên kết dựa trên các thuộc tính phần tử dành riêng cho Angular. Điều đó yêu cầu viết ít hơn, có nghĩa là mã sạch hơn, dễ hiểu hơn và có ít lỗi hơn.
Các tính năng mở rộng như chèn phụ thuộc, định tuyến, hoạt ảnh, đóng gói chế độ xem và hơn thế nữa đều có sẵn.
Nó được hỗ trợ bởi IntelliJ IDEA và Visual Studio .NET IDE.
Nó được hỗ trợ bởi Google và một cộng đồng phát triển tuyệt vời.
Angular là một giải pháp toàn diện để phát triển front-end nhanh chóng. Nó không cần bất kỳ plugin hoặc khuôn khổ nào khác.
Angular đã sẵn sàng để kiểm tra đơn vị và đó là một trong những lợi thế hấp dẫn nhất của nó.

Tại sao Angular được gọi là Framework?

Vì vậy, trước khi bắt đầu thảo luận về Angular, trước đó chúng ta cần hiểu Angular là gì? Tại sao chúng tôi gọi Angular là một Framework? Theo định nghĩa của từ điển, khung là một cấu trúc hỗ trợ thiết yếu. Định nghĩa câu đơn này tóm tắt rất độc đáo về Angular. Nhưng bất chấp điều đó, Angular cung cấp một hệ sinh thái rộng lớn và hữu ích, trong đó chúng ta có thể tìm thấy nhiều công cụ và tiện ích mới, qua đó chúng ta có thể giải quyết vấn đề của mình và cũng có thể xem xét chúng cho cấu trúc và thiết kế ứng dụng mới. Vì vậy, nếu chúng ta muốn làm cho cuộc sống của mình trở nên khó khăn và phức tạp hơn, thì chúng ta cần phải viết và phát triển khuôn khổ của mình.

Vì vậy, trong cuộc sống thực tế, không thể xây dựng một khuôn khổ cho chính mình. Đó là lý do tại sao cần sử dụng bất kỳ khuôn khổ hiện có nào hỗ trợ các ý tưởng và yêu cầu của chúng tôi. Một khung công tác tốt và ổn định như Angular đã được thử nghiệm và hiểu rõ bởi những người khác. Việc sử dụng các khuôn khổ không phải là hiếm; nhiều lập trình viên từ tất cả các môi trường mã hóa dựa vào chúng. Các nhà phát triển ứng dụng kinh doanh sử dụng các khuôn khổ, chẳng hạn như Microsoft Entity Framework, để giảm bớt khó khăn của họ và tăng tốc độ phát triển khi xây dựng các ứng dụng liên quan đến cơ sở dữ liệu. Ví dụ, các lập trình viên Java sử dụng khung LibGDX để giúp họ tạo trò chơi. Tôi hy vọng tôi đã giải thích cho bạn sự cần thiết của một framework và cụ thể hơn, AngularJS là một lựa chọn tuyệt vời.

Angular 8 có gì mới?

Angular 8 đã chính thức được công bố chỉ trong vài ngày trước, tức là vào ngày 23 tháng 5 năm 2019. Phiên bản phát hành mới không phải là một bản cập nhật lớn phức tạp. Tuy nhiên, phiên bản này vẫn chứa nhiều tính năng bao gồm một số tính năng chọn tham gia. Ngoài ra, phiên bản này có một số tính năng mới và cũng là nâng cấp của các tính năng của phiên bản trước. Một số tính năng quan trọng có trong các phiên bản Angular 8 là:

Hỗ trợ Typecript 3.4 trở lên
Hỗ trợ công cụ kết xuất Ivy
Giới thiệu công cụ xây dựng mới có tên Bazel như một tính năng chọn tham gia
Cung cấp các tùy chọn tải khác biệt để tối ưu hóa hiệu suất
Những thay đổi trong khái niệm tải mô-đun động
Cung cấp hỗ trợ cho Web Worker
Cung cấp mẫu SVG hỗ trợ

Cài đặt cho Angular 8

Nếu chúng ta muốn phát triển một ứng dụng trong Angular 8, thì chúng ta cần phải cấu hình và cài đặt các điều kiện tiên quyết dưới đây cho các môi trường của Angular 8:

Node JS mới nhất tức là LTA 10.16 trở lên
Cài đặt Typecript phiên bản 3.4 trở lên
Cần cài đặt bất kỳ IDE nào như Visual Studio Code hoặc Microsoft Visual Studio 2015 trở lên

Ngoài ra, cần cài đặt Angular CLI để chạy dự án Angular

TypeScript là gì?

Như tất cả, chúng ta biết rằng Angular 8 hoặc các phiên bản trước đó (lên đến Angular 2.0) phụ thuộc rất nhiều vào ngôn ngữ Typecript. Vì vậy, cần phải hiểu một số khái niệm cơ bản về Typecript. Typecript về cơ bản là một ngôn ngữ kịch bản siêu tập hợp của JavaScript. Vì vậy, theo Google, định nghĩa của Typecript là

“TypeScript là một ngôn ngữ lập trình mã nguồn mở và miễn phí được phát triển và duy trì bởi Microsoft. Nó là một tập hợp siêu cú pháp nghiêm ngặt của JavaScript và thêm tính năng nhập tĩnh tùy chọn vào ngôn ngữ. Anders Hejlsberg, kiến trúc sư chính của C # và người tạo ra Delphi và Turbo Pascal, đã nghiên cứu sự phát triển của TypeScript. ”

Typecript cung cấp nhiều đặc quyền hơn liên quan đến lập trình khai báo như giao diện, lớp, mô-đun, kiểu chữ tĩnh trên thư viện Javascript phổ biến và mã cho các nhà phát triển. Typecript hoàn toàn dựa trên khái niệm OOPs. Trên thực tế, về cơ bản, Typescript được hoạt động như một trình chuyển tiếp. Mặc dù chúng ta có thể phát triển và biên dịch mã trong Typescript. Nhưng nó thực sự là một bộ chuyển tiếp. Vì mã được viết bằng Typescript đã được chuyển đổi thành một ngôn ngữ khác như Javascript sau khi biên dịch. Và sau đó mã dựa trên Javascript đã biên dịch được chạy trong trình duyệt cho ứng dụng. Vì vậy, trong một từ đơn giản, Transpiler có nghĩa là về cơ bản nó chuyển đổi ngôn ngữ này sang ngôn ngữ khác.

Một số cú pháp cơ bản của TypeScript

Trong phần này, chúng tôi sẽ trình bày một số cú pháp hoặc chú thích cơ bản trong Typecript so với JavaScript.

JavaScript

var num = 5;
var num = "Tienanhvn";
var anydata = 123;
var list = [1,2,3];

TypeScript

var num: number = 5;
var num : string = "tienanhvn";
var anyData: Array<number> = [1,2,3];

Bảng trên cho thấy một số cú pháp cơ bản liên quan đến khai báo biến hoặc khai báo hàm. Mặc dù vậy, chúng ta cũng có thể tạo bất kỳ lớp nào và các chức năng hoặc đối tượng liên quan của nó trong Typescript.

Tạo dự án mới bằng Angular CLI

Nếu chúng ta muốn tạo một dự án mới trên Angular 8, chúng ta có thể sử dụng Angular CLI Commands cho việc đó. Vì vậy, tạo một dự án mới bằng Angular CLI, chúng ta cần thực hiện các bước sau:

Mở Command Prompt và tạo một thư mục

Bây giờ hãy chạy lệnh - AngularDemo mới

Bây giờ, Đặt “N” cho Bạn có muốn Thêm các tùy chọn Định tuyến Angular (Vì nó cần phải là Y khi chúng ta muốn sử dụng Định tuyến trong các ứng dụng của mình).

Chọn kiểu biểu định kiểu dưới dạng CSS và sau đó nhấn enter

Bây giờ, Angular CLI sẽ tạo các tệp cần thiết để chạy các Dự án Angular cùng với các gói liên quan sẽ được tải xuống trong thư mục node_modules.

Giới thiệu về cấu trúc thư mục dự án

Trong quá trình tạo Dự án Angular, Angular CLI tạo một thư mục mới theo tên dự án, tức là Angular8Demo. Vì vậy, bây giờ hãy mở dự án đó trong bất kỳ trình soạn thảo mã nào như Visual Studio Code hoặc Microsoft Visual Studio. Thư mục dự án đã nói chứa cấu trúc thư mục dưới đây:

Dự án đã tạo chứa các thư mục sau:

e2e - Thư mục này dành cho mục đích thử nghiệm từ đầu đến cuối. Nó chứa các tệp cấu hình liên quan đến việc thực hiện kiểm thử đơn vị của các dự án.

node_modules - Thư mục này chứa các gói đã tải xuống theo cấu hình.

src - Thư mục này chứa mã nguồn thực. Nó chứa 3 thư mục con là -

app - Thư mục ứng dụng chứa các tệp liên quan đến dự án Angular như các thành phần, tệp HTML, v.v.

asset - Thư mục nội dung chứa bất kỳ tệp tĩnh nào như hình ảnh, biểu định kiểu, tệp thư viện javascript tùy chỉnh (nếu có yêu cầu), v.v.

environments - Thư mục môi trường chứa các tệp liên quan đến môi trường được yêu cầu trong quá trình triển khai hoặc xây dựng các dự án.

Giới thiệu về các tệp cấu hình khác nhau

Khi chúng tôi tạo bất kỳ dự án dựa trên Angular nào bằng Angular CLI, sau đó mỗi lần nó sẽ tạo ra 3 tệp cấu hình khác nhau giúp chúng tôi định cấu hình các dự án cùng với các phụ thuộc liên quan của nó. Các tệp cấu hình này là

tsconfig.json - Nếu tệp tsconfig.json tồn tại trong thư mục gốc của dự án, điều đó có nghĩa là dự án về cơ bản là một dự án TypeScript. Tệp tsconfig.json chỉ định các tệp gốc và các tùy chọn trình biên dịch cần thiết để biên dịch dự án. Mẫu tsconfig.json như bên dưới

{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}

package.json - package.json về cơ bản là một tệp JSON chứa tất cả thông tin liên quan đến các gói cần thiết cho dự án. Ngoài ra, với sự trợ giúp của tệp cấu hình này, chúng tôi có thể duy trì Tên dự án và phiên bản liên quan của nó bằng cách sử dụng thuộc tính “name” và “version”. Ngoài ra, chúng tôi có thể cung cấp định nghĩa xây dựng của dự án bằng cách sử dụng tệp này

{
"name": "angular8-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.2",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}

Angular.json - tệp angle.json là tệp JSON dựa trên Môi trường ứng dụng Angular chứa tất cả thông tin liên quan đến việc xây dựng và triển khai dự án. Nó cho hệ thống biết tệp nào cần thay đổi khi chúng ta sử dụng lệnh ng build hoặc ng serve.

main.ts - Tệp main.ts đóng vai trò là điểm nhập chính của ứng dụng Angular của chúng tôi. Tệp này chịu trách nhiệm về hoạt động bootstrapper của các mô-đun Angular của chúng tôi. Nó chứa một số câu lệnh quan trọng liên quan đến các mô-đun và một số cấu hình thiết lập ban đầu như

enableProdMode - Tùy chọn này được sử dụng để tắt chế độ phát triển của Angular và bật chế độ Productions. Tắt chế độ Phát triển sẽ tắt các xác nhận và các kiểm tra liên quan đến mô hình khác trong khuôn khổ.

platformBrowserDynamic - Tùy chọn này là bắt buộc để khởi động ứng dụng Angular trên trình duyệt.

AppModule - Tùy chọn này cho biết mô-đun nào hoạt động như một mô-đun gốc trong các ứng dụng.

môi trường - Tùy chọn này lưu trữ các giá trị của các hằng số môi trường khác nhau.

ngModule Metadata

Trong mọi ứng dụng Angular, cần có ít nhất một tệp mô-đun góc. Một ứng dụng Angular có thể chứa nhiều hơn một mô-đun Angular. Mô-đun Angular là một quá trình hoặc hệ thống để tập hợp nhiều phần tử góc cạnh, như các thành phần, chỉ thị, đường ống, dịch vụ, v.v. để các phần tử Angular này có thể được kết hợp theo cách mà tất cả các phần tử có thể liên quan với nhau và cuối cùng tạo ra một ứng dụng .

Trong Angular, @NgModule decorator được sử dụng để xác định lớp mô-đun Angular. Đôi khi, lớp này được gọi là lớp NgModule. @NgModule luôn nhận một đối tượng siêu dữ liệu, đối tượng này cho Angular biết cách biên dịch và khởi chạy ứng dụng trong trình duyệt. Vì vậy, để xác định mô-đun Angular, chúng ta cần xác định một số bước như sau:

Đầu tiên, chúng ta cần nhập Angular BrowserModule vào tệp mô-đun Angular ở phần đầu. Lớp BrowserModule này chịu trách nhiệm chạy ứng dụng trong trình duyệt.

Trong bước tiếp theo, chúng ta cần khai báo các phần tử Angular giống như component bên trong mô-đun Angular để các thành phần hoặc phần tử đó có thể được liên kết với mô-đun Angular.

Trong bước cuối cùng, chúng ta cần đề cập đến một thành phần Angular làm thành phần gốc cho mô-đun Angular. Thành phần này luôn được biết đến như một thành phần bootstrap. Vì vậy, một mô-đun Angular có thể chứa hàng trăm thành phần. Nhưng trong số các thành phần đó, một thành phần cần phải là thành phần gốc hoặc thành phần bootstrap sẽ được thực thi đầu tiên khi mô-đun Angular sẽ được khởi động trong trình duyệt.

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 { }

Tuesday, March 30, 2021

Lập trình Angular 8 phần 1