Tổng quan về AngularJS

Thuộc tính ng-controller="myCtrl" là 1 AngularJS directive. Nó các định 1 controller.

Hàm myCtrl là 1 hàm javascript.

AngularJS sẽ gọi controller với một đối tượng $scope. $scope là 1 object ứng dụng (chủ thể của các biến và các hàm ứng dụng).

Trong ví dụ trên, Controller tạo 2 thuộc tính (biến) trong scope là firstName và lastName. ng-model liên kết các field đầu vào với các thuộc tính của controller (firstName và lastName).

Controller Methods

1 controller cũng có thể có các method (biến đóng vai trò là 1 function)

Ví dụ :

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

Trong ví dụ trên, fullName là 1 function của scope, được gọi giống như cách gọi hàm trong javascript : fullName(). Khởi tạo cũng đơn giản, chỉ cần sử dụng cú pháp

$scope.#{"function_name"} = function() {
  //do something
}
```

Kết quả của đoạn code trên :

![Selection_010.png](https://images.viblo.asia/ad6d38da-c8f2-49ac-8c4d-63125a50fd88.png)

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property

###

**Controllers In External Files**

Trong các ứng dụng lớn, việc lưu trữ controller trong các tập tin bên ngoài (external file) là phổ biến. Thay vì viết cả đoạn xử lý controller (như ở đoạn code trên) vào trong file HTML :

```JavaScript
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>
```

thì chỉ cần đưa nó sang file [_personController.js_](http://www.w3schools.com/angular/personController.js). Trong file HTML thì chỉ cần đường dẫn tới file personController.js là được :

```OpenSCAD
<script src="personController.js"></script>
```

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_js

###

**V. 1 số phần khác**

**1.  AngularJS Filters**

AngularJS filters được sử dụng để chuyển đổi (transform) dữ liệu:

|Filter|Mô tả|
| ------------- |:-------------:|
|currency|Định dạng 1 số thành một định dạng tiền tệ ($)|
|filter|Chọn 1 tập hợp con từ các mục của 1 mảng|
|lowercase|Định dạng 1 chuỗi (string) thành chữ in thường|
|orderBy|Sắp xếp 1 mảng bởi 1 điều kiện nào đó|
|uppercase|Định dạng 1 chuỗi (string) thành chữ in hoa|

###

**1.1. Thêm ```filters``` vào biểu thức (expression)**

Có thể add filter vào 1 biểu thức với ký tự ```(|)``` sau đó là 1 filter.

**a. ```uppercase``` và ```lowercase```**

Như trên, ta có file [personController.js](http://www.w3schools.com/angular/personController.js) với ```$scope.lastName = "Doe"```

Và đoạn code sau :

```HTML
<div ng-app="" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

// Hoặc có thể là <p>The name is {{ lastName | lowercase }}</p>, tùy theo filter mong muốn

</div>
```

Kết quả hiển thị ra màn hình tương ứng:

```OpenSCAD
The name is DOE -- trường hợp uppercase
The name is doe -- trường hợp lowercase
```

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_uppercase

**b. ```currency```**

Tương tự như trên, thêm ```currency``` vào trong biểu thức sau dấu ```(|)```, nó sẽ định dạng 1 số thành 1 đơn vị tiền tệ ($):

```HTML
<div ng-app="" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>
```

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_currency

###

**1.2. Thêm ```filters``` vào ng- ```directives```**

Tương tự như khi thêm vào biểu thức, ở đây ```filter``` cũng được thêm vào trong ```directives``` bởi 1 dấu ```(|)``` và 1 filter.

Ví dụ về thêm ```orderBy``` filter vào trong ```ng-repeat```, nó có tác dụng sắp xếp 1 mảng bởi 1 biểu thức xác định nào đó :

```HTML
<div ng-app="" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

<div>
```

Như đã biết, chúng ta có 1 file [namesController.js](http://www.w3schools.com/angular/namesController.js) gồm 1 đối tượng ```names``` với data :

```OpenSCAD
$scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
];
```

Nếu chỉ xuất ra kết quả của mảng ```names``` bình thường (không dùng ```orderBy```) thì kết quả như sau :

![Selection_011.png](https://images.viblo.asia/12001b04-c75f-4161-8bc2-5a4845be23a4.png)

Khi sử dụng ```orderBy: 'country'```, kết quả :

![Selection_012.png](https://images.viblo.asia/675b1e26-e0c7-49e5-aaf3-92696e7a3045.png)

Tương tự có thể sử dụng ```orderBy: 'name'```, khi đó mảng trên sẽ được sắp xếp theo ```name``` thay vì ```country```.

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby

###

**1.3. Filtering Input**

Phục vụ cho tìm kiếm theo từ khóa (searching by key)

Ví dụ :

```HTML
<div ng-app="" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>
```

Một ```input filter``` có thể được thêm vào 1 ```directive``` (ở ví dụ trên là **ng-repeat**) bởi ```(|)``` và theo sau là cụm ```filter:model_name``` (ở ví dụ trên là **filter:test**).

Có thể kết hợp sử dụng với các filter khác, như ví dụ trên sử dụng cùng với cả ```orderBy```, các kết quả phù hợp sẽ được sắp xếp theo ```country```.

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_input

###

**2. AngularJS AJAX - $http**

AJAX là một kỹ thuật rất quan trọng trong nền điện toán hiện đại, cũng như mọi Javascript framework khác AngularJS cung cấp cho người dùng công cụ để làm việc với AJAX thông qua một injector là $http.

**$http** là 1 dịch vụ AngularJS cho việc đọc dữ liệu từ các server ở xa (remote servers).

**2.1. Providing Data**

Có thể là dữ liệu được cung cấp từ 1 web server, lưu trong file : http://www.w3schools.com/angular/customers.php

**2.2. AngularJS $http**

AngularJS **$http** là 1 core service (dịch vụ cốt lõi) cho việc đọc dữ liệu từ web server.

```$http.get(url)``` là hàm để đọc dữ liệu của server.

Ví dụ :

```HTML

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

```

Trong ví dụ trên :
- AngularJS application được định nghĩa bởi ```ng-app```. Ứng dụng chạy bên trong thẻ ```<div>```.
- ```ng-controller``` chỉ dẫn tên các controller object, ở ví dụ trên là ```customersCtrl```.
- Hàm ```customersCtrl``` là 1 chuẩn cho xây dựng đối tượng JavaScript (JavaScript object constructor).
- AngularJS sẽ gọi hàm customersCtrl với 1 đối tượng **$scope** và **$http**.
- ```$scope``` là 1 ```application object``` (đối tượng ứng dụng) (chủ thể của các biến và hàm ứng dụng).
- ```$http``` là 1 ```XMLHttpRequest object``` dùng cho việc yêu cầu dữ liệu bên ngoài (dữ liệu từ web server...).
- ```$http.get()``` đọc ```JSON data``` (dữ liệu kiểu Json) từ http://www.w3schools.com/angular/customers.php.
- Nếu thành công, controller tạo 1 property (names) trong scope với kiểu dữ liệu là Json từ server.

###
**3. AngularJS Tables**

```ng-repeat``` là sự lựa chọn hoàn hảo cho việc hiện bảng.

**3.1. Hiển thị dữ liệu trong bảng**

Ví dụ :

```HTML
<div ng-app="myApp" ng-controller="customersCtrl">

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
```

Bảng được xác định bằng cặp thẻ ```<table>...</table>```

Các thuộc tính của bảng cũng như bình thường : ```<tr>...</tr>```, ```<th>...</th>```, ```<td>...</td>```, các biểu thức và directive được lồng vào thẻ của table (cách viết thẻ và biểu thức như bình thường).

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple

###

**3.2. Thêm CSS Style cho bảng**

Để bảng đẹp hơn, chúng ta có thể thêm 1 vài CSS vào page :

```CSS
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
```

CSS được chứa trong cặp thẻ ```<style></style>```, các thành phần css được định nghĩa như bình thường (giống file .css).

Chúng ta có thể thêm css hoặc chỉnh sửa số liệu cho các element trong thẻ <style> này.

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css

###

**3.3. Thêm ```filter``` vào trong table**

- Ở bảng trên chúng ta có thể thêm ```orderBy``` filter vào sau ```ng-repeat``` trong thẻ <tr> để sắp xếp các phần tử (row) của bảng theo **country**

```HTML
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
```

    Kết quả :

    ![Selection_013.png](https://images.viblo.asia/29ebf6b3-1a95-41ba-b02d-6a23381573db.png)

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_orderby

- Hoặc có thể thêm ```uppercase``` và ```lowercase``` vào trong các biểu thức trong thẻ <td> của bảng để hiển thị dữ liệu dưới dạng chữ in hoa hoặc in thường, ví dụ :

```HTML
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>
```

    Kết quả :

    ![Selection_014.png](https://images.viblo.asia/5b489fea-f65b-4c5f-bad7-7f14afc0bc06.png)

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_ucase

###

**3.4. Hiển thị index cho bảng ($index)**

Để hiển thị index cho bảng, thêm 1 thẻ <td> với ```$index``` (giá trị của index sẽ là **$index + 1**):

```HTML
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
```

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_index

###

**3.5. Sử dụng $even và $odd**

Ví dụ :

```HTML
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
```

Trong ví dụ trên ```ng-if``` tương đương với ```if``` dùng để xác định điều kiện để xác định style cho thẻ <td>.

Nếu index của <td> là lẻ thì add style, nếu là chẵn thì không làm gì.

Kết quả tương ứng đoạn code trên :

![Selection_015.png](https://images.viblo.asia/35ffdd3d-8e7b-4f47-b39f-8d2c5a354949.png)

Bạn cũng có thể đảo ngược lại vị trí của ```$odd``` và ```$even``` để thấy rõ được sự thay đổi.

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_even

###

**4. AngularJS HTML DOM**

**4.1. ```ng-disabled``` Directive**

``` ng-disabled``` liên kết dữ liệu AngularJS application với thuộc tính vô hiệu hóa các HTML element.

Ví dụ :

```HTML

<div ng-app="">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

</div>

```

Trong ví dụ trên :
- ```ng-disabled``` liên kết dữ liệu ứng dụng ```mySwitch``` với thuộc tính vô hiệu hóa (disabled) button HTML.
- ```ng-model``` kết nối giá trị của checkbox với giá trị của ```mySwitch```.
- Nếu giá trị của ```mySwitch``` là **true** thì button sẽ bị vô hiệu hóa :
```OpenSCAD

<p>
<button disabled>Click Me!</button>
</p>

```

- Nếu giá trị của ```mySwitch``` là **false** thì button sẽ không bị vô hiệu hóa :
```OpenSCAD

<p>
<button>Click Me!</button>
</p>

```

Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_disabled

###
**4.2. ```ng-show``` Directive**

```ng-show``` hiện hoặc ẩn 1 HTML element tùy thuộc vào giá trị của nó.

Ví dụ :

- ```HTML
    <div ng-app="">

    <p ng-show="true">I am visible.</p>

    <p ng-show="false">I am not visible.</p>

    </div>

```

    Kết quả hiện ra màn hình :
```OpenSCAD

    I am visible.

```

    Nếu bạn sửa giá trị ng-show của thẻ <p> thứ 2 thành "true" :
```OpenSCAD

    <p ng-show="true">I am not visible.</p>

```

    thì kết quả hiện ra sẽ là :
```OpenSCAD

    I am visible.
    I am not visible.

```

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_show

- Bạn có thể sử dụng bất kì biểu thức so sánh nào trả về true hoặc false để gán cho ```ng-show``` :

```HTML

    <div ng-app="">

    <p ng-show="hour > 12">I am visible.</p>

    </div>

```

    Thời gian hiện tại là 18h, nên biểu thức trên "hour > 12" trả về true, nên kết quả hiện ra màn hình sẽ là :

    ![Selection_016.png](https://images.viblo.asia/9c5be06b-44ab-404b-82a0-f8cc3403dfac.png)

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_show_if

- Ngược lại với ```ng-show``` là ```ng-hide```, giá trị của ng-hide là true thì sẽ ẩn HTML element, là false thì sẽ hiện HTML element.

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_html_show

###
**5. AngularJS Events**

**5.1. ng-click Directive**

```ng-click``` xác định sự kiện click trong AngularJS.

Ví dụ :

```HTML
<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
```

Mỗi khi click biến count sẽ tăng thêm 1 giá trị.

Demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_click

###

**5.2. Hiding HTML Elements**

```ng-hide``` có thể được sử dụng để xét visibility (ẩn hay hiện) của 1 phần ứng dụng (thường phần đó sẽ nằm trong 1 thẻ nào đó : <div>, <p>, <span>...)

**ng-hide="true"** thì HTML element là invisible (không được hiện)

**ng-hide="false"** thì HTML element là visible (được hiện)

```HTML

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

```

Trong đoạn code trên :

Ứng dụng có 1 thuộc tính default (biến) : ```$scope.myVar = false;```

```ng-hide``` để xét tính visible cho thẻ <p> gồm 2 input field thông qua giá trị (true hoặc false)của ```myVar```.

Mỗi khi click button sẽ gọi đến hàm ```toggle()```. Hàm ```toggle()``` chuyển đổi giá trị ```myVar``` giữa true và false.

Giá trị ```ng-hide="true"``` làm cho element (<p>) thành invisible (không được hiện).

Kết quả :

![Selection_017.png](https://images.viblo.asia/6ddd774b-0676-4787-adf4-54030527ea86.png)

Demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_hide

**5.3. Showing HTML Elements**

Tương tự như ```ng-hide``` phía trên, ```ng-show``` cũng được sử dụng để xét **visibility** cho HTML element. Nhưng trái với ```ng-hide``` :

**ng-show="false"** thì HTML element là invisible (không được hiện)

**ng-show="true"** thì HTML element là visible (được hiện)

Demo cũng tương tự như trên, chỉ khác thay vì ```ng-hide``` thì thay bằng ```ng-show``` và giá trị nhận được sẽ xét visibility cho thẻ <p> ngược với ```ng-hide```.

Demo cụ thể : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events

**6. AngularJS API - AngularJS Global API**

**AngularJS Global API** là 1 tập các hàm (chức năng) toàn bộ để thực hiện các tác vụ phổ biến như :

- So sánh các đối tượng.
- Tương tác giữa các đối tượng.
- Chuyển đổi dữ liệu.

Các hàm Global API được truy cập bằng cách sử dụng đối tượng ```angular```. Một số hàm Global API thông dụng :

|**API**|**Mô tả**|
| ------------- |:-------------:|
|angular.lowercase()|Chuyển đổi 1 string thành in thường|
|angular.uppercase()|Chuyển đổi 1 string thành in hoa|
|angular.isString()|Trả về ```true``` nếu tham chiếu là 1 string|
|angular.isNumber()|Trả về ```true``` nếu tham chiếu là 1 số|

###

- **angular.lowercase()**

    ![Selection_018.png](https://images.viblo.asia/ba17e7a5-4b00-4589-9074-3171c63da977.png)

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_api_lowercase

- **angular.uppercase()**

    ![Selection_019.png](https://images.viblo.asia/d2dd86dc-a274-4c05-ab86-1641073840fe.png)

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_api_uppercase

- **angular.isString()**

    Cú pháp tương tự lowercase và uppercase.

    Có 1 điều đặc biệt là chuỗi ký tự cần kiểm tra  phải đặt trong cặp dấu ```"input_string"``` HOẶC ```'input_string'``` thì mới có thể trả về kết quả true, và phía trong chuỗi **input_string** không được chứa ký tự trùng với ký tự bao ngoài của chuỗi input_string. Ví dụ :

    Bao ngoài là cặp dấu ```(`)```, bên trong input_string không chứ dấu ```(')``` nào thì kết quả trả về là **true**

    ![Selection_021.png](https://images.viblo.asia/1133acfe-32c0-4b09-ae06-9a9c0ee3667d.png)

    Nếu thêm ```(')``` vào trong input_string thì kết quả sẽ trở thành như sau :

    ![Selection_022.png](https://images.viblo.asia/036f8ebf-ba83-48e8-ba2c-c54f1a1c2bd8.png)

    Điều này cũng tương tự với trường hợp bao ngoài input_string là ```(")```

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_api_isstring

- **angular.isNumber()**

    Dùng để kiểm tra chuỗi ký tự đầu vào có phải là số hay không tương tự với kiểm tra String phía trên.

    Link demo : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_api_isnumber

**VI. Lời kết**

AngularJS có những tính năng rất đặc biệt như dependency injection giúp việc Unit test được dễ dàng hay Directives giúp cho người lập trình có thể chia nhỏ JavaScript vào các template. Do AngularJS tập trung vào khả năng test và chất lượng code cho nên việc có một thiết kế phù hợp cho dự án từ ban đầu là rất cần thiết.

AngularJS có 1 khối lượng kiến thức rất lớn cần phải học, trong khuôn khổ bài viết này chỉ có thể giới thiệu 1 số phần cơ bản và tổng quan về AngularJS. Nếu bạn quan tâm có thể tham khảo thêm ở 1 số trang web sau :

http://www.w3schools.com/angular/default.asp

https://docs.angularjs.org/tutorial

https://docs.angularjs.org/guide/

https://docs.angularjs.org/api