ANGULARJS CĂN BẢN PHẦN II

Như đã giới thiệu ở phần trước ANGULARJS CĂN BẢN PHẦN I AngularJS là một framework Javascript mạnh mẽ giúp mở rộng thêm thuộc tính của HTML nhằm giảm bớt quá trình phát triển ứng dụng web.

Phần trước chúng ta đã lần lượt tìm hiểu:

• CÀI ĐẶT ANGULARJS
• ANGULAR TEMPLATE
• MODULES
• SCOPE

Trong phần này xin tiếp tục giới thiệu một số thành phần cơ bản khác của AngularJs sẽ giúp bạn đọc hoàn thiện hơn cái nhìn tổng quan về framework này.

Ng-model cho biết đối tượng nhận giá trị của input. {{name}} sẽ in ra giá trị được nhập vào input.

Ví dụ

    <input type="text" class="form-control" ng-model="name">
    <h1>Hello {{name}}!</h1>

Kết quả

Controller là một hàm khởi tạo có nhiệm vụ thực hiện 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 tương ứng.

Khi một controller được gán vào các DOM trong HTML bằng thuộc tính chỉ thị ng-controller thì Angular sẽ nhận biết và tạo một đối tượng Controller mới sử dụng như là một hàm khởi tạo, nghĩa là sẽ được chạy khi website được load xong. Lúc này Angular cũng tạo luôn một đối tượng $$cope mới dành riêng cho controller đó.

Nên sử dụng Controller trong Angular khi:

• Controller trong Angular dùng để thiết lâp giá trị, trạng thái ban đầu cho đối tượng $$cope.
• Thêm các hàm, hành vi vào đối tượng $$cope.

Không nên sử dụng Controller trong Angular khi:

• Thao tác với DOM, nghĩa là dùng Controller để thay đổi giá trị của DOM (nội dung, thuộc tính). Trong trường hợp này thì có cơ chế data-binding rồi, bởi vậy không nên sử dụng Controller.
• Validate form, nghĩa là không dùng controller để kiểm tra định dạng dữ liệu input của form. Trong trường hợp này sử dụng Angular Form Controls để thay thế.
• Lọc dữ liệu, nghĩa là chuyển đổi định dạng dữ liệu, trong trường hợp này thì dùng đối tượng Filter trong Angular.
• Chia sẽ dữ liệu, trường hợp này dùng Angualar Service.
• Quản lý thời gian sống của các component.

Tìm hiểu ví dụ dưới để hiểu rõ hơn

<div ng-app="myApp" class="container" style="padding-top: 40px; text-align: center;">
  <%= image_tag "angularjs.jpg", class: "img-responsive", style: "margin-bottom: 20px;" %>
  <div class="show-scope-demo">
    <div ng-controller="TopController">
      <input type="text" class="form-control" ng-model="name">
      <h1>Hello {{name}}!</h1>
    </div>
</div>
</div>
<script type="text/javascript">
  var demo = angular.module("myApp",[]);
  demo.controller("TopController", ["$scope", function($scope) {
    $scope.name = "Hello World!";
  }]);
</script>

Trong đó

• Tạo một module cho ứng dụng:

<div ng-app="myApp" class="container" style="padding-top: 40px; text-align: center;">

• Đặt biến "demo" chứa module "myApp" của ứng dụng.

Đặt biến "demo" chứa module "myApp" của ứng dụng.

• Tạo một controller mới cho module này

demo.controller("TopController", ["$scope", function($scope) {
    $scope.name = "Hello World!";
  }]);

• TopController là tên của controller, cách đặt tên nên chứa tên và đuôi “Controller” để dễ nhận biết.

Kết quả

Expression được sử dụng trong tất cả các phần của AngularJs, vì vậy cần phải nắm vững về expression và cách mà Angular sử dụng, tính toán. AngularJS expressions là cũng giống như JavaScript expressions. Chúng có thể chứa literals (hằng số, chuỗi kí tự), operators (toán tử), và variables (biến).

Biểu thức trong AngularJS là được viết trong hai dấu ngoặc nhọn: {{ expression }}.

Một biến được khởi tạo từ controller thông qua $$cope cũng được coi là một expression.

Ví dụ

<h1>My first expression: {{ 5 + 5 }}</h1>

Kết quả

Trong Angular, một filter cung cấp một định dạng dữ liệu để hiển thị tới người dùng.

Filters có thể được thêm vào biểu thức (expressions) và chỉ thị (directives) bằng cách sử dụng kí tự "|".

Một số filters được xây dựng sẵn

• currency: Định dạng một số đến một định dạng tiền tệ.
• filter : Chọn một tập hợp con của các mục từ một mảng.
• lowercase : Định dạng một chuỗi đến viết thường.
• orderBy : Xắp sếp một mảng bằng một biểu thức.
• uppercase : Định dạng một chuỗi đến viết hoa.
• ...

Ví dụ

<input type="text" class="form-control" ng-model="name">
<h1>Hello {{name | uppercase}}!</h1>

Kết quả

Directives là một thành phần mở rộng HTML, hay nói cách khác là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm, vì nó của riêng của Angular nên phải tuân thủ theo nguyên tắc của nó là chữ bắt đầu luôn luôn là ký tự ng-, tên của derective được khai báo ngay sau đó.

AngularJS cung cấp cho chúng ta 3 loại directive đó là :

• Directive dạng element ( là 1 thẻ HTML ) viết tắt là E.

<my-directive></my-directive>

• Directive dạng attribute ( thuộc tính của 1 thẻ HTML ) viết tắt là A, dạng này là mặc định.

<div my-directive></div>

• Directive dạng class( class CSS ) viết tắt là C.

<div class="my-directive"></div>

Ví dụ

<input type="text" class="form-control" ng-model="name">
<h1>Nội dung bạn đang gõ là:</h1>
<h1 ng-bind="name"></h1>

Kết quả

Trong ví dụ trên chúng ta sử dụng Directive ng-model để khai báo model và dùng Directive ng-bind để lấy data từ model.

Để hai Directives ng-model và ng-bind liên kết được thì giá trị của nó phải giống nhau.

ng-model="name", ng-bind="name"

Danh sách AngularJS Directives

Do danh sách Directives trong AngularJS quá nhiều nên các bạn có thể tham khảo trên Danh sách AngularJS Directives để biết nhiệm vụ và cách sử dụng của từng directive.

Tự định nghĩa Directives

Tìm hiểu ví dụ sau

<div ng-app="myApp" class="container" style="padding-top: 40px; text-align: center;">
  <%= image_tag "angularjs.jpg", class: "img-responsive", style: "margin-bottom: 20px;" %>
  <div class="show-scope-demo">
    <div ng-controller="TopController">
      <h1><div my-directive></div></h1>
    </div>
</div>
</div>
<script type="text/javascript">
  var demo = angular.module("myApp",[]);
  demo.controller("TopController", ["$scope", function($scope) {
    $scope.name = "Hello World!";
  }])
  .directive("myDirective", function() {
    return {
      template: "<h1>Tự định nghĩa Directives</h1>"
    };
});;
</script>

Trong đó

• Định nghĩa một Directive và giá trị của nó.

<h1><div my-directive></div></h1>
.directive("myDirective", function() {
  return {
    template: "<h1>Tự định nghĩa Directives</h1>"
  };
});

Kết quả

Bài viết chỉ giới thiệu những thành phần cơ bản nhất của AngularJS giúp những bạn mới làm quen với framework này khỏi bỡ ngỡ và có hướng đi đúng đắn. Những phần nâng cao hơn hoặc đi vào chi tiết các bạn có thể tham khảo tại Trang chủ AngularJS.

Thanks you for reading!!!