Chương 1: GIỚI THIỆU ANGULAR 1. Khái niệm Angular là một Javascript Framework có cấu trúc cho các ứng dụng web động (dynamic web app), nó thường được sử dụng để tạo ra các ứng dụng một trang (Single Page Application - SPA). Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của Angular loại bỏ phần lớn code mà bạn thường phải viết.
Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào. Angular là một nền tảng miễn phí và được hàng ngàn lập trình viên trên thế giới ưa chuộng. Lịch sử phát triển của Angular Framework AngularJS được bắt đầu từ năm 2009, do lập trình viên Misko Hevery tại Google viết ra như là một dự án kiểu “viết cho vui”. Misko và nhóm lúc này đang tham gia vào 1 dự án của Google tên là Google Feedback.
Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn chỉ khoảng 1500. Với sự thành công đó, đội ngũ của dự án Google Feedback quyết định phát triển AngularJS theo hướng mã nguồn mở. Theo thông số từ Github, hiện tại dự án AngularJS đang có gần 11000 người theo dõi và hơn 2000 lượt fork. 7 do an Hình 1.
1 Lịch sử phát triển Angular 1. Ưu nhược điểm của Angular Framework Bảng 1. 1 Ưu nhược điểm của Angular Framework Ưu điểm Nhược điểm - Cung cấp khả năng tạo ra các Single Page - Không an toàn: được phát triển từ javascript Aplication dễ dàng. cho nên ứng dụng được viết bởi Angular - Cung cấp khả năng data binding tới HTML, không an toàn.
Nên có sự bảo mật và xác thực khiến cho người dùng cảm giác linh hoạt, phía server sẽ giúp ứng dụng trở nên an toàn thân thiện. - Dễ dàng Unit test. - Nếu người sử dụng ứng dụng của vô hiệu - Dễ dàng tái sử dụng component. hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ - Giúp lập trình viên viết code ít hơn với bản.
nhiều chức năng hơn. - Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile. Tại sao chúng ta nên sử dụng Angular Framework Hình 1. 1 Tạo sao chúng ta nên sử dụng angular 1.
Cấu trúc của thư mục Angular Framework Một dự án web viết fronteng bằng Angular có cấu trúc thư mục như sau: Hình 1. 1 Thư mục Angular Framework Ở thư mục root của Angular project, các bạn sẽ thấy nhiều thư mục và tập tin, mục đích của những tập tin thư mục này mình có thể liệt kê như trong bảng dưới đây: 9 do an Hình 1. 2 Chức năng của các thư mục chính Angular Trong các tập tin, thư mục được liệt kê ở trên thì thư mục src là thư mục quan trọng, là nơi để chúng ta có thể thêm code, modify code để phát triển ứng dụng Angular của mình. Nội dung của thư mục này như sau: Hình 1.
3 Thư mục src Mục đích của từng thư mục, tập tin trong thư mục src này mình có thể liệt kê như sau: 10 do an Hình 1. 4 Chức năng cụ thể của các thư mục con trong src 11 do an Chương 2: CÀI ĐẶT ANGULAR FRAMEWORK 2. Cài đặt Nodejs Để cài đặt Nodejs, đến đường dẫn https://o7planning.org/vi/11921/huong-dan- cai-dat-nodejs-tren-windows và làm theo hướng dẫn. Cài đặt NPM Trong quá trình cài đặt Nodejs, NPM được tích hợp cài đặt sẳn.
Để tìm hiểu đến đường dẫn: https://o7planning.org/vi/11921/huong-dan-cai-dat- nodejs-tren-windows 2. Cài đặt Angular CLI và tạo project Angular Bản thân Angular chỉ là một thư viện Javascript mở rộng dành cho Node.js chứ không phải một ứng dụng hoàn toàn, tuy nhiên nhóm phát triển Angular đã viết thêm gói Angular CLI là một chương trình dòng lệnh để hỗ trợ chúng ta tạo project, thêm file, xóa file, khởi động project… một cách dễ dàng. Để cài đặt và tạo project, vào đường dẫn: https://www.vn/Huong-Dan- Cai-Dat-va-Su-Dung-Angular-CLI làm theo hướng dẫn. 12 do an Chương 3: CÁC TÍNH NĂNG CHÍNH CỦA ANGULAR FRAMEWORK 3.
Data-binding trong Angular là gì? Data Binding trong AngularJs chính là các thức tự động đồng bộ (synchronization) dữ liệu giữa Model và View trong AngularJs. Data Binding cho phép bạn tạo sự liên kết, ràng buộc giữa Model và Template thông qua một ứng dụng AngularJs (ng-app). Khi có bất kỳ sự thay đổi nào ở model, dữ liệu sẽ được phản ánh ngay tức thì ra Template và ngược lại. Cách thức hoạt động của Data-binding trong Angular.
1 Sơ đồ Two-Way Data Binding Đầu tiên AngularJS compile Template ra ngoài View cho người dùng thấy được (chẳng hạn như là 1 ô textbox). Khi có bất kì thày đổi trên View này, chẳng hạn như trong ô textbox mình sẽ nhập là abc. Thì tự động dữ liệu abc này sẽ ngay lập tự được đồng bộ vào bên trong Model. Và tiếp theo bên trong Model nếu có bất kỳ sự thay đổi nào sẽ ngay lập tức được đồng bộ ngược lại ra View.
Vì thế dữ liệu được trung chuyển từ Model sang View hay từ View sang Model là một thể thống nhất. 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 13 do an đượ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. Chúng ta không cần đi nhặt nhạnh từng giá trị của các ô input như thời dùng jQuery nữa. Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}} Ví dụ chúng ta có một Component đơn giản như sau: Đó là hiển thị chuỗi string.
Nhưng nếu muốn hiển thị giá trị đã có ra một ô input text, thì phải viết 2 dấu ngoặc vuông [] như sau: Chú ý một chút, trong ví dụ này thì value là một từ khóa html chứ không phải tên biến, title mới là tên biến dùng để truyền vào cho [value] nhưng chúng ta không đóng khung title mà đóng khung value. Điều này cho phép chúng ta linh hoạt để gán giá trị cho bất cứ thuộc tính html nào cũng được. Scope Scope là một object (đối tượng) có nhiệm vụ giao tiếp dữ liệu giữa controller và view của ứng dụng. Nó sẽ thực hiện dưới dạng biểu thức, nghĩa là ở model sẽ được khai báo đúng với quy cách thì đối tượng scope sẽ truyền hành động (function) hoặc dữ liệu tương ứng và ta có thể truyền các sự kiện thông qua đối tượng này.
Scopes cung cấp các biểu thức giống như các template engine hiện nay, ví dụ để hiển thị username thì ta sẽ khai báo là {{username}} và ở controller chúng ta chỉ việc gán $scope.username = 'something' thì đối tượng này sẽ lấy key có tên là username gán vào view {{username}} 14 do an 3. Router Khi sử dụng Router, chúng ta sẽ có thể dựng nên một trang web SPA (Single Page Application). Khi viết một route template, các components sẽ được map tương ứng với các URL cố định. Và khi click vào link, url sẽ load component mà không cần load lại cả trang.
Dẫn đến hiệu ứng là trang web chạy trong 1 tab và các màn hình được load động. Cách hoạt động này khác với MPA (Multiple Page Application) thường thì mỗi màn hình sẽ có url tương ứng và phải bật một tab riêng trên trình duyệt. Router cũng có cache, tức là component đã load một lần thì sẽ được load lại không cần tải toàn bộ về từ server nữa. Để bắt đầu sử dụng Router thì sau khi tạo project bằng Angular CLI, chúng ta chạy dòng lệnh sau đây: ng g module my-router-module –routing 3.
Router Outlet Mỗi một Router sẽ có một URL để load component. Và để biết được là component sẽ render ra chỗ nào thì chúng ta viết đoạn code sau vào khung html cần chèn: <router-outlet></router-outlet> 3. Cài đặt Route cho ứng dụng Angular Để cài đặt toàn bộ Router cho một ứng dụng Angular thì chúng ta cần tạo ra một đối tượng JSON chứa các thuộc tính như sau: - path: Đường dẫn URL của component hiện tại. - component: Ứng với đường dẫn bên trên thì load component nào.
- 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. 15 do an - 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. Child Routes Khi chúng ta muốn một trang có các trang con bên trong nó. Ví dụ trang Grid data sẽ chứa trang Thêm, Sửa, Xóa tương ứng.
Lúc này chúng ta viết thêm thuộc tính child cho Route cha. Child là một object JSON giống object Route cha. Cách viết như sau: Để component con được hiển thị lên ở component cha? 16 do an Như vậy là các component nếu dùng Route để định nghĩa lồng nhau thì chúng ta sẽ dùng lại biến <router-outlet></router-outlet> để render con của nó. Params Data hoàn toàn có thể được truyền từ màn hình này sang màn hình kia bằng cách vứt giá trị vào trong url để gọi (hay còn gọi là cách gọi hàm bằng truyền params URL).
Các bước để làm được việc này như sau: - Định nghĩa giá trị cần lấy trong định nghĩa route: Ví dụ bên dưới sẽ cho ta thấy cách định nghĩa param cần lấy trong url. - Đọc data từ URL truyền tới: Chúng ta cần dùng đến biến ActivedRoute của bộ @angular/router. Components Components là một khối code trong app Angular. Nó là sự kết hợp của bộ template html (bộ khung html) và nhúng kèm code TypeScript (hoặc Javascript).
Các components là độc lập với nhau và độc lập với hệ thống. Nó có thể được cài vào hoặc tháo ra khỏi hệ thống dễ dàng. Một component có thể hiểu như một control trên màn hình hiển thị, gồm giao diện html và code logic xử lý sự kiện đi kèm control đó. Một component cũng có 17 do an thể to lớn như là cả 1 màn hình chứa nhiều control hoặc một nhóm nhiều màn hình.
Tức là là một component cũng có thể chứa và gọi được nhiều component khác nối vào. Như vậy Angular 4 rất linh hoạt trong việc chia nhỏ code ra các component. Từ Angular 4 chúng ta khai báo một Component với cấu trúc như sau: Từ khóa @Component sẽ giúp định nghĩa ra một bộ khung html cho nó. Và bên dưới là một class HelloWorld dùng để viết code logic.