Một số tính năng cơ bản của AngularJs

Bài đăng này đã không được cập nhật trong 9 năm

AngularJs là một Javascript framework, được xây dựng dựa trên tiêu chuẩn MVC, thường được dùng để phát triển frontend.

I. Cài đặt

Vì là Javascript nên AngularJs đuợc thêm vaò file HTML bằng thẻ script:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

II. Một số tính năng chính của AngularJs:

1) AngularJs Directives(thuộc tính chỉ thị)

Directives có thể là các thuộc tính, class, tên... của thẻ HTML mà AngularJs định nghĩa thêm, tuân thủ theo quy tắc là bắt đầu bằng "ng-", sau đó là tên của directive.
Việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML, code HTML nhìn sẽ gọn gàng và sáng sủa hơn.
Một vài Directives hay sử dụng là:

ng-app: khi khai báo một ng-app thì được hiểu là bắt đầu một ứng dụng AngularJs

ng-controller: đánh dấu bắt đầu một controller, với tên là chính là một function được khai báo trong file js hoặc thẻ script

ng-model: khai baó một model

ng-init: khai báo dữ liệu khởi tạo khi ứng dụng vừa được chạy

<html>
  <head>
    <title>Hello World</title>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="title='Hello World'">
      {{title}}
    </div>
    </body>
</html>
<!--ng-init: khởi tạo gía trị title, AngularJs bind dữ liệu đó vaò HTML và title được gọi thông qua cặp thẻ {{ và }} => KQ: Hello World--!>

<html>
  <head>
    <title>ng-repeat</title>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="directives=[
      {directive:'ng-app'},
      {directive:'ng-controller'},
      {directive:'ng-model'}]">
      <p>Directives:</p>
      <ul>
        <li ng-repeat="x in directives">
          {{ x.directive }}
        </li>
      </ul>
    </div>
  </body>
</html>
<!-- ng-repeat: lặp lại HTML nhiều lần, mỗi lần tương ứng với một gía trị trong mảng dữ liệu
-> KQ:
Directives:
- ng-app
- ng-controller
- ng-model

2) AngularJs Controller

Để lấy dữ liệu và để xử lý trong script thì phải dùng đến controler.

<html>
  <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-controller="BasicController">
      Name: <input type="text" ng-model="name"><br>
      Age: <input type="number" ng-model="age"><br>
      Out put: {{ output() }}
    </div>
    <script>
      function BasicController($scope) {
        $scope.name = "Minh Hang",
        $scope.age = "24",
        $scope.output = function() {
          return $scope.name + " " + $scope.age + " tuoi";
        }
      }
    </script>
  </body>
</html>

Controller được khai báo ở đây là BasicController, cũng chính là một function được khai baó trong thẻ script. Hàm này thực hiện xử lý dữ liệu cho đối tượng $scope, từ đây bên view sẽ sử dụng các dữ liệu trong $scope để hiển thị ra tương ứng. Một controller được gán trong HTML bằng thuộc tính chỉ thị ng-controller.

3) AngularJs Filters

AngularJs có thể thêm các điều kiện vaò biểu thức in ra dữ lịêu hoặc directive hoặc cả thẻ input để lọc kết qủa lấy ra.

Thêm filers vaò biểu thức in ra dữ liệu(uppercase/ lowercase/ currency)

<html>
  <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-controller="HangController">
      My name is {{ name | uppercase }}
    </div>
    <script>
      function HangController($scope) {
        $scope.name="hang"
      }
    </script>
  </body>
</html>
<!--uppercase - viết hoa tất cả chữ cái -> KQ:  My name is HANG--!>

<html>
  <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-controller="currencyController">
      Number_1: <input type="number" ng-model="number_1">
      Number_2: <input type="number" ng-model="number_2">
      <p>Total = {{ number_1 + number_2 | currency }}</p>
    </div>
    <script>
      function currencyController($scope) {
        $scope.number_1 = 0.991;
        $scope.number_2 = 9.991;
    }
    </script>
  </body>
</html>
<!--currency - làm tròn số -> KQ:  Total = 10.98 --!>

Thêm filers vaò directive(orderBy)

<html>
  <head>
    <title>ng-repeat</title>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="directives=[
      {directive:'ng-app',num:1},
      {directive:'ng-controller',num:3},
      {directive:'ng-model',num:2}]">
      <p>Directives:</p>
      <ul>
        <li ng-repeat="x in directives | orderBy:'num'">
          {{ x.num + "/" + x.directive }}
        </li>
      </ul>
    </div>
  </body>
</html>
<!--
-> KQ:
Directives:
- 1/ng-app
- 2/ng-model
- 3/ng-controller --!>

4) AngularJS Form và Validation

AngularJS cung cấp một số phương thức cơ bản để validate form mạnh mẽ như required, min, max, minlength, maxlength ...
Angular sẽ tự động thêm các class CSS tùy vào trạng thái validation của form như:

ng-valid : thực hiện khi giá trị nhập thỏa mãn điều kiện validation

**ng-invalid **: thực hiện khi giá trị nhập không thỏa mãn điều kiện validation

ng-dirty : thực hiện khi form có sự thay đổi nội dung

ng-pristine : thực hiện khi form chưa có sự thay đổi nội dung

Khi người dùng nhập đúng các trường của form thì mới có thể submit form

VD: Validate name, email, birthday

<!DOCTYPE html>
<html>
  <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  </head>
  <body>
    <h2>Form & Validation</h2>
    <form ng-app="" ng-controller="FormValidation" name="user" novalidate>
      <p>Name:<br>
        <input type="text" name="name" ng-model="name" ng-minlength="6" required>
        <span style="color:red" ng-show="user.name.$error.required">Name is required.</span>
        <span style="color:red" ng-show="user.name.$error.minlength">Name must be at least 6 characters.</span>
        <span style="color:green" ng-show="user.name.$valid">Good</span>
      </p>
      <p>Email:<br>
        <input type="email" name="email" ng-model="email" required>
        <span style="color:red" ng-show="user.email.$error.required">Email is required.</span>
        <span style="color:red" ng-show="user.email.$error.email">Invalid email address.</span>
        <span style="color:green" ng-show="user.email.$valid">Good</span>
      </p>
      <p>Birthday:<br>
        <input type="text" name="birthday" ng-model="birthday" placeholder="dd-mm-yyyy" ng-pattern="/^(0?[1-9]|[12][0-9]|3[01])-(0?[1-9]|1[012])-((19[0-9]{2})|(20[0-1]{1}[0-5]{1}))$/">
        <span style="color:red" ng-show="user.birthday.$error.pattern">Please enter birthday with format dd-mm-yyyy.</span>
      </p>
      <p>
        <input type="submit" ng-disabled="user.name.$dirty && user.name.$invalid || user.email.$dirty && user.email.$invalid || user.birthday.$error.pattern">
      </p>
    </form>
    <script>
      function FormValidation($scope) {
        $scope.name = "minh hang";
        $scope.email = "hangvtm@gmail.com";
      }
    </script>
  </body>
</html>

Tài liệu tham khaỏ: http://www.w3schools.com/angular/

AngularJS

Mục lục