Search by category:
AngularJS

AngularJS Directives (ng-app, ng-init, ng-model) là gì

AngularJS Directives (ng-app, ng-init, ng-model) là gì? ng-app là gì? ng-init là gì, ng-model là gì? Ở bài trước chúng ta đã kịp tìm hiểu về cách tải cũng như cài đặt và chạy chương trình đầu tiên trong AngularJS. Bài học hôm nay cùng tìm hiểu về các thông số Directives trong AngularJS.

AngularJS Directives là gì?

AngularJS 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 ng-prefix

AngularJS directive được sử dụng để kế thừa HTML. Có những thuộc tính đặc biệt bắt đầu với tiền tố ng-. Chúng ta sẽ thảo luận những directive:

  • ng-app : Directive để bắt đầu một ứng dụng AngularJS.
  • ng-init : Directive để khởi tạo dữ liệu cho ứng dụng.
  • ng-model : Directive định nghĩa model như là một biến có thể sử dụng trong AngularJS.
  • ng-repeat : Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.

Cùng tìm hiểu kỹ hơn về các Directives này nhé.

ng-app là gì?

ng-app chỉ thị khởi tạo một ứng dụng AngularJS.

ng-init là gì?

Trong lập trình hướng đối tượng thì chúng ta có khái niệm hàm khởi tạo (constructor), thì ng-init cũng vậy, nó có ý nghĩa là khai báo dữ liệu khởi tạo khi ứng dụng vừa được chạy.

ng-model là gì?

ng-model là chỉ thị liên kết với các giá trị của các thẻ HTML (input, select, textarea) tới dữ liệu ứng dụng của ta.

ng-repeat là gì?

ng-repeat directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.

Xem ví dụ về AngularJS Directives:


<html>

<head>
<title>Directive trong AngularJS</title>
</head>

<body>
<h1>Tao ung dung AngularJS</h1>

<div ng-app = "" ng-init = "cacquocgia = [{locale:'en-VN',ten:'CH XHCN Viet Nam'}, {locale:'en-GB',ten:'Vuong Quoc Anh'}, {locale:'en-FR',ten:'Cong Hoa Phap'}]">
<p>Nhap ten cua ban: <input type = "text" ng-model = "ten"></p>
<p>Xin chao <span ng-bind = "ten"></span>!</p>
<p>Danh sach cac quoc gia va locale tuong ung:</p>

<ol>
<li ng-repeat = "quocgia in cacquocgia">
{{ 'Quoc Gia: ' + quocgia.ten + ', Locale: ' + quocgia.locale }}
</li>
</ol>
</div>

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

</body>
</html>

One Comment

Post Comment

Loading...
loading...
loading...