Tìm hiểu về AngularJS

AngularJS

AngularJS là một framework có cấu trúc cho các ứng dụng web động. 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 AngularJS 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.

Để học được AngularJS bạn cần phải có những kiến thức cơ bản javascript, object, string …. Việc bạn có hiểu biết chuyên sâu về javascript sẽ giúp cho bạn dễ dàng học AngularJS. Bản chất của AngularJS là hoạt động dạng Single Page, sử dụng API để lấy data, cho nên bạn cần biết các kĩ thuật DHTML, AJAX.

Đặc trưng của AngularJS

Phát triển dự trên Javascript

Tạo các ứng dụng client-side theo mô hình MVC.

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.

Mã nguồn mở, miễn phí hoàn toàn và được sủ dụng rộng rãi.

Các tính năng cơ bản

Scope : là đối tượng có nhiệm vụ giao tiếp giữa controller và view của ứng dụng.

Controller : xử lí dữ liệu cho đối tượng $scope, từ đây bên views sẽ sử dụng các dữ liệu trong scope để hiển thị ra ương ứng.

Data-binding : tự động đồng bộ dữ liệu giữa model và view

Service : là singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng, cung cấp các phương thức lưu trữ dữ liệu có sãn. ($http, $httpBackend, $sce, $controller, $document, $compile, $parse, $rootElement, $rootScope ……)

Filter : Lọc các tập con từ tập item trong các mảng và trả về các mảng mới.

Directive : dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directive có sẵn như ngBind, ngModel…

Temple : một thành phần của view, hiển thị thông tin từ controller

Routing : chuyển đổi giữa các action trong controller, qua lại giữa các view.

MVC & MVVM : mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller) mỗi phần có một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel.

Deep link : 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ể bookmark với công cụ tìm kiếm. Các ứng dụng có thể được phục hồi lại từ các địa chỉ URL với cùng một trạng thái.

Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.

Angulajs

Ưu điểm của angularJS

Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng.

Cung cấp khả năng data binding tới HTML, khiến cho người dùng cảm giác linh hoạt, thân thiện.

Dễ dàng Unit test

Dễ dàng tái sử dụng component

Giúp lập trình viên viết code ít hơn với 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.

Nhược điểm

Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởi AngularJS không an toàn. Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn hơn.

Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ bản.

Hướng dẫn thực hành cơ bản với AngularJS

Đầu tiên Nếu bạn muốn download AngularJS, hãy truy cập vào trang chủ của nó:

https://angularjs.org/ Hoặc Thay vì download AngularJS bạn có thể sử dụng nguồn trực tiếp trên Internet.

https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js

Bước 2 tạo trang HELLO.html với nội dung sau:



<html>
   <head>
      <title>Hello AngularJS</title>
      <!-- Check version: https://code.angularjs.org/ -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
      <script src="hello-angularjs.js"></script>
   </head>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h3>Calculator:</h3>
         <p>Variable 1: <input ng-model = "variable1"> </p>
         <p>Variable 2: <input ng-model = "variable2"> </p>
 
         <button ng-click = "setOperatorSum()">+</button>
         <button ng-click = "setOperatorMinus()">-</button>
 
         <p style="color:blue">{{variable1}} {{ operator }} {{variable2}}</p>
 
         <button ng-click = "calculate()"> = </button>
         <p>Result: <b style="color:red">{{ result }}<b></p>
      </div>
   </body>
</html>

và file JS hello-angularjs.js


// angular là một đối tượng được tạo sẵn có trong AngularJS. Gọi phương thức angular.module("myApp",[]) để tạo một app có tên "myApp".
var app = angular.module("myApp", []);
 
// Sau khi có một đối tượng app ở bước trên bạn có thể tạo một hoặc nhiều Controller cho nó. Chẳng hạn tạo một Controller với tên "myCtrl".

app.controller("myCtrl", function($scope) {
 
    $scope.operator = "+";
 
    $scope.variable1 = 30;
    $scope.variable2 = 20;
    $scope.result = 0;
 
    $scope.setOperatorSum = function() {
        $scope.operator = "+";
    }
 
    $scope.setOperatorMinus = function() {
        $scope.operator = "-";
    }
 
    $scope.calculate = function() {
        if ($scope.operator == "+") {
            $scope.result = parseFloat($scope.variable1) + parseFloat($scope.variable2);
        } else if ($scope.operator == "-") {
            $scope.result = parseFloat($scope.variable1) - parseFloat($scope.variable2);
        }
    }
 
});

AngularJS đã tạo sẵn một vài thuộc tính mở rộng cho các thẻ của HTML, chẳng hạn như ng-app, ng-controller,…

Thuộc tính ng-app giúp bạn thiết lập giàng buộc (bind) giữa phần tử HTML với một đối tượng app đã tạo trên Javascript.

Thuộc tính ng-controller giúp bạn thiết lập giàng buộc giữa phần tử HTML với một đối tượng controller đã tạo trên Javascript

hinh

$scope là một đối tượng, nó là một mắt xích giàng buộc giữa HTML (View) và Javascript (Controller). Cả View và Controller đều cùng sử dụng chung đối tượng này.

scope

Thông $scope chúng ta thể gọi function hoặc biến trên VIEW. Cụ thể ở đây chúng ta lấy giá trị Variable 1 thông qua #scope.variable1, tương tự Variable 2 #scope.variable2.

Sau đó chúng ta chuyển thành kiểu dữ liệu parseFloat và cộng chúng lại, cuối cùng trả về kết quả về biến result thông qua $scope để đưa lên VIEW $scope.result = parseFloat($scope.variable1) + parseFloat($scope.variable2);

ng-model là một thuộc tính (attribute) mở rộng của AngularJS, nó có thể được dùng cho các phần tử ,