1. Angular là gì
1.1. AngularJS là một open source – mã nguồn mở hay framworks miễn phí dành cho thiết kế web. Được phát triển từ năm 2009, thời điểm hiện tại được duy trì bởi google và đã ra mắt phiên bản 2.0. Là một trong những frameworks front end mạnh mẽ nhất thường được dùng bởi các lập trình viên cắt HTML cao cấp
1.2. Đặc trưng của AngularJS
1.2.1. Phát triển dự trên Javascript
1.2.2. Tạo các ứng dụng client-side theo mô hình MVC.
1.2.3. Khả năng tương thích cao, tự động xử lý mã javascript để phù hợp vứi mỗi trình duyệt.
1.2.4. Mã nguồn mở, miễn phí hoàn toàn và được sủ dụng rộng rãi.
1.3. Các components chính
1.3.1. ng-app : định nghĩa và liên kết một ứng dụng AngularJS tới HTML.
1.3.2. ng-model : 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.
1.3.3. ng-bind : gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML.
1.4. Ưu và nhược
1.4.1. Ưu
1.4.1.1. Giải pháp cho các Single Page Aplication dễ dàng.
1.4.1.2. Code Front end rất thân thiện nhờ khả năng Binding data lên nền tảng HTML, thao tác rất thích.
1.4.1.3. Code Front end rất thân thiện nhờ khả năng Binding data lên nền tảng HTML, thao tác rất thích.
1.4.1.4. Dễ dàng tái sử dụng component
1.4.1.5. Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.
1.4.1.6. Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.
1.4.2. Nhược
1.4.2.1. Không an toàn : bản chất của AngularJS là Front End, mà front end thì vốn không được bảo mật bằng Back End. Cho nên khi sử dụng API bạn nên xây dựng một hệ thống kiểm tra dữ liệu trả về tốt nhất.
1.4.2.2. Một số trình duyệt có tính năng Disable Javascript nghĩa là website của bạn sẽ hoàn toàn không sử dụng được trên các trình duyệt đó.
2. 1. Căn bản về UX/UI
2.1. 1. UX Designer (User experience designer) – Thiết kế trải nghiệm?
2.1.1. UX Designer có nhiệm vụ tập trung chủ yếu vào việc Cảm giác sản phẩm này ra sao. Một vấn đề về thiết kế không chỉ có một câu trả lời hợp lý. UX designer tìm nhiều cách để tiếp cận nhằm giải quyết một vấn đề cụ thể của người dùng. Nhiệm vụ chính của UX designer là chắc chắn rằng quy trình logic của sản phẩm đi từ bước này tới bước kế tiếp.
2.1.2. Một cách mà một người UX Designer hay làm là đóng vai một người dùng để quan sát cách người dùng… quan sát. Việc người dùng có nhận ra những khối hình, chữ, màu sắc.. họ xác định và lặp lại để tạo ra một cách trải nghiệm “Tốt nhất”. Một dự án ví dụ là việc tạo ra một quy trình tiếp cận cho một người dùng mới.
2.2. UI Designer (user interface design) – Thiết kế giao diện
2.2.1. Không như những người thiết kế UX những người dành thời gian cho việc tạo ra cảm xúc tổng quan cho sản phẩm, người thiết kế UI dành nhiều thời giờ cho cái gọi là lay out – hay là sắp xếp bố cục. Họ với vai trò của một thiết kế, và chăm chút từng màn hình để chắc chắn rằng giao diện người dùng đang tương tác, bổ trợ cho con đường mà người thiết kế UX đã vạch ra.
3. 2. Typescript
3.1. Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là một phiên bản nâng cao của Javascript.
3.2. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.
3.3. Ưu và nhược của typescript
3.3.1. ưu
3.3.1.1. Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framework lớn.
3.3.1.2. Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framework lớn.
3.3.1.3. Cách tổ chức code rõ ràng hơn bởi được hỗ trợ các kỹ thuật mới nhất và hỗ trợ lập trình hướng đối tượng: Hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều dev có thể làm việc cùng nhau một cách dễ dàng hơn
3.3.1.4. Hỗ trợ các tính năng mới nhất của Javascript.
3.3.2. Nhược
3.3.2.1. Tính mở trong việc sử dụng biến gây khó khăn trong việc kiểm soát sự thay đổi, cập nhật
3.3.2.2. Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều.
3.3.2.3. Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều.
4. Angular Overview
4.1. The Module
4.1.1. Mỗi ứng dụng Angular là một tập hợp các module, mỗi module được tạo ra để phục vụ cho một mục đích nào đó. Một module sẽ có đầu ra là một giá trị nào đó, có thể coi module như là một class trong khái niệm OOP.
4.2. Library Modules
4.2.1. Một vài modules đóng vai trò là thư viện cho các modules khác. Bản thân Angular là một tập hợp bao gồm các library modules bên trong một vài các gói npm. Tên của chúng bắt đầu với tiền tố @angular. Mỗi thư viện Angular chứa đựng một module đóng gói thực chất là bao gồm các interface chứa liên kết đến các private module. Thư viện @angular/core là thư viện chính, là nơi cung cấp mọi thứ cho hệ thống hoạt động. Một vài module libraries khác cũng rất quan trọng như @angular/common, @angular/router và @angular/http.
4.3. The Component
4.3.1. Một Component điều khiển nhóm các thực thể của một màn hình thực tế cái mà chúng ta vẫn thường gọi là một View. Giao diện của một ứng dụng với các đường link dẫn hướng, danh sách các item, chi tiết item… Tất cả đều được điều khiển bởi Component.
4.3.2. Chúng ta sẽ định nghĩa một Component , thứ hỗ trợ cho view, trong một class. Class này tương tác với view thông qua một API của các thuộc tính và phương thức.
4.4. The Template
4.4.1. Giao diện UI của một Component được định nghĩa là Template, Angular sẽ dựa vào các template này để biết sẽ giao diện sẽ được tạo ra như thế nào.
4.4.2. Một template trong Angular đơn giản trông rất giống cấu trúc của một file HTML bình thường, chỉ có một số ít sự khác biệt.
5. Service và Router
5.1. Service
5.1.1. Tạo service
5.1.1.1. Để tạo service, ta chạy câu lệnh sau trên màn hình command line ng g service myservice
5.1.2. Khai báo service
5.1.3. Sử dụng service
5.1.3.1. Bước 1: Thay đổi constructor - thêm service vào component bằng cách khai báo như parameter.
5.1.3.2. Bước 2: Gọi service trong hàm tạo.
5.1.4. Thuộc tính của service
5.1.4.1. Ngoài khả năng chứa các hàm thì service cũng có thể chứa các thuộc tính. Trong ví dụ dưới đây, chúng ta sẽ thêm thuộc tính myProperty trong myService và hiển thị chúng trên cả App Component và New Cmp Component
5.2. Router
5.2.1. Trong Angular , Router là một module được đặt tại @angular/router, cung cấp cho ứng dụng Angluar của chúng ta khả năng điều hướng và hiển thị nội dung phù hợp với địa chỉ URL. Với các ứng dụng web thông thường, việc điều hướng theo URL thường sẽ do phía server đảm nhiệm, giống như hình ảnh dưới đây là ví dụ với Rails App:
5.2.2. Khai báo Route
5.2.2.1. Định nghĩa từng route. Mỗi route sẽ có là một cặp Url Path - Component để ứng dụng biết được Component cần load khi đến URL tương ứng.
5.2.2.2. Load các khai báo routes vào ứng dụng (thường ở app.module)
5.2.3. Hiển thị route component
5.2.4. Thiết lập nội dung cho root path
6. Angular Form
6.1. Template-Driven Forms Trong Angular
6.1.1. Template-driven forms là phương pháp mà chúng ta sẽ tạo forms dựa vào template (giống như trong Angularjs). Chúng ta thực hiện việc thêm các directives và hành vi vào template, sau đó Angular sẽ tự động tạo forms để quản lý và sử dụng
6.1.2. Import APIs cho Template-driven forms
6.1.2.1. Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều.
6.1.3. ngForm và ngModel directives
6.1.3.1. Nhiệm vụ đầu tiên chúng ta cần làm là truy cập vào form instance và gán các control vào form. Chúng ta sẽ lần lượt sử dụng ngForm và ngMode
6.1.3.2. Để có thể sử dụng các APIs mà Angular cung cấp cho việc thao tác với Template-driven forms, chúng ta cần import NgModule là FormsModule từ package @angular/forms
6.1.4. Submit form
6.1.5. Template-driven error validation
6.1.6. 4 ngModelGroup directive
6.1.6.1. Đến lúc này, chúng ta vẫn đang chỉ quản lý form control với một object chứa tất cả các keys cần thiết, vậy làm thế nào chúng ta có thể gom nhóm một số key lại thành một group riêng, câu trả lời là ngModelGroup. Directive này tạo ra một group lồng vào group cha, giống như object nằm trong một object khác.
6.2. Reactive Forms Trong Angular
6.2.1. Thuật ngữ Reactive Forms hay còn được gọi là Model-Driven Forms, là một phương pháp để tạo form trong Angular, phương pháp này tránh việc sử dụng các directive ví dụ như ngModel, required, etc, thay vào đó tạo các Object Model ở trong các Component, rồi tạo ra form từ chúng
6.2.2. Trong Template-driven forms, chúng ta ủy thác việc tạo form control cho directives, để tránh bị lỗi changed after checked, directives cần một cycle nữa để build toàn bộ form control tree. Vậy nên bạn cần đợi một tick nữa để có thể truy cập vào các phẩn tử của form. Chính điều này khiến việc test template-driven form trở nên phức tạp hơn.