Angular.js

Xin chào các bạn, hôm nay tôi sẽ hướng dẫn các bạn viết một ứng dụng Angular.js đầu tiên. Ở đây, tôi giả sử bạn đã có kiến thức cơ bản về JavaScript, HTML, có thể thêm chút ít CSS và chúng ta sẽ thực hành để tạo ra ứng dụng đầu tiên sử dụng Angular.js

Một trong những kiến thức cơ bản nhất trong ứng dụng Angular là Binding. Vậy chương trình hello world của chúng ta hiển thị ra một thông điệp trên màn hình là Hello World!

Để bắt đầu, các bạn hãy tạo cấu trúc thư mục như sau:

helloworld
---index.html

Ok, hãy mở file index.html và viết đoạn mã như sau. Chú ý, chúng ta sẽ sử dụng thư viện Angular.js từ cdnjs (điều này sẽ có ích lợi về sau hoặc bạn có thể tải offline về để sử dụng trong quá trình học  và vọc)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>1. Hello World</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app>

<div ng-controller="HelloWorldController">
    <p>
        What is your name: <input type="text" ng-model="name"/>
    </p>
    <p>
        Hello {{name}} !
    </p>
</div>

<script>
    function HelloWorldController($scope) {
        $scope.name = "World";
    }
</script>

</body>
</html>

Khi chạy cho chúng ta kết quả như sau:

Hãy thử thay đổi, World trong model thành tên của bạn ? Khi đó giao diện web ngay lập tức hiển thị thông điệp sau:

Hell <your-name> !

Giải thích mã nguồn:

  • Dòng 6: Khai báo sử dụng thư viện Angular (phiên bản 1.2.16 từ cdnjs)
  • Dòng 8: Khai báo chỉ thị ng-app, cho biết vùng làm việc với tài liệu HTML mà Angular quản lý và xử lý.
  • Dòng 10: Khai báo sử dụng 1 controller điều khiển dữ liệu, cụ thể ở đây là HelloWorldController
  • Dòng 12: Khai báo một model cho phép người dùng thay đổi dữ liệu view model sẽ được hiển thị ở dòng 15.
  • Dòng 15: Hiển thị giá trị hiện tại của model, chúng ta đã khai báo trong HelloWorld controller 1 model là name.
  • Dòng 21: Khai báo HelloWorldController, xử lý các thông điệp lời chào

Trên đây là cấu trúc một ứng dụng Angular ở mức độ đơn giản nhất, trong loạt bài tiếp theo chúng ta sẽ làm việc ở một level cao hơn. Mã nguồn thanh gọn hơn !

About The Author

  • Lewis Hai

    Có vài ví dụ giúp các bạn học nhanh AngularJs http://angularjsaz.blogspot.com/2015/09/angularjs-table-via-sorting-and-filter.html

  • Huỳnh Duy

    hi ! mình học angular mấy bữa nay và mình có gặp vấn đề như thế này.

    – Có 1 field trong database mình có nhiều đoạn paragraph (abc xyz)
    – File php mình encode ra JSON
    – Và kết quả khi VIEW là: abc xyz chứ ko phải là abcxyz

    Trường hợp như thế này thì mình phải xử lý như thế nào ?

    Cám ơn 🙂