1

ANGULA
R
 2

NỘI DUNG

• Tổng quan AngulaJS • Components

& Angular. • Modules
• Cài đặt môi trường. • Data Binding
• Routing
• Tạo mới
Angular Project. • Pipe
• Form – Validate Form
• Cấu trúc ứng
dụng.
<

TỔNG QUAN 3

• AngularJS (v1) :
là thư viện Java Script giốngnhư thư viện jQuery, Bootstrap- nghĩa là
để sử dụng nó trong trang Web ta chỉ cần chỉ đường dẫn đến nó (online
hoặc offline).
<script src="
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
>script>

• Angular dùng để tạo giao diện Web (FrontEnd), được phát triển bởi
Google.
 ANGULAJS & ANGULAR
4

• Angular (từ version 2 trở đi là JavaScript framework với rất nhiều tính
năng
và dịch vụ tích hợp. Muốn sử dụng ta phải cài đặt).

• Các phiên bản Angular (2,4,5,6,7,8,9,10).

• Angular version mới nhất hiện tại V10.0.7 cùng nhiều tools đi kèm (ES2015,
TypeScript, WebPack, Angular CLI).
 5

ANGULAJS & ANGULAR

• Angular được viết bằng ngôn ngữ Type Script : dễ viết, dễ đọc.

• Còn AngularJS thì được viết bằng Java Script.

• Kiến trúc của AngulaJS và Angular hoàn toàn khác nhau.

• Hiện nay, Google không còn hỗ trợ nâng cấp AngularJS nữa.
 6

SỰ KHÁC BIỆT GIỮA ANGULARJS &&

ANGULAR
• Bỏ $scope ( để liên kết Controller với View trong AngularJS) .

• Component- based:
Controller trong Angularjs đã bị thay thế bởi Component trong Angular.
Giờ đây, Component là building-block của một ứng dụng viết trên Angular.
Bạn sẽ tạo ra các Component để xây dựng nên ứng dụng của mình.
Một ứng dụng Angular sẽ có nhiều component.
 7

CÁC CÔNG CỤ LẬP TRÌNH

• NodeJS : https://nodejs.org/en/download/
bản mới nhất Latest LTS Version: 12.18.3 (includes npm 6.14.6)
NPM được tích hợp khi cài NodeJS
• VS Code /SublimeText/WebStorm…
• Angular CLI :
 MÔI TRƯỜNG LẬP TRÌNH ANGULAR
8

Muốn sử dụng Angular để lập trình Web, ta cần phải cài đặt :
 NodeJS : link https://nodejs.org/en/

 Các bạn nên cài đặt phiên bản 12.18.3

LTS
 9

CÀI ĐẶTMÔI TRƯỜNG

• Cài đặt : npm install -g @angular/cli@10.0.0.

Hoặc viết gọn hơn npm i –g

@angular/cli/@next

• Gở bỏ cài dặt angular cli : npm uninstall -g @angular/cli.

 10

CÀI ĐẶT MÔI TRƯỜNG

• Kiểm tra version : ng version

• Tạo mới angular project : ng new <project_name>
• Chạy : ng serve hoặc npm start
• Mở trình duyệt và gỏ : http://localhost:4200
• Cổng default là 4200, tuy nhiên nếu port này bị chiếm ta có thể
chạy
port khác : npm start --port 4000
KIỂM TRA CÀI ĐẶT 11
CẤU TRÚC FILE CỦA ANGULAR PROJECT 12

Angular là framework dùng để build một ứng dụng SPA.

 13

CẤU TRÚC FILE CỦA ANGULAR PROJECT

@ TypeScript Decorator
CẤU TRÚC FILE CỦA ANGULAR PROJECT 14
 15

CẤU TRÚC ỨNG DỤNG ANGULAR

Khi chạy ứng dụng, main.ts sẽ start trước

 16

CẤU TRÚC FILE CỦA ANGULAR PROJECT

App.component là root component

 17

CẤU TRÚC ỨNG DỤNG ANGULAR

Bootstrap : loading
 18

CẤU TRÚC ỨNG DỤNG ANGULAR

• Mở project vừa tạo bằng IDE tùy thích (VSCode, SublimeText…)
• Các tài nguyên của ứng dụng nằm trong folder src.
• Muốn cài đặt bootstrap :
npm i --save-exact bootstrap font-awesome
hoặc npm i -save bootstrap jquery

• Sử dụng style cho ứng dụng :

Mở file styles.css và thêm vào 2 dòng :
@import '~bootstrap/dist/css/bootstrap.css';
@import '~font-awesome/css/font-
awesome.css';
 19

TẠO MỚI ANGULAR PROJECT

Syntax : ng new <project_name>

Angular sẽ hỏi bạn có muốn add angular router vào project

hay không? (y/N). Bạn có thể gỏ Y nếu muốn.
 20

TEST
PROJECT
• Ta có thể chạy test nhanh dự án dựa tạo :
• Syntax : ng serve hoặc npm start

Project chạy port 4200, đây là cổng mặc định.

Muốn chạy port khác, ta gỏ : ng serve --port xxxx

 21

TẠO PROJECT

Bạn muốn chọn định dạng stylesheet format nào ? Default là CSS

Cuối cùng nhấn enter , chờ nó tạo project mới.

 22

MÀN HÌNH KẾT QUẢ

 23

ĐỔI PORT

ng serve –port 4000

 38

DATA BINDING
• Property binding, Attribute binding

• Two way binding

• Event binding
 39

DATA BINDING
• Là kỹ thuật , trong đó dữ liệu sẽ được đồng bộ hóa giữa Component -
View và ngược lại.

• Data Binding trong Angular có thể chia làm 2 loại :

 One way binding .
 Two-way binding
 40

ONE WAY BINDING

• Dữ liệu flow từ component  View hoặc từ View 
component.
From Component to View :
• Để bind data từ component  view , ta sử dụng
interpolation & property binding.
• Syntax : {{template expression}} nội dung trong
{{}}
gọi là template expression
 41

ONE WAY DATA BINDING

• Data flow từ 1 hướng từ component  view hoặc ngược
lại.
• Từ component  view :
• Ta dung interpolation và property binding

• {{ }} : interpolation
• {{ template expression }}

• Thí dụ : Welcome, {{ firstName }} {{ lastName }}

 42

ONE WAY DATA BINDING

• Trong app.component.ts, ta gỏ :
• Export class AppComponent {
• firstName = ‘Nguyen’;
• lastName = ‘Ngo’ ;
• }

Trong app.component.html , ta gỏ {{firstName}} –

{{lastName}}
 43

PROPERTY
BINDING
• Cho phép chúng ta bind thuộc tính của HTML elements với thuộc tính
của
component.
• Chúng ta có thể set các thuộc tính như class, href, ,src, textContent… bằng
property binding.
• Ta cũng có thể sự dụng property binding để set các custom components
hoặc directives (thuộc tính với decorated @input).
• Syntax : [binding-target]=”binding-source”
 44

PROPERTY
•
•
Thí dụ :
<h1 [innerText] = ‘title’></h1>
BINDING
• <h2>Example </h2>
• <button [disabled] = “isDisabled”>Go</button>
• Trong AppComponent.ts :
• Export class AppComponent {
• title = ‘Manager’ ;
• isDisabled = true;

• }
 45

EVENT
BINDING
 46

EVENT
BINDING
• Syntax : (<target-event>) = ‘function’

• Thí dụ :
• <button (click) = ‘clickMe()’>Save</button>
• <p> You have clicked {{ checkCount}} </p>

• App.component.ts
• clickCount =0;
• clickMe() { this.clickCount++;
}
 47

NGMODEL
• Angular thực hiện two way binding DIRECTIVE
bằng ngModel.
• nó bind các thành phần của Form element như : input,select,selectcarea.

• Ta cần phải import FormsModule package vào trong Angular module.

• import { FormsModule } from '@angular/forms';

• Sau đó ta có thể sử dụng two way binding bằng

• <input type="text" name="value" [(ngModel)]="value">
 48

TWO WAY BINDING [()]

Property
binding

[(ngModel)] Two way

binding

Event
binding
 COMPONENT 24

• Component là một lớp, nó thường hiểu như là controller tương tác giao diện người
dùng. Nó thay thế controller trong AngularJS
• Một component thường có 3 thành phần chính là code TypeScript, template HTML
và CSS.
 25

COMPONENT
 26

COMPONENT
 27

COMPONENT
• Component được một Module nạp và khởi chạy.

• Một angular project có thể có nhiều component. Component default là

AppComponent.

• Khi ta tạo thêm các component khác thì những component này đều là con
của
AppComponent.
 HOME.COMPONENT.TS 28

Ta tạo Home component và thêm

3 thuộc tính cho nó.
 29

HOME.COMPONENT.HTML

Ta truyền dữ liệu từ component  View

 COMPONENT
30

App.component là component default

Ta đã tạo thêm 3 component :

home, about, login.

Các component này nằm trong

app folder.
COMPONENT
31
 32

Để chạy component nào, ta gỏ tên COMPONENT

component trên trình duyệt
 33

TRUYỀN DỮ LIỆU GIỮA COMPONENTS

Angular cung cấp 2 decorator để
truyền dữ liệu giữa các Component
là @Input và @Output
@Input : nhận giá trị truyền vào
component
 34

TRUYỀN DỮ LIỆU GIỮA COMPONENTS

@Output : Bắt sự kiện cho eventEmmiter được truyền vào component. Nghĩa là mỗi khi
có sự kiện xảy ra trên View như onClick, onChange, onMouseMove… thì Output sẽ bắn
ngược lại event cho component cha.
 ROUTIN
35

Ta định nghĩa 3 đường dẫn đến 3

component tương ứng để khỏi phải
gỏ tên component trên trình duyệt
như ở slide trước.
 36

ROUTIN
G
 37

ROUTIN
G
Ta chèn thẻ này vào
app.component.html

<router-outlet></router-outlet>
 49

FORM ANGULAR
Angular 10 cung cấp 2 cách làm việc với Form :
• Dựa vào template form (template-driven form)
• Reactive Form

• Template-driven forms là cách tạo forms dựa vào template (giống như
AngularJS).
• Chúng ta thêm các directives và hành vi vào template , Angualr sẽ tự
động tạo form để quản lý và sử dụng.
 FORM 50

Step 1: Mở
app.module.ts Import
FormsModule từ
package @angular/forms
 51

FORM
 PIPE 52

Pipe được dung để chuyển đổi dữ liệu mà ta hiển thị lên template cho người
dung có thể hiểu được.

Thí dụ : định dạng ngày tháng kiểu Date, tiền tệ,…

 53

PIPE
 54

PIPE
 55

PIPE
PIPE 56