AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS

Nền tảng Kiến thức - Hành trang tới Tương lai
Card image

Chương 10-Bài 1. AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS

Tác giả: Dương Nguyễn Phú Cường #95
Ngày đăng: Hồi xưa đó
Lượt xem: 409

AngularJS là gì?

AngularJs là một Javascript Framework được tạo ra để xây dựng các ứng dụng web động (dynamic web app), nó thường được sử dụng để tạo ra các ứng dụng một trang ( Single Page Application - SPA). Và hoạt động dựa trên việc mở rộng thêm các thuộc tính (attribute) cho các thẻ của HTML (Các thuộc tính theo quy tắc của Angular). AngularJS là một nền tảng miễn phí và được hàng ngàn lập trình viên trên thế giới ưa chuộng.

Lịch sử phát triển AngularJS

AngularJS version 1.0 được phát hành vào năm 2012. Miško Hevery, một nhân viên của Google, bắt đầu phát triển AngularJS vào năm 2009. Ý tưởng sau đó được công bố rộng rãi, và dự án AngularJS sau đó đã được Google hỗ trợ chính thức. Angular có 2 phiên bản hoàn toàn khác nhau, phiên bản 1 và phiên bản khác 1.

Version 1:

Phiên bản 1 có tên chính thức là AngularJS, hiện tại nó đã được ngừng phát triển. Ngày 9 tháng 8 năm 2018 phiên bản 1.7.3 được phát hành. Dưới đây là các mốc thời gian:
Version Release Date (dd/MM/yyyy)
1.7.3 09/08/2018
1.7.2 12/06/2018
1.7.1 08/06/2018
1.7.0 11/05/2018
1.6.10 18/04/2018
1.6.9 02/02/2018
1.6.8 22/12/2017
1.6.7 25/11/2017
1.6.6 18/08/2017
Phiên bản Angular1 (angularJS) thực sự dựa trên Javascript, các lập trình viên sẽ viết mã theo ngôn ngữ Javascript, vì vậy có vẻ là dễ học dễ làm và các nhà tuyển dụng dễ tìm được ứng viên. Nhưng về mặt hiệu năng nó đang bị cộng đồng lập trình viên mang ra so sánh với ReactJS. Nhiều công ty phát triển phần mềm muốn xây dựng một sản phẩm mới thường cân nhắc sử dụng Angular phiên bản khác 1.

Version 2, 3, 4, ..

Bắt đầu từ phiên bản 2 nó có tên chính thức là Angular. Ngày 4 tháng 5 năm 2018 phiên bản 6 chính thức được phát hành. Dưới đây là các mốc sự kiện:
Version Release Date (dd/MM/yyyy)
7.0.0 12/2018 (?)
6.0.0 05/05/2018
5.0.0 01/11/2017
4.0.0 12/12/2016
2.0.0 23/10/2014 (*)
Angular phiên bản 2 trở lên có tư duy thay đổi hoàn toàn so với Angular1. Sự thay đổi này được tạo ra với tham vọng sẽ giúp Angular đánh bại ReactJS.
Một số cải tiến của Angular theo tư duy mới:
Component:
Ý tưởng chủ đạo của Angular4 mới là Component (Thành phần), Component không có gì xa lạ trong ReactJS, nhưng Componentlà khái niệm mới mà Angular1 (AngularJS) không có. Component được Angular4 áp dụng để tạo cấu trúc code rõ ràng và có khả năng tái sử dụng lại các component có sẵn.
Typescript:
Typescript được Miscrosoft phát triển để viết mã Javascript mang phong cách tính hướng đối tượng (Object-oriented). Bản thân Javacript nguyên thủy được thiết kế rất đơn giản và đi theo hướng lập trình chức năng (Functional programming) nên sẽ không có tính năng kế thừa, đa hình,...
Typescript mang một số tính năng cho Javascript như: kế thừa, kiểu dữ liệu, hàm khởi tạo,… Có thể nói, Typescript làm cho javascript mang phong cách rất "Java". Về mặt bản chất nhiều cú pháp của Typescript không được trình duyệt hiểu, vì vậy nó không thể chạy trực tiếp trên trình duyệt, vì vậy cần 1 bước đó là biên dịch (compile) mã Typescript thành Javascript thông thường. Vai trò của Typescript như là một ngôn ngữ trung gian, nó thường được biết tới như là Language specification (Đặc tả ngôn ngữ).

Cài đặt AngularJS

  1. Truy cập trang chủ: https://angularjs.org/
  2. Download phiên bản angularjs 1.7.5
  3. Tạo file index.html ví dụ đầu tiên sử dụng AngularJS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>Tên khách hàng: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>
    </div>
</body>
</html>

AngularJS là một JavaScript Framework

AngularJS là một JavaScript framework. Code được viết bằng ngôn ngữ JavaScript. AngularJS rất gọn nhẹ, có thể include vào bất kỳ file HTML nào bằng thẻ <script></script> thông thường.

Cú pháp sử dụng AngularJS

AngularJS cung cấp tính năng mở rộng các thành phần HTML

AngularJS cung cấp tính năng cho phép mở rộng HTML with Tiền chỉ lệnh (ng-derectives) Tiền chỉ lệnh ng-app directive định nghĩa một chương trình sử dụng AngularJS. Tiền chỉ lệnh ng-model directive sẽ gắn kết dữ liệu (bind data) giữa các thành phần HTML controls (input, select, textarea) với data của chương trình (từ model hoặc controller truyền qua). Tiền chỉ lệnh ng-bind directive có nhiệm vụ gắn dữ liệu từ chương trình (application data) đến các thành phần của HTML. Lưu ý: chúng ta có thể sử dụng dạng tiền chỉ lệnh data-ng-*, thay vì ng-*, nếu muốn file HTML của mình khi check trên web là hợp lệ.

Biểu thức sử dụng trong AngularJS (expression)

AngularJS expressions sẽ được sử dụng trong cú pháp sau: {{ expression }}. AngularJS sẽ tự tính toán biểu thức và hiển thị kết quả ra màn hình. Bổ sung vào ví dụ trên phần nhập số lượng, đơn giá, biểu thức tính thành tiền như sau: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ví dụ đầu tiên AngularJS</title>

    <!-- Include script angularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="quantity=2;price=2500">
        <p>Tên khách hàng: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>

        Số lượng: <input type="number" ng-model="quantity"><br />
        Giá tiền: <input type="number" ng-model="price"><br />
        Tổng cộng: {{ quantity * price }}
    </div>
</body>
</html>
     
Về trang chủ Về Khóa học
Bài học trước Bài học tiếp theo

Mục lục

Chương trình học

  1. Bức tranh Tổng thể về Lập trình WEB
  2. Giới thiệu, cài đặt, cấu hình môi trường lập trình 9
    1. Cài đặt web server XAMPP #84
    2. Cài đặt công cụ truy vấn database HeidiSQL #85
    3. Cài đặt Composer để quản lý các gói thư viện trong PHP #86
    4. Cài đặt trình soạn thảo code Visual Studio Code IDE #64
    5. Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP #107
    6. Cài đặt nền tảng quản lý Source Code sử dụng GIT #1030
    7. Cài đặt công cụ quản lý Source Code TortoiseGit #1045
    8. Cài đặt chế độ Debug PHP với Visual Studio Code #8066
    9. Tạo chứng chỉ SSL trên Localhost #10399
  3. Tập làm quen với quản lý source code bằng GitHub 3
    1. GitHub là gì? #79
    2. Tạo tài khoản, tạo kho dữ liệu (repository), clone source, commit/push và pull source với GitHub #2303
    3. Cách đóng gói phiên bản (Alpha, Beta, Release) bằng Tag trong GitHub #9415
  4. Cài đặt framework Laravel 1
    1. Cài đặt Framework Laravel #66
  5. Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
    1. Cấu trúc thư mục trong Framework Laravel #9211
    2. Kiến trúc MVC là gì? #65
    3. Mô hình kiến trúc MVC vận hành trong Framework Laravel #67
    4. Thực hiện code theo mô hình kiến trúc MVC vận hành trong Framework Laravel #2341
  6. Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
    1. Template Engine là gì? #2356
    2. Blade Template Engine trong Laravel #2357
    3. Bài tập View - tạo trang Danh sách nhân viên sử dụng Blade Template #2381
  7. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL 7
    1. Phân tích các yêu cầu, nghiệp vụ của khách hàng #68
    2. Mô hình thiết kế CSDL mẫu Sunshine #69
    3. Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel #1143
    4. Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng #70
    5. Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại #1157
    6. Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng #71
    7. Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại #7851
  8. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
    1. Tạo lớp (class) ánh xạ CSDL bằng tính năng MODEL trong Laravel - Danh mục Phẳng - Loại sản phẩm #1165
    2. Tạo lớp (class) ánh xạ CSDL bằng tính năng MODEL trong Laravel - Danh mục phẳng - Sản phẩm #1166
    3. Tạo mối quan hệ giữa các lớp (class) MODEL trong Laravel #1174
  9. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend 20
    1. Thiết kế bố cục (layouts) cho giao diện Backend #72
    2. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index) #135
    3. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create) #137
    4. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit) #138
    5. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete) #139
    6. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index #75
    7. Lưu đồ Upload file từ Client lên Server #2229
    8. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create #108
    9. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit #87
    10. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete #88
    11. Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc #9259
    12. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar #104
    13. Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web #78
    14. Xây dựng chức năng xuất Excel #76
    15. Xây dựng chức năng xuất PDF #77
    16. Tạo chức năng Đăng nhập #1870
    17. Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation) #2205
    18. Kiểm tra ràng buộc dữ liệu (Validation) phía Client #2206
    19. Kiểm tra ràng buộc dữ liệu (Validation) phía Server #2207
    20. Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework #9312
  10. AngularJS 7
    1. AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS #95
    2. Cách mô hình kiến trúc MVC vận hành trong AngularJS #96
    3. Cách sử dụng AngularJS Controller, Scope #98
    4. Cách sử dụng AngularJS Directive #97
    5. Cách sử dụng AngularJS Event #100
    6. Cách sử dụng AngularJS Filter #99
    7. Cách sử dụng AngularJS Validation #101
  11. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS 11
    1. Thiết kế bố cục (layouts) cho giao diện Frontend #80
    2. Tích hợp AngularJS vào framework Laravel #102
    3. Tạo giao diện trang chủ (index) #81
    4. Tạo giao diện trang Giới thiệu (about) #109
    5. Tạo giao diện trang Liên hệ (contact) #114
    6. Tạo trang danh sách Sản phẩm (product) #110
    7. Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart) #112
    8. Tạo trang Chi tiết Sản phẩm (product-detail) #111
    9. Tạo giỏ hàng (cart sidebar) #82
    10. Tạo trang thanh toán (checkout) #83
    11. Tạo đơn hàng và gởi mail xác nhận #103
  12. Bonus 9
    1. Đa ngôn ngữ trong Laravel #115
    2. Tạo báo cáo với biểu đồ ChartJS #116
    3. Tạo khung chọn Ngày tháng cho dự án #2431
    4. Tạo các trang thông báo lỗi tương ứng STATUS CODE #117
    5. Kiểm tra ứng dụng với tunnel ảo NGROK #2418
    6. Phân trang trong Laravel #2436
    7. Bổ sung khung xem Hình ảnh trước khi upload (preview image upload) #2439
    8. Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện #9385
    9. Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh #9970
  13. Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
    1. Đăng ký Đồ án Laravel #1188
    2. Hướng dẫn Nộp Đồ án Laravel #9417
  14. Tài liệu tham khảo 3
    1. Kho sách, nguồn tài liệu tham khảo #1313
    2. SourceCode Dự án mẫu #113
    3. Xây dựng chức năng Tìm kiếm theo nhiều tiêu chí bằng Model Eloquent #9426
  15. Thực hiện Đồ án 1
    1. Lộ trình Thực hiện đồ án Web Laravel #7883
Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

  1. Bức tranh Tổng thể về Lập trình WEB
  2. Giới thiệu, cài đặt, cấu hình môi trường lập trình 9
    1. Cài đặt web server XAMPP #84
    2. Cài đặt công cụ truy vấn database HeidiSQL #85
    3. Cài đặt Composer để quản lý các gói thư viện trong PHP #86
    4. Cài đặt trình soạn thảo code Visual Studio Code IDE #64
    5. Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP #107
    6. Cài đặt nền tảng quản lý Source Code sử dụng GIT #1030
    7. Cài đặt công cụ quản lý Source Code TortoiseGit #1045
    8. Cài đặt chế độ Debug PHP với Visual Studio Code #8066
    9. Tạo chứng chỉ SSL trên Localhost #10399
  3. Tập làm quen với quản lý source code bằng GitHub 3
    1. GitHub là gì? #79
    2. Tạo tài khoản, tạo kho dữ liệu (repository), clone source, commit/push và pull source với GitHub #2303
    3. Cách đóng gói phiên bản (Alpha, Beta, Release) bằng Tag trong GitHub #9415
  4. Cài đặt framework Laravel 1
    1. Cài đặt Framework Laravel #66
  5. Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
    1. Cấu trúc thư mục trong Framework Laravel #9211
    2. Kiến trúc MVC là gì? #65
    3. Mô hình kiến trúc MVC vận hành trong Framework Laravel #67
    4. Thực hiện code theo mô hình kiến trúc MVC vận hành trong Framework Laravel #2341
  6. Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
    1. Template Engine là gì? #2356
    2. Blade Template Engine trong Laravel #2357
    3. Bài tập View - tạo trang Danh sách nhân viên sử dụng Blade Template #2381
  7. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL 7
    1. Phân tích các yêu cầu, nghiệp vụ của khách hàng #68
    2. Mô hình thiết kế CSDL mẫu Sunshine #69
    3. Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel #1143
    4. Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng #70
    5. Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại #1157
    6. Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng #71
    7. Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại #7851
  8. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
    1. Tạo lớp (class) ánh xạ CSDL bằng tính năng MODEL trong Laravel - Danh mục Phẳng - Loại sản phẩm #1165
    2. Tạo lớp (class) ánh xạ CSDL bằng tính năng MODEL trong Laravel - Danh mục phẳng - Sản phẩm #1166
    3. Tạo mối quan hệ giữa các lớp (class) MODEL trong Laravel #1174
  9. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend 20
    1. Thiết kế bố cục (layouts) cho giao diện Backend #72
    2. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index) #135
    3. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create) #137
    4. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit) #138
    5. Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete) #139
    6. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index #75
    7. Lưu đồ Upload file từ Client lên Server #2229
    8. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create #108
    9. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit #87
    10. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete #88
    11. Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc #9259
    12. Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar #104
    13. Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web #78
    14. Xây dựng chức năng xuất Excel #76
    15. Xây dựng chức năng xuất PDF #77
    16. Tạo chức năng Đăng nhập #1870
    17. Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation) #2205
    18. Kiểm tra ràng buộc dữ liệu (Validation) phía Client #2206
    19. Kiểm tra ràng buộc dữ liệu (Validation) phía Server #2207
    20. Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework #9312
  10. AngularJS 7
    1. AngularJS là gì? Cài đặt AngularJS và cú pháp sử dụng AngularJS #95
    2. Cách mô hình kiến trúc MVC vận hành trong AngularJS #96
    3. Cách sử dụng AngularJS Controller, Scope #98
    4. Cách sử dụng AngularJS Directive #97
    5. Cách sử dụng AngularJS Event #100
    6. Cách sử dụng AngularJS Filter #99
    7. Cách sử dụng AngularJS Validation #101
  11. Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS 11
    1. Thiết kế bố cục (layouts) cho giao diện Frontend #80
    2. Tích hợp AngularJS vào framework Laravel #102
    3. Tạo giao diện trang chủ (index) #81
    4. Tạo giao diện trang Giới thiệu (about) #109
    5. Tạo giao diện trang Liên hệ (contact) #114
    6. Tạo trang danh sách Sản phẩm (product) #110
    7. Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart) #112
    8. Tạo trang Chi tiết Sản phẩm (product-detail) #111
    9. Tạo giỏ hàng (cart sidebar) #82
    10. Tạo trang thanh toán (checkout) #83
    11. Tạo đơn hàng và gởi mail xác nhận #103
  12. Bonus 9
    1. Đa ngôn ngữ trong Laravel #115
    2. Tạo báo cáo với biểu đồ ChartJS #116
    3. Tạo khung chọn Ngày tháng cho dự án #2431
    4. Tạo các trang thông báo lỗi tương ứng STATUS CODE #117
    5. Kiểm tra ứng dụng với tunnel ảo NGROK #2418
    6. Phân trang trong Laravel #2436
    7. Bổ sung khung xem Hình ảnh trước khi upload (preview image upload) #2439
    8. Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện #9385
    9. Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh #9970
  13. Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
    1. Đăng ký Đồ án Laravel #1188
    2. Hướng dẫn Nộp Đồ án Laravel #9417
  14. Tài liệu tham khảo 3
    1. Kho sách, nguồn tài liệu tham khảo #1313
    2. SourceCode Dự án mẫu #113
    3. Xây dựng chức năng Tìm kiếm theo nhiều tiêu chí bằng Model Eloquent #9426
  15. Thực hiện Đồ án 1
    1. Lộ trình Thực hiện đồ án Web Laravel #7883
Bài học trước Bài học tiếp theo
Về trang chủ Về Khóa học