ANGULARJS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

[Học AngularJS] - Bài 01 - Hello World!

Đây là bài đầu tiên trong loạt serie video học angularjs căn bản. Trong serie này chúng ta sẽ cùng nhau học AngularJS step by step, có nghĩa là loạt serie này sẽ dẫn đường cho các bạn chinh phục bộ Javascript Framework khá hay này. Trong bài này chúng ta sẽ học cách download và tích hợp thư viện này vào website, sau đó sẽ viết chương trình "Hello World!"

# Download AngularJS

Để download angular thì bạn sẽ vào đường dẫn này và chọn Version 1.3.9 vì trong loạt serie này chúng ta sử dụng version này để học.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

download angularjs png

Sau khi click vào Version 1.3.9 thì bạn sẽ thấy rất nhiều file nhưng bạn chỉ quan tâm đến file angular.min.js, các file còn lại là các directive mở rộng hoặc các service mở rộng (sẽ tìm hiểu sau). Tuy nhiên có một lưu ý là các file có chữ min là file đó đã rút gọn dung lượng nên phù hợp để viết dự án thực.

download angularjs 2 png

Bạn click vào file angular.min.js và lưu về máy của bạn nhé.

# Hello World!

Bây giờ chúng ta sẽ viết một chương trình Hello World để các bạn biết sơ qua về AngularJS.

Bước 1: Tạo các folder cho ứng dụng angularjs

Trước tiên bạn cần tạo các folders và các files như sau:

helloworld png

Trong đó:

  • angular.min.js là thư viện mà bạn đã download về
  • app.js nội dung trắng, trong bài này chúng ta chưa sử dụng file này nhưng ở các bài sau sẽ sử dụng nên bạn tạo sẵn luôn
  • index.html là file chạy chính của chúng ta nên khi tôi nói là chạy lên thì bạn sẽ hiểu là chạy file index.html này nhé.

Bước 2: Viết mã cho file index.html

Trong file index.html bạn viết đoạn mã sau vào:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="app/components/angular.min.js"></script>
    </head>
    <body ng-app="">
        {{1 + 2}}
    </body>
</html>

Các bạn để ý các vấn đề sau trong đoạn mã HTML trên:

  • Tôi có import thư viện angular.min.js vào ứng dụng
  • Thẻ body tôi có thêm một thuộc tính ng-app=""
  • Tôi sử dụng một biểu thức {{1 + 2}}

Khi chạy lên kết quả trên màn hình sẽ xuất hiện số 3. Như vậy ta sẽ có kết luận như sau:

  • Để sử dụng được Angular thì ta phải import thư viện đó vào
  • Mỗi ứng dụng Angular luôn phải khai báo một thuộc tính tên là ng-app="". Thuộc tính này chúng ta sẽ tìm hiểu kỹ hơn trong bài tiếp theo
  • Ta sử dụng hai cặp dấu {{}} và bên trong hai cặp dấu này chính là những dữ liệu của Angular, nội dung bên trong sẽ được hiểu như một đoạn mã javascript thông thường và nó sẽ chạy bình thường (giống hàm eval() ). Như ở ví dụ trên thì nó sẽ chạy và lấy 1 + 2 nên kết quả là 3.

# Example

Bây giờ bạn chỉnh lại nội dung của file index.html như sau:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="app/components/angular.min.js"></script>
    </head>
    <body ng-app="">
        <input ng-model="username"/>
        {{username}}
    </body>
</html>

Bây giờ chạy lên sẽ xuất hiện một ô input, sau đó gõ nội dung vào ô input bạn sẽ thấy một dòng chữ xuất hiện với nội dung y chang nội dung bạn đã nhập. Lý do như sau:

  • Ta có sử dụng một Directive ng-model="username" khai ở input
  • Ta sử dụng biểu thức của angular {{username}} mà giá trị của username lúc này ta khai báo ở model trong ô input nên khi nội dung của ô input thay đổi thì nó sẽ thay đổi theo.

# Summary

Các vấn đề trong bài này có sử dụng cơ chế binding data nhưng mà chúng ta đang học basic nên tôi sẽ chưa đề cập vội vào cơ chế này, các bạn chưa cần phải vội, chứ học làm theo và chạy được là quá tốt rồi. Một ngày nào đó bạn sẽ tự ngẫm ra câu trả lời cho những gì mà bạn đang thắc mắc.

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Http service trong Angular 4

Http service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về http service trong Angular 4.

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Top