Kỹ thuật web

Tập tành sử dụng angularJS

15/04/2020

Tập tành sử dụng AngularJS là bài viết hướng dẫn dùng các sử dụng AngularJS – thư viện giúp bạn code javascript dễ dàng hơn.

Giới Thiệu AngularJS

AngularJS là một thư viện giúp bạn code JavaScript dễ dàng hơn, nhất là các trang web cần tính toán và các nghiệp vụ phức tạp. Rất nhiều lập trình viên ưa chuộng và sử dụng.

Angular có 2 dòng khác nhau là Angular 1.x (còn có tên là AngularJS) và Angular 2,3,4,5,6,7,8 (còn có tên là Angular). AngularJS dễ học hơn, thích hợp cho người mới bắt đầu.

Các khái niệm cần biết trong AngularJS

Application: ứng dụng angularJS . Trong mỗi trang web, bạn chỉ được tạo 1 app.
Controller:Mỗi Controller là 1 vùng riêng trong trang được điều khiển để thực hiện 1 việc gì đó, thường là hiển thị kết quả dữ liệu. Ví dụ vùng hiện danh sách user, vùng thêm user… mỗi vùng có 1 controller điều khiển khác nhau.
Scope: là đối tượng gắn liền với 1 controller, scope chứa các biến trong controller.
Data-binding: là cơ chế tự động đồng bộ dữ liệu giữa model và view. Một biến được gán trong hàm xử lý, lập tức tự động hiện ra ngay những vị trí được bind.

Nhúng AngularJS vào trang

Để nhúng AngularJS vào trang của mình, bạn nhúng trực tiếp từ link internet như sau:<script src= “https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”> </script>

Hoặc download bằng cách vào địa chỉ https://angularjs.org/

Copy link trong mục CDN (hình trên) rồi paste vào thanh địa chỉ trình duyệt + Enter . Sau đó save về local để dùng, rồi nhúng vào trang bằng tag script <script src=”angular.min.js”></script>

Chương trình AngularJS đầu tiên

Trong 1 trang web dùng AngularJS, bạn cần thực hiện các việc sau:

Nhúng thư viện AngularJS
Tạo 1 ứng dụng cho AngularJS trong 1 tag nào đó dùng chỉ thị ng-app
Tạo 1 controller bằng chỉ thị ng-controller. Trong ví dụ dưới, controller có tên là myctrl
Khai báo hàm xử lý cho controller để tính toán dữ liệu. Trong ví dụ dưới là myfunc()
Hiển thị các biến/biểu thức trong các tag html. Trong ví dụ dưới là {{welcome}}

a. Coding chương trình AngularJS đầu tiên

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

<body ng-app="myapp">
<div ng-controller="myctrl">
    <h1>{{welcome}}</h1>
</div>
</body>
<script>
  var app = angular.module("myapp",[]);
  app.controller("myctrl",myfunc);
  function myfunc($scope){
      $scope.welcome="Welcome to AngularJS";
  }
</script>

b. Giải thích các thành phần

<script src= “..angular.min.js”> </script>	Nhúng thư viện AngularJS vào trang để có thể dùng các chức năng mà nó cung cấp.
ng-app	Tạo ứng dụng AngularJS, mỗi ứng dụng có 1 tên. Mỗi trang chỉ tạo được 1 ứng dụng. ng-app khai báo trong tag nào cũng được.Thường chỉ định tag body có @ng-app luôn (để phạm vi ứng dụng là toàn trang)
ng-controller	Tạo controller với tên chỉ ra, mỗi controller có 1 tên. Trong mỗi controller có thể tạo nhiều biến. Các biến sẽ được gán giá trị qua trong hàm xử lý.
{{welcome}}	Là biến/biểu thức để đưa giá trị vào. welcome là 1 biến khai báo trong đối tượng $scope
app.controller(“myctrl”, myfunc);	Khai báo hàm xử lý cho controller

Các chỉ thị cơ bản trong AngularJS

Các chỉ thị của AngularJS thường bắt đầu bằng ng-*, được ghi trong thuộc tính của các tag HTML. Sau đây là các chỉ thị cơ bản:

ng-app =>Khai báo ứng dụng AngularJS
ng-controller =>Khai báo 1 controller
ng-bind =>Buộc dữ liệu vào 1 tag HTML thay cho biểu thức {{ }}
ng-if = “expression” => Thực hiện khi biểu thức có giá trị là true
ng-repeat = “array” => Lặp qua các phần tử của mảng
ng-model => lệnh buộc dữ liệu 2 chiều giữa control trong form vào biến trong $scope. Khi đổi dữ liệu trong $scope thì sẽ đổi dữ liệu trên control và ngược lại.

Chỉ thị ng-if

  <body ng-app="myapp">
  <div ng-controller="myctrl" >
    <p>Họ tên: {{name}}</p>
    <p>Giới tính:
        <span ng-if="gender==true">Nam</span>
        <span ng-if="gender==false">Nữ</span>
    </li>
    <p>Xếp loại:
        <span ng-if="mark<5">Yếu/kém</span>
        <span ng-if="mark>=5 && mark < 8">Trung bình</span>
        <span ng-if="mark>=8">Giỏi</span>
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<script>
  var app= angular.module("myapp",[]);
  app.controller("myctrl", function($scope){
     $scope.name = "Đào Kho Báu";
     $scope.mark = 9;
     $scope.gender =true;
  })
</script>

Chỉ thị ng-repeat

Đây là chỉ thị rất hay, dùng để lặp qua mảng. Ví dụ ở trên là code để duyệt qua các phần tử trong mảng array. Với mỗi phần tử của mảng thì angular sẽ bổ sung một thẻ <element> vào trang web , item là biến chứa phần tử hiện tại, còn $index chứa chỉ số của phần tử hiện tại đang duyệt

Ví dụ 1:

<body ng-app="myapp" ng-controller="myctrl">
  <p ng-repeat="sv in students">{{$index}}. {{sv}}</p> 
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<script>
  var app= angular.module("myapp",[]);
  app.controller("myctrl",function($scope){
    $scope.students=["Tuấn","Cường","Hương","Trang","Sơn"];
  })
</script>

Ví dụ 2:

Khi lặp mỗi phần tử trong mảng, 1 tag tr sẽ được tạo ra thêm.

<body ng-app="myapp" ng-controller="myctrl">
<table border="1" cellspacing="0" cellpadding="4">
  <tr><th>ID</th><th>Password</th><th>Role</th></tr>
  <tr ng-repeat="u in users">
      <td>{{u.id}}</td>
      <td>{{u.password}}</td>
      <td>{{u.role}}</td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<script>
  var app= angular.module("myapp",[]);
  app.controller("myctrl",function($scope){
    $scope.users=[
      {id:"Tuấn", password:"123456", role:"admin" },
      {id:"Hạnh", password:"iloveyou", role:"user" },
      {id:"Cường",password:"songlong", role:"supervisor"}
    ];
  })
</script>

Chỉ thị ng-model

ng-model là chỉ thị giúp buộc 1 control trong form với 1 biến trong $scope, nhờ đó, dữ liệu trong control được tự động truyền vào $scope và ngược lại.

*Khi bạn nhập vào ô* **Họ và tên** *thì sẽ làm đổi giá trị biến* **$scope.name** *và đổi ngay lập tức dữ liệu hiển thị Họ và tên đã nhập*

Ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<body ng-app="myapp">
  <div ng-controller="myctrl">
      <p>USD: <input ng-model="usd"></p>
      <p>Tỷ giá: <input ng-model="tygia"></p><hr>
      <p>Tỷ giá: {{tygia}}</p>
      USD : {{usd}}   . VND : <b> {{tygia*usd}}  </b>
      <script>                
          angular.module("myapp",[]).controller("myctrl",function ($scope){
              $scope.tygia=23000;
          });
        </script>
  </div>
</body>

Kiểm lỗi trong form

Kiểm lỗi trong form là việc kiểm tra dữ liệu trong form xem user nhập có đúng như mong muốn hay không. Ví dụ user nhập điểm phải từ 0 đến 10…

Các thuộc tính trong html5 giúp kiểm tra dữ liệu

Trong HTML 5 bạn có thể kiểm dữ liệu trong form qua các thuộc tính của của html5 như

required
type=”email”
type=”number”
min: giá trị nhỏ nhất
max : giá trị lớn nhất
minlength : số ký tự tối thiểu
maxlength : số ký tự tối đa

Ví dụ:

Tên SP: <input name="tensp" required minlength="2" maxlength="30">
Điểm : <input name="diem" type="number" min="1" max="10">

Angular bổ sung vào nhiều chức năng giúp kiểm tra dữ liệu trong form dễ dàng hơn. AngularJS không chỉ giúp bạn kiểm tra lỗii mà còn cho biết tình trạng của các control, cho biết tình trạng lỗi của form.

Ví dụ 1: Hiển thị tình trạng lỗi

Giải thích:

– Để biết user nhập dữ liệu chưa, bạn kiểm tra biến $valid của control đó (angular đã tự bổ sung biến này cho bạn). Cú pháp như sau:

<tên form>.<tên điều khiển>.$valid   Ví dụ: frmUser.txtName.$valid

Nếu user nhập đúng thì giá trị $valid là true (angular tự gán) ngược lại là false

– Form hợp lệ khi tất cả các điều khiển của form hợp lệ

– Để xác định form đã hợp lệ hay chưa bạn sử dụng thuộc tính $valid của form

<tên form>.$valid

Ví dụ 2:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email"  type="email">
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
    <h4>Tình trạng lỗi của các control:</h4>
    <ul>
      <li>Họtên: {{frm1.hoten.$valid}}</li>
      <li>Mail: {{frm1.mail.$valid}}</li>
    </ul>
    <h4>Tình trạng lỗi của các form: {{frm1.$valid}}</h4>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Các thuộc tính trong angularjs cho biết trạng thái lỗi của control trong form

AngularJS cung cấp nhiều thuộc tính (bắt đầu là dấu $) giúp bạn biết được tình trạng lỗi của các control trong form, như: $dirty, $pristine…

Thuộc tính	Ý nghĩa	Ví dụ
$untouched	Chưa tác động	frm1.txt1.$untouched
$touched	Đã tác động	frm1.txt1.$touched
$pristine	Chưa có sửa chữa	frm1.txt1.$pristine
$dirty	Đã có sửa chữa	frm1.txt1.$dirty
$invalid	Chưa hợp lệ	frm1.txt1.$invalid
$valid	Đã hợp lệ	frm1.txt1.$valid

Các thuộc tính cho biết trạng thái lỗi của form

AngularJS cũng cung cấp cho bạn các thuộc tính để biết tình trạng lỗi nhập dữ liệu của form, như: $invalid, $pristine…

Thuộc tính	Ý nghĩa	Ví dụ
$pristine	Chưa có sửa chữa	frm1.$pristine
$dirty	Đã có sửa chữa	frm1.$dirty
$invalid	Chưa hợp lệ	frm1.$invalid
$valid	Đã hợp lệ	frm1.$valid
$submitted	Đã gửi dữ liệu	frm1.$submitted

Ví dụ 3: Báo lỗi thân thiện

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
          <span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email" required type="email">
          <span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
        
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Ví dụ 3: Kiểm tra khoảng giá trị

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
          <span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email" required type="email">
          <span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
        </div>
        <div class="form-group">
            <label>Tuổi</label>
            <input name="tuoi" class="form-control" ng-model="tuoi" required type="number">
            <em ng-if="frm1.tuoi.$invalid || tuoi<6 || tuoi>18" class="text-danger h6">Nhập tuổi từ 6 đến 18 nhé</em>
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Ví dụ 4: Kiểm tra có chọn radio button không

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
          <span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email" required type="email">
          <span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
        </div>
        <div class="form-group">
            <label>Tuổi</label>
            <input name="tuoi" class="form-control" ng-model="tuoi" required type="number">
            <em ng-if="frm1.tuoi.$invalid || tuoi<6 || tuoi>18" class="text-danger h6">Nhập tuổi từ 6 đến 18 nhé</em>
        </div>
        <div class="form-group">
            <label>Phái</label>
            <fieldset class="border border-secondary p-3">
                <input ng-model="phai" name="phai" type="radio"  value="0"> Nam &nbsp;
                <input ng-model="phai" name="phai" type="radio"  value="1"> Nữ
                <em ng-if="!phai" class="text-info h6"><br>Chọn phái đi bồ</em>
            </fieldset>
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Ví dụ 5: Kiểm tra có chọn 1 checkbox nào không

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
          <span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email" required type="email">
          <span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
        </div>
        <div class="form-group">
            <label>Tuổi</label>
            <input name="tuoi" class="form-control" ng-model="tuoi" required type="number">
            <em ng-if="frm1.tuoi.$invalid || tuoi<6 || tuoi>18" class="text-danger h6">Nhập tuổi từ 6 đến 18 nhé</em>
        </div>
        <div class="form-group">
            <label>Phái</label>
            <fieldset class="border border-secondary p-3">
                <input ng-model="phai" name="phai" type="radio"  value="0"> Nam &nbsp;
                <input ng-model="phai" name="phai" type="radio"  value="1"> Nữ
                <em ng-if="!phai" class="text-info h6"><br>Chọn phái đi bồ</em>
            </fieldset>
        </div>
        <div class="form-group">
            <label>Ngoại ngữ</label>
            <fieldset class="border border-secondary p-3">
                <input ng-model="anh" value="nna" type="checkbox"> Tiếng Anh &nbsp;   
                <input ng-model="phap" value="nnp" type="checkbox"> Tiếng Pháp  &nbsp; 
                <input ng-model="hoa" value="nnh" type="checkbox"> Tiếng Hoa
                <em ng-if="!anh && !phap && !hoa " class="text-secondary h6"><br>Chọn ít nhất 1 ngoại ngữ</em>
            </fieldset>
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Ví dụ 6: Kiểm tra selectbox có chọn không

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body ng-app="myapp" ng-controller="f" class="text-center">
    <form class="col-5 mx-auto border border-primary rounded p-3" name="frm1" >
        <div class="form-group">
          <label>Họ tên</label>
          <input name="hoten" class="form-control" ng-model="ht" required minlength="3">
          <span ng-if="frm1.hoten.$invalid" class="text-danger h5">Nhập họ tên từ 3 ký tự trở lên nhé</span>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input name="mail" class="form-control" ng-model="email" required type="email">
          <span ng-if="frm1.mail.$invalid" class="text-danger h5">Nhập đúng email nhé</span>
        </div>
        <div class="form-group">
            <label>Tuổi</label>
            <input name="tuoi" class="form-control" ng-model="tuoi" required type="number">
            <em ng-if="frm1.tuoi.$invalid || tuoi<6 || tuoi>18" class="text-danger h6">Nhập tuổi từ 6 đến 18 nhé</em>
        </div>
        <div class="form-group">
            <label>Phái</label>
            <fieldset class="border border-secondary p-3">
                <input ng-model="phai" name="phai" type="radio"  value="0"> Nam &nbsp;
                <input ng-model="phai" name="phai" type="radio"  value="1"> Nữ
                <em ng-if="!phai" class="text-info h6"><br>Chọn phái đi bồ</em>
            </fieldset>
        </div>
        <div class="form-group">
            <label>Ngoại ngữ</label>
            <fieldset class="border border-secondary p-3">
                <input ng-model="anh" value="nna" type="checkbox"> Tiếng Anh &nbsp;   
                <input ng-model="phap" value="nnp" type="checkbox"> Tiếng Pháp  &nbsp; 
                <input ng-model="hoa" value="nnh" type="checkbox"> Tiếng Hoa
                <em ng-if="!anh && !phap && !hoa " class="text-secondary h6"><br>Chọn ít nhất 1 ngoại ngữ</em>
            </fieldset>
        </div>
        <div class="form-group">
            <label>Tỉnh</label>
            <select name="t" ng-model="tinh"class="form-control bg-secondary text-white">
                <option value="0">Chọn tỉnh</option>
                <option value="1">TP HCM</option>
                <option value="2">Tiền giang</option>
                <option value="3">Long An</option>
            </select>
            <em ng-if="!tinh || tinh==0" class="text-dark h6">Hãy chọn tỉnh</em>
        </div>
        <button class="btn btn-warning" type="submit"> Xử lý </button>
    </form>
</body>
<script>
  var app= angular.module("myapp",[]);
  app.controller("f",function($scope){
    
  })
</script>

Qua bài này, Bạn đã bước đầu tập tành sử dụng AngularJS để biết rằng có những thư viện javascript được tạo ra để giúp bạn lập trình Javascript. Trong AngularJS còn nhiều tính năng hay nữa nhưng đợi đến khi có dịp bạn sẽ biết. Đặc điểm chung của các thư viện javascript là giúp web dev triển khai code javascript nhanh chóng và đỡ cực hơn khi coding thủ công. Trong tương lai, còn nhiều thư viện javascipt đang chờ đợi bạn khám phá như Jquery, VueJS, ReactJS…

Giới Thiệu AngularJS

Các khái niệm cần biết trong AngularJS

Nhúng AngularJS vào trang

Chương trình AngularJS đầu tiên

a. Coding chương trình AngularJS đầu tiên

b. Giải thích các thành phần

Các chỉ thị cơ bản trong AngularJS

Chỉ thị ng-if

Chỉ thị ng-repeat

Ví dụ 2:

Chỉ thị ng-model

Kiểm lỗi trong form

Các thuộc tính trong html5 giúp kiểm tra dữ liệu

Các thuộc tính trong angularjs cho biết trạng thái lỗi của control trong form

Các thuộc tính cho biết trạng thái lỗi của form

BÀI VIẾT LIÊN QUANXEM THÊM

Kết nối từ NodeJS đến PostgreSQL

Kết nối đến PostgreSQL từ Laravel

Kết nối từ PHP đến PostgreSQL

BÀI VIẾT LIÊN QUAN XEM THÊM