vi
new
0
Avatar
NguyenDuong @duongichi
2.2K 122 40
Đã đăng vào thg 12 28, 2016 7:27 SA 7 phút đọc
1.7K

AngularJS Introduction : Directives; Model; Data Binding; Controller ; Scope ; Filter

AngularJS là 1 framework Javascript được tích hợp vào page HTML thông qua tag <script>

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

AngularJS mở rộng thuộc tính của HTML với Directives, và bind dữ liệu tới HTML bằng Expression.

Mở rộng HTML

AngularJS cho phép bạn mở rộng HTML với thuộc tính mới được gọi là Directive.

Ngoài tập hợp các directives tich hợp trong AngularJS thì nó cũng cho phép bạn tự định nghĩa các directive theo ý mình .

AngularJS sẽ mở rộng các thuộc tính HTML với prefix ng-.

ng-app định nghĩa một ứng dụng AngularJS

ng-model binds giá trị của HTML (input, select, textarea) đến dữ liệu của ứng dụng.

ng-bind bind dữ liệu ứng dụng tới view HTML

Ví dụ :

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

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Ví dụ ở trên thì khi web đc load thì AngularJS cũng tự động đc chạy.

ng-app sẽ nói với AngularJS rằng thẻ

là "owner" của ứng dụng AngularJS.

ng-model sẽ bind dữ liệu trong khu vực mình nhập input text đến biến name.

ng-bind sẽ bind innerHTML của thẻ

tới biến name.

AngularJS Directives

ng-init sẽ khởi tạo một biến AngularJS

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Nếu bạn muốn làm page HTML của bạn chuẩn hơn thì nên sử dụng data-ng- thay vì ng-.

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

Phần expression {{ firstName }} thể hiện phần binding data AngularJS. Đây là cách AngularJS bind expression với dữ liệu .

{{ firstName }} sẽ liên kết với ng-model="firstName"

AngularJS Expressions

Expression của AngularJS được viết trong dạng 2 dấu đóng ngoặc {{ expression }}.

AngularJS sẽ trả dữ liệu theo cách mà expression đc viết.

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

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Chú ý là expression của AngularJS cũng bind dữ liệu tới HTML theo cách y hệt như ng-bind làm.

Bạn cũng có thể viết expression trong directive như sau : ng-bind="exrpression".

Cũng giống như Javascript expression, AngularJS expression có thể chứa kí tư, công thức tính toán or biến số. Tuy nhiên có 1 điểm khác là ANgularJS expression có thể viết ngay bên trong HTML. Ngoài ra AngularJS expression ko hỗ trợ các câu điều kiện, loops, exception trong khi Javascript expresion thì có. AngularJS expression hỗ trợ filter nhưng JavaScripot expression thì ko.

Tiếp theo là 1 số ví dụ cho bạn dễ hình dung về cách thức viết đa dạng của expression .

Ở đây bạn có thể thay màu được background của input textbox bằng cách thay giá trị nhập vào.

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

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>
Try it Yourself »

Sử dụng Arrays.

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Sử dụng Object

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

AngularJS Modules

Một module AngularJS sẽ định nghĩa một ứng dụng. Module là một container cho rât nhiều thành phần khác nhau của ứng dụng và controllers. Controller luôn luôn thuộc về 1 module.

Tạo 1 module sử dụng angular.module.

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

param "myApp" cho biết module này sẽ chạy trong khu vực HTML nào.

Tạo controller cho Module sử dụng ng-controller.

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

Bạn có thể tổ chức Module va Controller ở các file khác nhau và import nó vào.

Tạo Directive. AngularJS có một gói các directives cho phép bạn có thể sử dụng để add thêm chức năng cho app.

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = angular.module("myApp", []);

app.directive("w3TestDirective", function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>

AngularJS ng-model Directive

Như đã nói ở các phần trước ng-mode sẽ bind dữ liệu từ các control của HTML (input, select, textarea) đên dữ liệu của ứng dụng

Dưới đây là ví dụ bind giá trị cảu input fields đến biết được tạo trọng AngularJS.

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>

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

Bind dữ liệu xảy ra theo 2 chiều. Nếu user thay đổi value trong input field, giá trị thuộc tính AngularJS cũng sẽ thay đổi value đó.

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

ng-model có thể cung cấp nhiều dạng validation cho data.

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

Ở ví dụ trên, span sẽ được hiển thị nếu như expression trong attribute của ng-show trả về true.

ng-model cung cấp các class CSS cho các element HTML , dựa trên status của nó . Ví dụ như sau :

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    Enter your name:
    <input name="myName" ng-model="myText" required>
</form>
Try it Yourself »

Một vài class khác của ng-model dựa trên status trong field :

  • ng-empty

  • ng-not-empty

  • ng-touched

  • ng-untouched

  • ng-valid

  • ng-invalid

  • ng-dirty

  • ng-pending

  • ng-pristine

AngularJS Data Binding

Data binding trong AngularJS sẽ đồng bộ giữa model và view.

Các ứng dụng AngularJS thường sử dụng Data Model. Model này là 1 tập hơn các dữ liệu trong application.

Ví dụ :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

Container HTML nơi mà ứng dụng AngularJS được hiển thị gọi là view.

View có thể access đến model. Có một vài cách để hiển thị model trong view như chúng ta đã biết ở các phần trên chính là sử dụng ng-bind hoặc sử dụng expression {{ }}.

Ở đây sẽ có thêm 1 cách nữa là sử dụng ng-model để bind data từ model tới view trong HTML controls (input, select, textarea)

<input ng-model="firstname">

ng-model chính là cách mà bạn có thể bind dữ liệu 2 chiều giữ model và view. Khi dữ liệu trong model thay đổi, view sẽ phản ánh thay đổi đó, khi dữ liệu trong view thay đổi, model cũng sẽ được update. Việc này xẩy ra ngay lập tức và tự động, đảm bảo model và view luôn được update.

Ví dụ

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

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});
</script>

Ở ví dụ trên thì dữ liệu được đồng bộ dữa form input ng-model và expression {{firstname}}.

AngularJS Controller

Ứng dụng trong AngularJS được điều khiển bởi Controller.

AngularJS controller là các Object JS.

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

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

</div>

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

Giải thích ứng dụng :

Ứng dụng được định nghĩa bởi `ng-app="myApp". Ứng dụng này chạy bên trong thẻ <div>/

Thuộc tính ng-controller="myCtrl" là một directive của AngularJS. Nó định nghĩa một controller.

Hàm myCtrl là một hàm JS. AngularJS sẽ invoke controller với object $scope.

Trong AngularJS, $scope là một object ứng dụng. Controller tạo nên 2 thuộc tính trong scope. firstName và lastName.

ng-model directive sẽ bind dữ liệu inpu trong fields tới thuộc tính của controller.

Tất nhiên như chúng ta biết là controller cũng có thể có Methods.

<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 các ứng dụng lớn. Bạn có thể quản lý các Controller trong các files .

AngularJS Scope

Scope bind part giữa các HTML (tầng view ) và JS (controller)

Scope là một object với các thuộc tính và method sẵn có.

Scope luôn luôn có cho cả view và controller

Cách sử dụng scope . Khi bạn tạo một controller, bạn sẽ truyền tham số là object $scope.

Khi add thuộc tính vào object $scope trong contoller, view (HTML) sẽ truy cập vào những thuộc tính này. Trong view, bạn ko sử dụng prefix là $scope mà sử dụng propertyname như là {{carname}}.

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

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

AngularJS Filters

Fitler có thể đc add vào AngularJS để format dữ liệu.

currency chuyển format số về tiền tệ date Format ngày về một dạng format nào đó filter lấy một nhóm con trong 1 dãy json chuyển object thành JSON string limitTo giới hạn một array/strings vào một số kí tự / yếu tố được chỉ định sẵn lowercase format một string thành lower case number Format một số thành string orderBy Orders dãy bằng một expression. uppercase Format một string thành upper case

Add Filter vào Expression bằng cách sử dụng | .

Ví dụ, uppercase filter này sẽ chuyển 1 string thành upper case.

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

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

</div>

Add Filter vào Directive bằng cách sử dụng ng-repeat.

Ví dụ này là filter sắp xếp array sử dụng orderBy.

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

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

</div>

Nguồn học tập : http://www.w3schools.com/angular/default.asp

AngularJS

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í