Angular

angular

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

1. Tổng quan

1.1. Khái niệm

1.1.1. Là một javaScript framework cho front-end

1.1.2. Phân loại

1.1.2.1. angularJS viết bằng javascript

1.1.2.2. angular viết bằng TypeScript

1.2. Ứng dụng:

1.2.1. thiết kế single-page apps

1.2.2. Không load lại trang web khi sử dụng

1.3. Ưu điểm

1.3.1. Nâng cao năng suất lập trình

1.3.2. Có cấu trúc phát triển rõ ràng

1.3.3. kết nối dữ liệu dễ dàng

1.3.4. cộng đồng lớn

1.4. TypeScript

1.4.1. kiểu dữ liệu Typescrip

1.4.1.1. boolean

1.4.1.2. number

1.4.1.3. string

1.4.1.4. array

1.4.1.5. tuple

1.4.1.6. enum

1.4.1.7. void

1.4.1.8. interface

1.4.1.9. null

1.4.1.10. undifine

1.4.1.11. any

1.4.2. superset của javascript

1.4.3. promise

2. Cơ bản

2.1. component

2.1.1. KHái niệm

2.1.1.1. 1 component điều chỉnh 1 thành phần của màn hình (view)

2.1.1.2. giúp dễ quản lý, tái sử dụng

2.1.2. Cấu trúc

2.1.2.1. metadata

2.1.2.1.1. selector

2.1.2.1.2. templateUrl

2.1.2.1.3. styleUrl

2.1.2.2. template

2.1.2.3. component class

2.1.3. data binding

2.1.3.1. {{value}}

2.1.3.2. [property]="value"

2.1.3.3. (event)=handler

2.1.3.4. [(ng-model)] = "property"

2.1.4. tao component

2.1.4.1. ng g c component-name

2.1.4.2. ng generate create component-name

2.1.5. parent-children

2.1.5.1. Input

2.1.5.2. Output

2.2. directive

2.2.1. đưa ra chỉ dẫn để angular chuyển đổi template thành DOM

2.2.2. Phân loại

2.2.2.1. component = directive + template

2.2.2.2. attribute directive

2.2.2.3. structure directive

2.3. pipe

2.3.1. chuyển đổi dữ liệu để hiển thị sao cho người dùng hiểu được

2.3.2. {{value | pipe}}

2.4. service

2.4.1. một class đóng gói các chức năng con cho các phần còn lại của ứng dụng sử dụng

2.4.2. component cần nhúng để dùng

2.4.3. ng g s service-name

2.5. router

2.5.1. chuyển view này qua view khác

2.5.2. cú pháp: {path: 'url', component: componentName }

2.6. guard

2.7. module

2.7.1. tổ chức úng dụng thành các chức năng riêng biệt

3. angular CLI

3.1. npm install -g @angular/cli

3.2. ng new project-name

3.3. ng s -o

4. MVVM

4.1. View

4.1.1. giao diện ứng dụng

4.1.2. có thể thực hiện hành vi, phản hồi người dùng

4.1.3. nằm trong template

4.2. Model

4.2.1. truy suất, thao tác dữ liệu

4.2.2. là thành phần của component class

4.3. View/model

4.3.1. quản lý view và model

4.3.2. Để xử lý truy suất dữ liệu, thao tác trên view

5. Cấu trúc thư mục

5.1. e2e : chứa test

5.2. node-module: chứa module nodeJS cần thiết

5.3. src: chứa source code

5.3.1. app

5.3.1.1. app.component.ts

5.3.1.2. app.module.ts

5.3.1.3. app.component.html

5.3.2. assets

5.4. package.json

5.5. index.html

6. bootstrap

6.1. cài đặt

6.1.1. npm install bootstrap --save

6.1.2. npm install jquery --save

6.1.3. npm install popper.js --save

6.1.4. angular.json

6.1.4.1. "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ],

6.1.4.2. "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

6.2. dùng CDN, dán link vào index

7. Kết nối backend

7.1. API

7.2. dùng HttpClientModule

7.3. method

7.3.1. get

7.3.2. post

7.3.3. put/patch

7.3.4. delete

7.4. chú ý

7.4.1. Observable

7.4.2. subscribe

7.4.3. unsubscribe

8. UI/UX

8.1. F-pattern

8.1.1. dùng cho web nhiều text

8.2. Z-pattern

8.2.1. Không nhấn mạnh text

8.3. tham khảo: ui-pattern.com

8.4. tìm kiếm: ux best practice

9. Angular Form

9.1. template-driven form

9.1.1. Sủ dọng cho form đơn giản

9.1.2. Dùng FormsModule

9.1.3. Bản chất là bất đồng bộ

9.2. Reactive form

9.2.1. dùng cho Form phức tạp

9.2.2. Dùng ReactiveFormsModule

9.2.2.1. FormGroup

9.2.2.2. FormBuilder

9.2.2.3. FormControl

9.2.2.4. FormArray

9.2.3. hầu hết là đồng bộ

9.3. Validators

9.4. ngSubmit