Module 4: Angular

Get Started. It's Free
or sign up with your email address
Module 4: Angular by Mind Map: Module 4: Angular

1. tow way binding

2. Thành phần của angular

2.1. ng-app:directive này định nghĩa và liên kếtmột ứng dụng AngularJS tới HTML.

2.2. ng-model: directive này gắn kết giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML.

2.3. ng-bind: directive này gắn kết dữ liệu ứng AngularJS

3. TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript , thuần theo hướng đối tượng

3.1. Lợi ích

3.1.1. Dễ phát triển dự án lớn

3.1.2. Nhiều Framework lựa chọn

3.1.3. Hô trợ các tính năng của Javascript phiên bản mới nhất

4. Khái niệm :Angular là một Javascript framework để xây dựng những ứng dụng phía client sử dụng HTML, CSS và một ngôn ngữ lập trình như Javascript

4.1. Lợi ích

4.1.1. Angular hoạt động theo thiết kế module

4.1.2. Angular làm cho HTML của chúng ta trở nên linh hoạt hơn.

4.1.3. Angular có cơ chế binding data mạnh mẽ

4.1.4. Angular hỗ trợ việc giao tiếp với những back- end service

5. Angular Overview

5.1. Cách nhúng boostrap :

5.1.1. Nhúng vào file index

5.1.2. Chạy câu lệnh npm install --save boostrap

5.1.3. Nhúng vào file stylé và file scripts

5.1.4. npm install jquery --save

5.2. Cách tạo project angular

5.2.1. ng new <ten>

5.2.2. chạy serve : ng serve

5.3. Form

6. Căn bản về UI/UX

6.1. Mô hình chữ F(F-Pattern)

6.1.1. Đặt những nội dung vào vùng nóng của mô hình chữ F

6.1.2. F-Pattern là một mô hình mô tả cách thức thông thường mà mắt người thường đảo qua các khối nội dung trên một trang web

6.2. 10 nguyên tắc thiết kế kiểu

6.2.1. Có nhiều kiểu dáng chữ, khoảng cách chữ

6.2.2. Kiểu trống ,canh lề , vấn đề kích cỡ . khả năng đọc, màu sắc nhóm

7. TypeScript

7.1. Cách cài đặt

7.1.1. npm install -g typescript

8. Angular component

8.1. Component là gì ?

8.1.1. Component có thể chứa component khác

8.1.2. Component có thể rất linh hoạt

8.1.3. Điều chỉnh 1 phần của màn hình (view)

8.1.4. Component có nhận tham số

8.2. Thành phần của componet

8.2.1. Component template

8.2.2. Component class

8.2.3. metadata

8.3. Lợi ích của việc sử dụng component

8.3.1. Tái sử dụng code

8.3.2. Dễ quản lí code

8.4. Câu lệnh tạo component

8.4.1. Tạo các component khác đều phải nhúng vào file html của component gốc mới hiển thị được

8.4.2. ng g component <ten-component>

8.4.3. ng g c <tencomponent>

8.5. Có 4 file : css,html,ts,và file spec.ts(file này dùng để test)

8.6. Bind dữ liệu

8.6.1. Angular có cách code Binding (kết nối giữa html và data) dữ liệu theo kiểu 2 chiều, nghĩa là html input thay đổi thì biến javascript sẽ ngay lập tức nhận được giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html thay đổi theo

8.6.2. Các cách dùng Bind

8.6.2.1. Bind một chuỗi ra ngoài màn hình html

8.6.2.1.1. sử dụng 2 dấu ngoặc nhọn {{TenBien}}

9. Angular Form

9.1. Form validation

9.1.1. Cải thiện chất lượng dữ liệu tổng thể bằng cách xác nhận tính chính xác của người dùng về tính chính xác và đầy đủ

9.2. Template-Driven Forms

9.2.1. Template

9.2.2. Import APIs cho Template-driven forms

9.2.3. ngForm và ngModel directives

9.2.4. ngModelGroup directive

9.2.5. Submit form

9.2.6. Template-driven error validation

9.3. Reactive Forms Trong Angular

9.3.1. Các thành phần cơ bản của form

9.3.1.1. AbstractControl là một abstract class cho 3 lớp con form control: FormControl, FormGroup, và FormArray. Nó cung cấp các hành vi, thuộc tính chung cho các lớp con.

9.3.1.2. FormControl là đơn vị nhỏ nhất, nó lưu giữ giá trị và trạng thái hợp lệ của một form control. Tương ứng với một HTML form control như input, select.

9.3.1.3. FormGroup nó lưu giữ giá trị và trạng thái hợp lệ của một nhóm các đối tượng thuộc AbstractControl – có thể là FormControl, FormGroup, hay FormArray – đây là một dạng composite. Ở level cao nhất của một form trong component của bạn là một FormGroup.

9.3.1.4. FormArray nó lưu giữ giá trị và trạng thái hợp lệ của một mảng các đối tượng thuộc AbstractControl giống như FormGroup. Nó cũng là một dạng composite. Nhưng nó không phải là thành phần ở level cao nhất.

9.3.2. Template

9.3.3. Import APIs cho Reactive forms

9.3.4. Khởi tạo form trong Component

9.3.5. Binding controls

9.3.6. Reactive Forms Validator

9.3.7. Form Builder

10. Route

10.1. Routing là cách để chúng ta di chuyển giữa các trang trong một ứng dụng web, Để cài toàn bộ route trong ứng dụng angular chúng ta cần tạo ra một đối tượng Json chứa các thụộc tính sau

10.1.1. Path: đường dẫn ULR hiện tại

10.1.2. Component Ứng với đường dẫn nào thì load với đường dẫn đấy

10.1.3. redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng. Ví dụ, khi người dùng gõ URL linh tinh, chúng ta muốn chuyển hướng và load trang Home hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Home hoặc 404 vào redirectTo

10.1.4. pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào. khi giá trị là full thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong bộ JSON Router. Còn khi giá trị là prefix thì chuỗi đầu tiên của url (dấu sược đầu tiên) sẽ được kiểm tra. Mặc định nếu không nói gì thì prefix sẽ được chọn.

10.2. Service

10.2.1. Một service là một đoạn code trong ứng dụng Angular mà phục vụ cho tác vụ gì đó, xử lý code logic gì đó. Ví dụ handle (xử lý) data gửi nhận từ/đến một API, hoặc cung cấp hàm authenticate...

10.2.2. vd:import { Injectable } from '@angular/core'; @Injectable() export class TimeService { constructor() { } getTime(){ return `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`; } }

11. Module và Dependency Injection

11.1. Khi một class muốn được gọi (được tiêm vào, inject vào) một component cần gọi hàm bên trong nó, chúng ta cần dùng đến Dependency Injection. Và rất đơn giản chỉ cần gọi ở hàm khởi tạo (constructor) của component là sẽ tiêm được service vào để dùng nó bên trong component đó.

11.2. Câu lệnh điều kiện vòng lặp

11.2.1. *ngIf

11.2.2. *ngFor

12. Kết nối với back-end

13. Truyền dữ liệu trong angular

13.1. property binding

13.2. string interpolation

13.3. even binding