vi
new
+3
Avatar
Hoang Van Trinh @Trinh.Pro
2.3K 71 26
Đã đăng vào thg 8 28, 2017 2:25 SA 7 phút đọc
6.7K

AngularJS dành cho người mới bắt đầu

Tính đến ngày hôm nay đã là gần 7 năm kể từ ngày AngularJS được chính thức ra mắt phiên bản đầu tiên. Nó không còn xa lạ với nhiều web developer bởi những ưu điểm của nó. Hôm nay tôi muốn giới giúp những bạn beginer có một cái nhìn tổng quan về AngularJS và cùng tôi đến với những demo thú vị giúp các bạn tiếp cận với AngularJS một cách tự nhiên nhất và yêu thích nhất.

1. Giới thiệu tổng quát.

Để học bất kì một cái gì mới chúng ta trước tiên cũng cần phải biết

  • Nó là cái gì?

Tôi sẽ giúp bạn trả lời các câu hỏi trên và tiếp đến ở phần sau chúng ta hãy đến với phần các ví dụ (demo) thú vị.

AngularJS là một framework mã nguồn mở dùng cho các ứng dụng web được xây dựng trên nền Javascript. Hiện tại nó vẫn đang được duy trì bởi Google và bỏi cộng đồng các cá nhân, doanh nghiệp để giải quyết các vấn đề khi xây dựng một ứng dụng web.

AngularJS có rất nhiều ưu điểm như:

  • 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.

Theo dịch vụ phân tích JavaScript Libscore, AngularJS được sử dụng trên các trang web của Wolfram Alpha, NBC, Walgreens, Intel, Sprint, ABC News và khoảng 12.000 trang web khác trong số 1 triệu bản được thử nghiệm vào tháng 10 năm 2016. AngularJS là dự án được đánh dấu sao thứ 10 trong mọi thời đại trên GitHub

Chém gió đến đây là đủ rồi, chúng hãy bắt đầu tìm hiểu sơ qua về các thành phần cơ bản của AngularJS trong mô hình dưới đây.

Trước khi đến với các ví dụ chúng ta cần hiểu sơ qua về các Directives.

Ng-app Khai báo phần tử gốc của một ứng dụng AngularJS, theo đó các directives có thể được sử dụng để khai báo ràng buộc và xác định hành vi. Ng-bind Đặt văn bản của một phần tử DOM vào giá trị của một biểu thức. Ví dụ: <span ng-bind = "name"> </ span> hiển thị giá trị của 'name' bên trong phần tử span. Bất kỳ thay đổi nào đối với biến 'name' trong phạm vi của ứng dụng phản ánh ngay lập tức trong DOM. Ng-model Tương tự với ng-bind, nhưng thiết lập một ràng buộc dữ liệu hai chiều giữa view và scope. Ng-model-options Cung cấp điều chỉnh để cập nhật model được thực hiện như thế nào. Ng-class Áp dụng một cách có điều kiện một lớp, tùy thuộc vào giá trị của một biểu thức boolean. Ng-controller Chỉ định một lớp điều khiển JavaScript để đánh giá các biểu thức HTML. Ng-repeat Khởi tạo một yếu tố một lần cho mỗi mục từ bộ sưu tập. Ng-show & ng-hide Hiển thị hoặc ẩn một phần tử theo điều kiện, tùy thuộc vào giá trị biểu thức boolean. Hiển thị và ẩn là đạt được bằng cách thiết lập kiểu hiển thị CSS. Ng-switch Tạo điều kiện cho một mẫu từ một tập hợp các lựa chọn, tùy thuộc vào giá trị của một biểu thức lựa chọn. Ng-view Chỉ thị cơ sở có trách nhiệm xử lý các tuyến đường [12] giải quyết JSON trước khi rendering các khuôn mẫu do các bộ điều khiển quy định. Ng-if Chỉ thị nếu tuyên bố rằng instantiates các yếu tố sau đây nếu điều kiện là đúng sự thật. Khi điều kiện là sai, phần tử sẽ bị xóa khỏi DOM. Khi đúng sự thật, một bản sao của phần tử được biên dịch sẽ được chèn lại. Ng-aria Một mô-đun hỗ trợ khả năng truy cập của các thuộc tính ARIA thông thường. Ng-animate Một mô-đun cung cấp hỗ trợ chuyển đổi JavaScript, CSS3 và các móc hoạt hình khung hình CSS3 trong các chỉ thị lõi và tùy chỉnh hiện có.

2. Các ví dụ

Tạm gác phần lí thuyết nhàm chán sang 1 bên, chúng ta bắt tay vào làm những ví dụ demo để có thể dần hiểu hơn về cách sử dụng những kiến thức phía trên một cách thích thú hơn.

2.1. Thay đổi màu sắc.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="" ng-init="myCol='red'">

<input ng-model="myCol" value="{{myCol}}">

<p style="color:{{myCol}}">Dòng chữ này sẽ thay đổi màu sắc dựa trên màu sắc được nhập vào ô bên trên</p>
</div>

</body>
</html>

2.2. Thay đổi nội dung

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Cai Dau kim Cuong";
});
</script>

</body>
</html>

Demo >>>>

Ứng dụng trong AngularJS được điều khiển bởi Controller. Các bạn có thể tham khảo thêm kiến thức về AngularJS Controllers

Bởi vì sự đồng bộ ngay lập tức của model và view, nên controller có thể được tách hoàn toàn khỏi view và chỉ tập trung vào model data . Nhờ sự ràng buộc dữ liệu trong AngularJS, phần view sẽ phản ánh bất kỳ thay đổi nào trong Controller.

2.3. Cộng hai số

  • B1: Đầu tiên chúng ta phải tạo một trang HTML và tạo form input bằng HTML để nhập vào hai số hạng.
<html>
  <head>
    <title>Angular JS Model</title>
    <meta charset='utf8'/>
  </head>
  <body ng-app="MyApp">
    <form name="totalForm" ng-controller="ExampleController">
      <h1>{{message.title}}</h1>
      <h5>{{message.num1}}:</h5>
      <input ng-model="so_thu_nhat" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <h5>{{message.num2}}:</h5>
      <input ng-model="so_thu_hai" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <div>{{message.total}} {{result.total}}</div>
      <div style='{{error}}'>
        {{message.error_invalid}}
      </div>
    </form>
  </body>
</html>

Ở form bên trên tôi đã sử dụng ng-pattern để tạo validate chỉ cho phép nhập các số từ 0-9 và sử dụng ng-keyup để bắt sự kiện nhập vào và gọi tới 1 hàm mình sẽ viết trong phần Javascript.

  • B2: Viết code JavaScript
   <script>
      angular.module('MyApp', [])
             .controller('ExampleController', ['$scope', function($scope)
        {
          $scope.message = {
            title: 'Tinh tong hai so',
            num1: 'So thu nhat',
            num2: 'So thu hai',
            total: "Tong hai so:",
            error_invalid: "Error: Phai nhap vao so nguyen duong!"
          };
          $scope.error = 'display:none';
          $scope.show_result = function()
          {
            if ($scope.totalForm.$valid) {
              $scope.error = 'display:none';
              $scope.result = {
                total: parseInt($scope.so_thu_nhat) + parseInt($scope.so_thu_hai),
              };
            }
            else {
              $scope.error = 'display:block; color: red';
            }
          };
        }
      ]);
    </script>

Ở bước này chúng ta cần khai báo giá trị cho các biến JS mà chúng ta đã viết trong bước 1. Tiếp đến chúng ta cần viết hàm show_result() với nội dung như sau:

Nếu nhập đúng số hạng thì sẽ in ra kết quả và ẩn thông báo lỗi Nếu nhập sai số hạng thì hiện thông báo lỗi

  • B3: Viết code CSS
  <style>
      *{margin:0;}
      body{padding: 20px}
      input {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
      }
      input.ng-invalid {
        color:white;
        background: red;
      }

    </style>

Ở đây chúng ta sẽ hiện dòng chữ thông báo màu đỏ khi nhập sai định dạng

Đây là toàn bộ code của ví dụ trên.

<html>
  <head>
    <title>Angular JS Model</title>
    <meta charset='utf8'/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <style>
      *{margin:0;}
      body{padding: 20px}
      input {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
      }
      input.ng-invalid {
        color:white;
        background: red;
      }

    </style>
    <script>
      angular.module('MyApp', [])
             .controller('ExampleController', ['$scope', function($scope)
        {
          $scope.message = {
            title: 'Tinh tong hai so',
            num1: 'So thu nhat',
            num2: 'So thu hai',
            total: "Tong hai so:",
            error_invalid: "Error: Phai nhap vao so nguyen duong!"
          };
          $scope.error = 'display:none';
          $scope.show_result = function()
          {
            if ($scope.totalForm.$valid) {
              $scope.error = 'display:none';
              $scope.result = {
                total: parseInt($scope.so_thu_nhat) + parseInt($scope.so_thu_hai),
              };
            }
            else {
              $scope.error = 'display:block; color: red';
            }
          };
        }
      ]);
    </script>

  </head>
  <body ng-app="MyApp">
    <form name="totalForm" ng-controller="ExampleController">
      <h1>{{message.title}}</h1>
      <h5>{{message.num1}}:</h5>
      <input ng-model="so_thu_nhat" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <h5>{{message.num2}}:</h5>
      <input ng-model="so_thu_hai" ng-pattern="/^[0-9]+$/" ng-keyup="show_result()" />
      <div>{{message.total}} {{result.total}}</div>
      <div style='{{error}}'>
        {{message.error_invalid}}
      </div>
    </form>
  </body>
</html>

Lời kết

Như vậy tôi đã giới thiệu tới các bạn về các kiến thức cơ bản của AngularJS và một số ví dụ đơn giản. Chúc các bạn có hứng thú học và làm chủ các kĩ thuật của Angular và áp dụng vào các project một cách linh hoạt. Hẹn gặp lại các bạn trong các bài viết sau.

Hoàng Văn Trình AS Việt Nhật K55 Đại học Bách Khoa Hà Nội

AngularJS AngularJS for beginer

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí