1. 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
1.1. Lợi ích
1.1.1. Dễ phát triển dự án lớn
1.1.2. Nhiều Framework lựa chọn
1.1.3. Hô trợ các tính năng của Javascript phiên bản mới nhất
2. 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
2.1. Lợi ích
2.1.1. Angular hoạt động theo thiết kế module
2.1.2. Angular làm cho HTML của chúng ta trở nên linh hoạt hơn.
2.1.3. Angular có cơ chế binding data mạnh mẽ
2.1.4. Angular hỗ trợ việc giao tiếp với những back- end service
3. Căn bản về UI/UX
3.1. Mô hình chữ F(F-Pattern)
3.1.1. Đặt những nội dung vào vùng nóng của mô hình chữ F
3.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
3.2. 10 nguyên tắc thiết kế kiểu
3.2.1. Có nhiều kiểu dáng chữ, khoảng cách chữ
3.2.2. Kiểu trống ,canh lề , vấn đề kích cỡ . khả năng đọc, màu sắc nhóm
4. TypeScript
4.1. Cách cài đặt
4.1.1. npm install -g typescript
5. Angular component
5.1. Component là gì ?
5.1.1. Component có thể chứa component khác
5.1.2. Component có thể rất linh hoạt
5.1.3. Điều chỉnh 1 phần của màn hình (view)
5.1.4. Component có nhận tham số
5.2. Thành phần của componet
5.2.1. Component template
5.2.2. Component class
5.2.3. metadata
5.3. Lợi ích của việc sử dụng component
5.3.1. Tái sử dụng code
5.3.2. Dễ quản lí code
5.4. Câu lệnh tạo component
5.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
5.4.2. ng g component <ten-component>
5.4.3. ng g c <tencomponent>
5.5. Có 4 file : css,html,ts,và file spec.ts(file này dùng để test)
5.6. Bind dữ liệu
5.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
5.6.2. Các cách dùng Bind
5.6.2.1. Bind một chuỗi ra ngoài màn hình html
5.6.2.1.1. sử dụng 2 dấu ngoặc nhọn {{TenBien}}
6. Route
6.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
6.1.1. Path: đường dẫn ULR hiện tại
6.1.2. Component Ứng với đường dẫn nào thì load với đường dẫn đấy
6.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
6.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.
6.2. Service
6.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...
6.2.2. vd:import { Injectable } from '@angular/core'; @Injectable() export class TimeService { constructor() { } getTime(){ return `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`; } }
7. Kết nối với back-end
8. tow way binding
9. Thành phần của angular
9.1. ng-app:directive này định nghĩa và liên kếtmột ứng dụng AngularJS tới HTML.
9.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.
9.3. ng-bind: directive này gắn kết dữ liệu ứng AngularJS
10. Angular Overview
10.1. Cách nhúng boostrap :
10.1.1. Nhúng vào file index
10.1.2. Chạy câu lệnh npm install --save boostrap
10.1.3. Nhúng vào file stylé và file scripts
10.1.4. npm install jquery --save
10.2. Cách tạo project angular
10.2.1. ng new <ten>
10.2.2. chạy serve : ng serve
10.3. Form
11. Angular Form
11.1. Form validation
11.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 đủ
11.2. Template-Driven Forms
11.2.1. Template
11.2.2. Import APIs cho Template-driven forms
11.2.3. ngForm và ngModel directives
11.2.4. ngModelGroup directive
11.2.5. Submit form
11.2.6. Template-driven error validation
11.3. Reactive Forms Trong Angular
11.3.1. Các thành phần cơ bản của form
11.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.
11.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.
11.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.
11.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.
11.3.2. Template
11.3.3. Import APIs cho Reactive forms
11.3.4. Khởi tạo form trong Component
11.3.5. Binding controls
11.3.6. Reactive Forms Validator
11.3.7. Form Builder
12. Module và Dependency Injection
12.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 đó.
12.2. Câu lệnh điều kiện vòng lặp
12.2.1. *ngIf
12.2.2. *ngFor