Tạo ứng dụng AngularJS đầu tiên

Phạm Anh

Trước khi bắt đầu tạo ứng dụng XinChao bằng AngularJS, chúng ta hãy xem các phần thực tế của một ứng dụng AngularJS là gì. Một ứng dụng AngularJS bao gồm ba phần quan trọng sau:

ng-app: Directive này định nghĩa và gắn kết một ứng dụng AngularJS đến trang HTML.
ng-model: Directive này gắn kết các giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào của HTML.
ng-bind: Directive này gắn kết dữ liệu của ứng dụng AngularJS đến các thẻ HTML.

Các bước tạo một ứng dụng AngularJS

Bước 1: Tải framework

Là một khung JavaScript thuần, thư viện AngularJS có thể được thêm vào bởi sử dụng thẻ <script>, theo một trong hai cách sau:

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

hoặc với đường dẫn đến thư viện AngularJS bạn đã tải trong chương Hướng dẫn cài đặt AngularJS:

<head>
   <script src="D:\angular.min.js"></script>
</head>

Bước 2: Định nghĩa ứng dụng AngularJS sử dụng ng-app directive.

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

Bước 3: Định nghĩa tên một model sử dụng ng-model directive.

<p>Nhap ten cua ban: <input type="text" ng-model="ten"></p>

Bước 4: Gắn kết giá trị của model đã được định nghĩa ở trên sử dụng ng-bind directive.

<p>Xin chao <span ng-bind="ten"></span>!</p>

Các bước để chạy một ứng dụng AngularJS

Sử dụng các bước bên trên để tạo ra một trang HTML.

testAngularJS.jsp

<html>
    <head>
        <title>Tao ung dung AngularJS dau tien</title>
    </head> 
   
    <body>
        <h1>Ung dung XinChao trong AngularJS</h1>

        <div ng-app="">
            <p>Nhap ten cua ban: <input type="text" ng-model="ten"></p>
            <p>Xin chao <span ng-bind="ten"></span>!</p>
        </div>

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

    </body>
</html>