ANGULARJS
Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider. Sử dụng Karma và Jasmine để test ứng dụng AngularJS Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS Tích hợp thư viện và module bằng Bower và npm vào Angular Xử lý lỗi với $exceptionHandler và $log service trong AngularJS. Sử dụng Custom Directives trong AngularJS Interceptors và Http Service trong Angular Tạo và sử dụng directive trong AngularJS Cách sử dụng service trong AngularJS Cách sử dụng Dependency Injection trong AngularJS Cách sử dụng route trong AngularJS Tạo hiệu ứng với ngAnimate trong AngularJS Tối ưu hóa hiệu suất trong AngularJS Security trong AngularJS và cách sử dụng đơn giản Đa ngôn ngữ Internationalization (i18n) trong AngularJS Two way data binding trong Angularjs Bài 01: Tổng quan về AngularJS Bài 02: Download AngularJS và viết ứng dụng AngularJS đầu tiên Bài 03: Tìm hiểu Controller trong AngularJS Bài 04: Tìm hiểu Scope và rootScope trong AngularJS Bài 05: Tìm hiểu AngularJS Directives - Danh sách Directives Bài 06: Directive ng-model trong AngularJS Bài 07: Directive ng-model-options trong AngularJS Bài 08: Directives ng-bind - ng-bind-html - ng-bind-template trong AngularJS Bài 09: Directive Form trong AngularJS Bài 10: Directive ng-form trong AngularJS Bài 11: Directive input trong AngularJS Bài 12: Directive input checkbox trong AngularJS Bài 13: Directive input date trong AngularJS Bài 14: Directive input datetime-local trong AngularJS Bài 15: Directive input time trong AngularJS Bài 16: Directive input month và input week trong AngularJS Bài 17: Directive ng-show và ng-hide trong AngularJS Bài 18: Directive ng-repeat trong AngularJS Bài 19: Directive ng-init trong AngularJS Bài 20: Directive ng-include trong AngularJS Bài 21: Services trong AngularJS và cách tạo Service mới Bài 22: Directive ng-class trong angularjs Tạo tabs với ng-show & ng-class & ng-click trong angularjs Bài 23: Directive ng-click trong angularjs Bài 24: Directive ng-class-odd và ng-class-even trong Angularjs [Học AngularJS] - Bài 01 - Hello World! [Học AngularJS] - Bài 02 - ng-app [Học AngularJS] - Bài 03 - ng-controller [Học AngularJS] - Bài 04 - $scope [Học AngularJS] - Bài 05 - $rootScope
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 01: Tổng quan về AngularJS

Trong loạt bài serie này tôi và các bạn sẽ tìm hiểu các kiến thức căn bản nhất của Angular, mỗi bài sẽ đi tìm hiểu một chủ đề, trong mỗi bài sẽ có các ví dụ minh họa và demo trực tiếp trên live editor nên rất dễ để học. Hy chúng ta sẽ thành công khi xong loạt serie này.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. AngularJS là gì?

Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA). Nó hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular). Đây là một Framework mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng. Framework này được thế hệ Web 2.0 phát triển khá mạnh ở nước ngoài, tuy nhiên ở Việt Nam thì vẫn chưa thông dụng lắm.

2. Những ai cần nắm bắt AngularJS

Về thành phần đối tượng học serie AngularJS căn bản đến nâng cao này là những bạn muốn đi theo nghề lập trình web nói chung và những bạn muốn sử dụng AngularJS để làm dự án nói riêng. Mình cam đoan rằng sau khi serie này hoàn thành bạn có thể tự mình làm ứng dụng Angular căn bản, hay thầm chí là ứng dụng Angular nâng cao nếu như bạn có tâm huyết tìm hiểu đến cùng.

Hy vọng rằng sau loạt serie này bạn sẽ tự mình nghiên cứu thêm nhé, vì bản chất học lập trình không thể nào trình bày full được mà chỉ ở mức basic, chỉ đường cho bạn đi thôi.

Bài viết này được đăng tại [free tuts .net]

3. Bạn cần chuẩn bị những kiến thức gì để học AngularJS

Để học được Angular thì bạn phải có kiến thức cơ bản về javascript, biết cách xử lý object, string, … Hay thậm chí nếu như bạn biết chuyên sâu Javascript thì đó là một lợi thế rất nhiều. Vì bản chất Angular hoạt động dạng Single Page, sử dụng dạng API để lấy dữ liệu, vì vậy bạn phải biết các kỹ thuật xử lý DHTML, Ajax. Nếu như bạn chưa biết các công nghệ kỹ thuật đó thì hãy dừng serie này tại đây nhé, vì serie này bạn chưa đủ trình độ để tìm hiểu nó.

4. Các đặc tính của AngularJS

  • AngularJS là một Framwork phát triển dựa trên Javascript để tạo các ứng dụng web phong phú
  • AngularJS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, sử dụng mô hình MVC rất mạnh mẽ
  • Mã nguồn AngularJS tự động fix với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt
  • Angular là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới.

Chung quy lại có thể hiểu khi làm việc với AngularJS giống như là đang làm việc với Ajax, sử dụng cớ chế bind data, hoạt động theo mô hình MVC và sử dụng service để tương tác với dữ liệu từ server. Để rõ hơn thì chúng ta tìm hiểu các tính năng cố lõi của nó nhé.

5. Các tính năng code lõi của AngularJS

Sau đây là các tính năng cố lõi quan trọng trong AngularJS

  • Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model và view
  • Scope: (Phạm vi) Đây là những đối tượng kết nối giữa Controller và View
  • Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope
  • Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB.
  • Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới
  • Directives:  đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh
  • Templates: hiển thị thông tin từ controller, đây là một thành phần của views
  • Routing:  chuyển đổi giữa các action trong controller
  • MVC: Mô hình chia thành phần riêng biệt thành Model, View, Controller. Đây là một mô hình khá hay nhưng trong Angular thì nó được chế biến lại một chút gần giốn với MVVM (Model View View Model)
  • Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng  trong các URL  để nó có thể đánh dấu được với công cụ tìm kiếm.
  • Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng  dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng.

Sau đây là hình ảnh mô hình cac thành phần quan trọng trong AngularJS:

cac thanh phan cua angular js png
Các thành phần của AngularJS

6. Ưu điểm và nhược điểm của AngularJS

Ưu điểm:

  • Angular cho phép tạo ra các ứng dụng một cách đơn giản, code sạch
  • Angular sử dụng data bind giống .NET với tính năng liên kết với HTML nên giúp người dùng cảm thấy dễ chịu.
  • Angular đang ở giai đoạn thử nghiệm
  • Angular có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.

Nhược điểm:

Mặc dù angular có nhiều lợi thế ưu điểm nhưng nó cũng có mặt trái ngược lại:

  • Không an toàn: Được phát triển từ javascript nên nó không an toàn, phía máy chủ phải thường xuyên xác nhận quyền để hệ thống chạy trơn tru.
  • Phụ thuộc: Nếu người dùng vô hiệu hóa javascript thì coi như đi tong con long bong.

7. Các Components chính trong AngularJS

Angular JS được chia làm ba thành phần chính sau đây:

  • ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới HTML
  • ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular
  • ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags
  • .....

Còn rất nhiều nhưng ta sẽ tìm hiểu dần qua các bài sau nhé.

8. Lời kết

Qua loạt lý thuyết này bạn sẽ thấy AngularJS có rât nhiều thứ ta cần phải học và rất cực nhọc để master được nó đấy nhé. Hy vọng chúng ta sẽ thành công đưa nó vào lòng bàn tay để serie được hoàn thành một cách ... ngon lành nhé. Bài tiếp theo chúng ta sẽ tìm hiểu cách download angular và chạy chương trình angular đầu tiên.

Cùng chuyên mục:

Tích hợp thư viện và module bằng Bower và npm vào Angular

Tích hợp thư viện và module bằng Bower và npm vào Angular

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Ứng dụng di động đa nền tảng với Ionic và React Native trong AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Sử dụng Karma và Jasmine để test ứng dụng AngularJS

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Tạo ứng dụng SPA trong AngularJS với Routing và StateProvider.

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Cách giao tiếp giữa $rootScope, $broadcast và $emit trong AngularJS

Two way data binding trong Angularjs

Two way data binding trong Angularjs

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Đa ngôn ngữ Internationalization (i18n) trong AngularJS

Security trong AngularJS và cách sử dụng đơn giản

Security trong AngularJS và cách sử dụng đơn giản

Tối ưu hóa hiệu suất trong AngularJS

Tối ưu hóa hiệu suất trong AngularJS

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Xử lý lỗi với $exceptionHandler và $log service trong AngularJS.

Tạo hiệu ứng với ngAnimate trong AngularJS

Tạo hiệu ứng với ngAnimate trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng route trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng Dependency Injection trong AngularJS

Cách sử dụng service trong AngularJS

Cách sử dụng service trong AngularJS

Tạo và sử dụng directive trong AngularJS

Tạo và sử dụng directive trong AngularJS

Interceptors và Http Service trong Angular

Interceptors và Http Service trong Angular

Sử dụng Custom Directives trong AngularJS

Sử dụng Custom Directives trong AngularJS

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Top