PHÁT TRIỂN WEB

KINH DOANH NÂNG CAO

GV: Nguyễn Quang Phúc
Phát triển web kinh doanh nâng cao:
NGULAR FRAMEWORK
Nguyễn Quang Phúc
phucnq@uel.edu.vn
 Phát triển web kinh doanh nâng cao 3

NỘI DUNG
01
Giới thiệu về Angular framework

02 Kiến trúc thành phần của Angular

03 Xây dựng ứng dụng với Angular

 Phát triển web kinh doanh nâng cao 4

1. Giới thiệu về Angular framework

Angular là gì?
ü Angular là một framework được phát triển bởi Google hỗ trợ xây dựng front-end
ứng dụng đa nền tảng: web, mobile, desktop app.
ü Angular được ứng dụng với mục đích xây dựng Single Page Application (SPA).
Lịch sử phát triển
ü AngularJS – 2010 (+ Javascript) ü Angular 9 – 2020 Feb
ü Angular 2 – 2016 (+ TypeScript) ü Angular 10 – 2020 Jun
ü Angular 4 – 2016 Dec ü Angular 11 – 2020 Nov
ü ... ü Angular 12 – 2021 May
ü Angular 13 – 2021 Nov
 Phát triển web kinh doanh nâng cao 5

2. Kiến trúc thành phần của Angular

ü Kiến trúc ứng dụng Angular bao gồm tập hợp các components được thiết kế tổ
chức theo dạng module. Một ứng dụng Angular có ít nhất một module gốc (root-
module) và nhiều module tính năng.
§ Components: định nghĩa views (templates) hiển thị dựa theo logic và dữ liệu
được xử lý.
§ Components sử dụng services. Lớp services cung cấp các chức năng cụ thể có
thể được tái sử dụng trong nhiều components.
Angular app Module
Module Module
Component

Import/Export

👥User
👥
Admin
Services

App (Root) Module

 Phát triển web kinh doanh nâng cao 6

2. Kiến trúc thành phần của Angular

Components

Component 1 (C1) Root Component

C2 C3
Component 1 Component 2 Component 3
Html Template
App (Root) Component Class
Component
Class Metadata
+
Template
HTML
Code: TypeScript
Data & Method + Information,
Decorator
 Phát triển web kinh doanh nâng cao 7

2. Kiến trúc thành phần của Angular

Services

Module

Component

Services Business logic

 Phát triển web kinh doanh nâng cao 8

2. Kiến trúc thành phần của Angular

ü Angular app: bao gồm 1 hoặc nhiều module
ü Module: bao gồm 1 hoặc nhiều components và services
§ Component: Html + Class
§ Service: business logic
 Phát triển web kinh doanh nâng cao 9

3. Xây dựng ứng dụng với Angular

Cài đặt
https://angular.io/ https://nodejs.org/

ü Nodejs
ü Npm package manager
ü Angular CLI
(npm install -g @angular/cli)
ü IDE: VS Code, WebStorm, …
 Phát triển web kinh doanh nâng cao 10

3. Xây dựng ứng dụng với Angular

Cài đặt
 Phát triển web kinh doanh nâng cao 11

3. Xây dựng ứng dụng với Angular

Tạo project
 Phát triển web kinh doanh nâng cao 12

3. Xây dựng ứng dụng với Angular

Tạo component

ng g c first
 Phát triển web kinh doanh nâng cao 13

3. Xây dựng ứng dụng với Angular

Tạo component
ng g c first
 Phát triển web kinh doanh nâng cao 14

3. Xây dựng ứng dụng với Angular

Sử dụng component
 Phát triển web kinh doanh nâng cao 15

3. Xây dựng ứng dụng với Angular

Binding
 Phát triển web kinh doanh nâng cao 16

3. Xây dựng ứng dụng với Angular

Binding ▷ Property
 Phát triển web kinh doanh nâng cao 17

3. Xây dựng ứng dụng với Angular

Binding ▷ Class
 Phát triển web kinh doanh nâng cao 18

3. Xây dựng ứng dụng với Angular

Binding ▷ Style
 Phát triển web kinh doanh nâng cao 19

3. Xây dựng ứng dụng với Angular

Binding ▷ Event Component

Template
HTML

Data binding

Event binding
Class
Code: TypeScript
Data & Method
 Phát triển web kinh doanh nâng cao 20

3. Xây dựng ứng dụng với Angular

Binding ▷ Event
 Phát triển web kinh doanh nâng cao 21

3. Xây dựng ứng dụng với Angular

Two-way binding
Component Component

Template name
HTML
Data binding

Data binding
address

Event binding

Event binding
Class
public name
Code: TypeScript
public address
Data & Method
 Phát triển web kinh doanh nâng cao 22

3. Xây dựng ứng dụng với Angular

Two-way binding
app.module.ts
 Phát triển web kinh doanh nâng cao 23

3. Xây dựng ứng dụng với Angular

Một số built-in directives ▷ ngIf directive
 Phát triển web kinh doanh nâng cao 24

3. Xây dựng ứng dụng với Angular

Một số built-in directives ▷ ngIf directive
 Phát triển web kinh doanh nâng cao 25

3. Xây dựng ứng dụng với Angular

Một số built-in directives
▷ ngSwitch directive
first.component.ts first.component.html
 Phát triển web kinh doanh nâng cao 26

3. Xây dựng ứng dụng với Angular

Một số built-in directives
▷ ngFor directive
first.component.ts

first.component.html
 Phát triển web kinh doanh nâng cao 27

3. Xây dựng ứng dụng với Angular

Component Interaction

AppComponent
(parent)
Data Data
@Output() @Input()

FirstComponent
(child)
 Phát triển web kinh doanh nâng cao 28

3. Xây dựng ứng dụng với Angular

Component Interaction
app.component.ts app.component.html
 Phát triển web kinh doanh nâng cao 29

3. Xây dựng ứng dụng với Angular

Component Interaction
first.component.ts first.component.html
 Phát triển web kinh doanh nâng cao 30

3. Xây dựng ứng dụng với Angular

Services

List-Component

Same data ???

Detail-Component
 Phát triển web kinh doanh nâng cao 31

3. Xây dựng ứng dụng với Angular

Services
list.component.ts list.component.html
 Phát triển web kinh doanh nâng cao 32

3. Xây dựng ứng dụng với Angular

Services
detail.component.ts detail.component.html
 Phát triển web kinh doanh nâng cao 33

3. Xây dựng ứng dụng với Angular

Services ng g s <name>

ProductService Tạo product service: ng g s product

product.service.ts
Injector

List-Component Detail-Component
 Phát triển web kinh doanh nâng cao 34

3. Xây dựng ứng dụng với Angular

Services
list.component.ts detail.component.ts
 Phát triển web kinh doanh nâng cao 35

3. Xây dựng ứng dụng với Angular

Services
▷ Get data via HTTP
app.module.ts

example.service.ts Interface: product.ts

 Phát triển web kinh doanh nâng cao 36

3. Xây dựng ứng dụng với Angular

Services
▷ Get data via HTTP
other-list.component.ts other-list.component.html
 Phát triển web kinh doanh nâng cao 37

3. Xây dựng ứng dụng với Angular

Services
▷ Get data via HTTP (handle error)
example.service.ts
 Phát triển web kinh doanh nâng cao 38

3. Xây dựng ứng dụng với Angular

Services
▷ Get data via HTTP (handle error)
other-list.component.ts other-list.component.html
 Phát triển web kinh doanh nâng cao 39

3. Xây dựng ứng dụng với Angular

Routing
/drinks /foods

Drinks Foods Drinks Foods

Drinks-Component Foods-Component
 Phát triển web kinh doanh nâng cao 40

3. Xây dựng ứng dụng với Angular

Routing
app-routing.module.ts app.module.ts
 Phát triển web kinh doanh nâng cao 41

3. Xây dựng ứng dụng với Angular

Routing
app.component.html
 Phát triển web kinh doanh nâng cao 42

3. Xây dựng ứng dụng với Angular

Routing
/drinks /test
app-routing.module.ts
Drinks Foods

Drinks-Component
 Phát triển web kinh doanh nâng cao 43

3. Xây dựng ứng dụng với Angular

Routing
/drinks /drinks/2

List Detail
Drinks Foods Drinks Foods

1: Heineken
2: Tiger
2: Tiger
3: Sapporo
4: Corona Extra
 Phát triển web kinh doanh nâng cao 44

3. Xây dựng ứng dụng với Angular

Routing

app-routing.module.ts
 Phát triển web kinh doanh nâng cao 45

3. Xây dựng ứng dụng với Angular

Routing
drinks.component.ts drinks.component.html
 Phát triển web kinh doanh nâng cao 46

3. Xây dựng ứng dụng với Angular

Routing
drinks-detail.component.ts drinks-detail.component.html
 Phát triển web kinh doanh nâng cao 47

3. Xây dựng ứng dụng với Angular

Làm việc với Forms

Form được dùng thu thập dữ liệu đầu vào của người dùng, dữ liệu này được gửi đến máy chủ
(server) để xử lý.
 Phát triển web kinh doanh nâng cao 48

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Tạo form đăng ký khóa học (có thể sử dụng bootstrap).
npm install -save bootstrap jquery
angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
 Phát triển web kinh doanh nâng cao 49

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Binding dữ liệu
app.module.ts
 Phát triển web kinh doanh nâng cao 50

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Binding dữ liệu
student.ts form.component.ts

form.component.html
 Phát triển web kinh doanh nâng cao 51

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Validation
State Class if true Class if false
The control has been visited. ng-touched ng-untouched
The control's value has changed. ng-dirty ng-pristine
The control's value is valid. ng-valid ng-invalid
 Phát triển web kinh doanh nâng cao 52

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Validation
 Phát triển web kinh doanh nâng cao 53

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Validation
 Phát triển web kinh doanh nâng cao 54

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Validation
 Phát triển web kinh doanh nâng cao 55

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Form Validation
 Phát triển web kinh doanh nâng cao 56

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Template Driven Forms
Form Validation
 Phát triển web kinh doanh nâng cao 57

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Tạo Form Model
app.module.ts

form.component.ts
form.component.html
 Phát triển web kinh doanh nâng cao 58

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Tạo Form Model
app.module.ts

form.component.ts
form.component.html
 Phát triển web kinh doanh nâng cao 59

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Nạp dữ liệu
form.component.ts form.component.html
 Phát triển web kinh doanh nâng cao 60

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Validation
form.component.ts form.component.html

name.invalid
 Phát triển web kinh doanh nâng cao 61

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Custom Validation
Ràng buộc tên không chứa ký tự đặc biệt
check.validator.ts form.component.html

form.component.ts
 Phát triển web kinh doanh nâng cao 62

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Custom Validation
Ràng buộc tên không chứa ký tự đặc biệt
check.validator.ts

form.component.ts
 Phát triển web kinh doanh nâng cao 63

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Cross Field Validation
Kiểm tra xác nhận mật khẩu
check.validator.ts
 Phát triển web kinh doanh nâng cao 64

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Cross Field Validation
Kiểm tra xác nhận mật khẩu
form.component.ts
 Phát triển web kinh doanh nâng cao 65

3. Xây dựng ứng dụng với Angular

Làm việc với Forms ▷ Reactive Forms
Cross Field Validation
Kiểm tra xác nhận mật khẩu
form.component.html
 Phát triển web kinh doanh nâng cao 66

3. Xây dựng ứng dụng với Angular

Làm việc với Forms
▷ Post form data to a server

https://firebase.google.com
 Phát triển web kinh doanh nâng cao 67

3. Xây dựng ứng dụng với Angular

Làm việc với Forms
▷ Tạo RESTfull API với Nodejs + MongoDB

…
 A
Q