AngularJS là gì?

Bài viết này sẽ nói về một số khái niệm về AngularJS, những ưu nhược điểm của nó và đặc biệt là về các thành phần trong AngularJS mà chúng ta sẽ được tìm hiểu trong các bài kế tiếp. AngularJS là gì? AngularJS là một framework ứng dụng web mã nguồn mở. Nó được Misko [ [ ...]

Các Filter trong AngularJS

Filter được sử dụng để thay đổi, lọc dữ liệu cho kết quả là một chuỗi khác. Dưới đây là danh sách các filter thông dụng thường được sử dụng trong AngularJS. uppercase: Chuyển đổi văn bản sang dạng chữ hoa. lowercase: Chuyển văn bản sang dạng chữ thường. currency: Định dạng văn bản dạng tiền tệ. filter: Lọc [ [ ...]

Tạo bảng trong AngularJS

Dữ liệu bảng thường được lặp lại theo thứ tự tự nhiên. Trong AngularJS, ng-repeat directive có thể được sử dụng để vẽ các bảng một cách dễ dàng. Dưới đây là ví dụ về cách sử dụng ng-repeat để tạo ra các bảng. <table> <tr> <th>Ho va Ten</th> <th>Diem thi</th> </tr> <tr ng-repeat="monhoc in sinhvien.tenMonHoc"> <td>{{ monhoc.ten [ [ ...]

Hướng dẫn cài đặt AngularJS

Bài viết này sẽ hướng dẫn bạn cách cài đặt thư viện AngularJS để sử dụng trong việc phát triển ứng dụng web. Chúng ta sẽ giới thiệu qua về cấu trúc thư mực và các nội dung của nó. Khi bạn truy cập https://angularjs.org/, bạn sẽ thấy có 2 lựa chọn để tải AngularJS [ [ ...]

Cấu trúc MVC trong AngularJS

Model View Controller hay thường được gọi phổ biến hơn là MVC, là một mô hình thiết kế phần mềm cho các ứng dụng phát triển trên nền tảng web. Một Model View Controller được tạo thành từ 3 phần chính: Model – Là thành phần thấp nhất của mô hình có nhiệm vụ duy trì [ [ ...]

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

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 Directive trong AngularJS

AngularJS directive được sử dụng để mở rộng 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 về những directive này: 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 này liên kết giá trị [ [ ...]

Expression trong AngularJS

Expression được sử dụng để gắn kết các dữ liệu ứng dụng ra thẻ HTML. Expression được viết trong dấu {{ expression}}. Expression có cách hoạt động tương đối giống ng-bind directive. Các expression trong ứng dụng AngularJS là các JavaScript expression thuần túy và xuất kết quả là dữ liệu mà chúng ta sử dụng. Sử [ [ ...]

Thành phần Controller trong AngularJS

Một ứng dụng AngularJS hoạt động chính dựa vào thành phần controller để điều khiển luồng dữ liệu trong ứng dụng. Một controller được định nghĩa bằng cách sử dụng directive là ng-controller. Một controller là một đối tượng JavaScript bao gồm các thuộc tính và các hàm. Mỗi một controller chấp nhận $scope là tham số để hướng đến [ [ ...]

Phần tử HTML DOM trong AngularJS

Những directive trong AngularJS dưới đây có thể được sử dụng để bind dữ liệu trong ứng dụng tới các thuộc tính trong phần tử HTML DOM. ng-disabled: Vô hiệu hóa một điều khiển (control) đã cung cấp ng-show: Hiển thị một điều khiển đã cung cấp ng-hide: Ẩn một điều khiển đã cung cấp ng-click: Biểu diễn một sự kiện [ [ ...]

Các Module trong AngularJS

AngularJS hỗ trợ tiếp cận theo hướng module. Module được sử dụng để phân biệt phần xử lý logic (service), controller và application… và giúp code trở nên rõ ràng. Chúng ta định nghĩa module thành các file JavaScript riêng rẽ và đặt tên chúng theo mỗi tệp module.js. Trong chương này, chúng ta sẽ tạo [ [ ...]

Form trong AngularJS

AngularJS bổ sung cho form các tính năng về filling và validation. Bạn có thể dùng ng-click directive để xử lý sự kiện click chuột trên nút và sử dụng các cờ hiệu $dirty và $invalid để làm cho nó có hiệu lực. Sử dụng novalidate với khai báo form để vô hiệu hóa tính năng [ [ ...]

Cú pháp Include trong AngularJS

HTML không hỗ trợ nhúng trang web HTML trong trang HTML. Để đạt được chức năng này có thể sử dụng các phương thức sau: Sử dụng Ajax – Tạo một server call để nhận trang HTML tương ứng và thiết lập nó trong thành phần innerHTML của phần điều khiển HTML. Sử dụng Server Side Includes [ [ ...]

Ajax trong AngularJS

AngularJS cung cấp điều khiển $http mà làm như là service để đọc dữ liệu từ server. Server có thể tạo các lời gọi tới cơ sở dữ liệu để nhận các bản ghi. AngularJS cần dữ liệu dưới định dạng JSON. Khi dữ liệu sẵn sàng, $http có thể được sử dụng để nhận dữ [ [ ...]

Thành phần View trong AngularJS

AngularJS hỗ trợ Single Page Application thông qua multiple view trên một trang đơn. Để làm được điều này, AngularJS cung cấp ng-view và ng-template directive và $routeProvider service. Giới thiệu ng-view trong AngularJS Thẻ ng-view đơn giản là tạo nơi giữ các màn hình view tương ứng có thể được đặt trong nó dựa vào [ [ ...]

Scope trong AngularJS

Scope là đối tượng JavaScript đặc biệt có vai trò liên kết controller và view. Scope chứa thông tin là các dữ liệu model. Trong controller, dữ liệu model có thể được truy cập qua đối tượng $scope. <script> var ungdungAngularjs = angular.module("ungdungAngularjs", []); ungdungAngularjs.controller("nhanvienController", function($scope) { $scope.message = "Ben trong nhan vien controller"; $scope.type [ [ ...]

Các Service trong AngularJS

AngularJS hỗ trợ các khái niệm “Seperation of Concerns – Chia để trị” sử dụng cấu trúc service. Service là các hàm JavaScript và có nhiệm vụ trên những task nhất định. Nó làm cho chúng thành những thực thể riêng rẽ dễ dàng trong việc bảo trì và kiểm thử. Controller, filter có thể gọi [ [ ...]

Đa ngôn ngữ (i18n) trong AngularJS

AngularJS cung cấp sẵn các chức năng đa ngôn ngữ (i18n) với 3 kiểu filter là currency, date và number. Chúng ta chỉ cần kết hợp đoạn js tương ứng với vị trí tùy quốc gia. Mặc định nó sẽ gắn với vị trí trong trình duyệt web. Ví dụ, khi sử dụng ví trí ở [ [ ...]