Angularjs phần 3 - Module & Realtime application
Bài trước chúng ta đã tìm hiểu về HTTP & AJAX, bài tiếp theo chúng ta sẽ cùng tìm hiểu sử dụng về Module& Realtime application. Module Trong các ứng dụng thực tế, việc phân chia ứng dụng thành các thành phần khác nhau là điều cần thiết. Dưới đây là lợi ích của việc chia nhỏ ứng dụng: ...
Bài trước chúng ta đã tìm hiểu về HTTP & AJAX, bài tiếp theo chúng ta sẽ cùng tìm hiểu sử dụng về Module& Realtime application.
Module
Trong các ứng dụng thực tế, việc phân chia ứng dụng thành các thành phần khác nhau là điều cần thiết. Dưới đây là lợi ích của việc chia nhỏ ứng dụng:
- Dễ dàng hơn cho việc quản lý và khai báo ứng dụng cũng như kiểm tra lại sau này
- Khả năng tái sử dụng cũng như tận dụng các 3rd modules
- Nạp từng phần ứng dụng sẽ nhanh hơn là buộc phải nạp toàn bộ ứng dụng vào rồi mới chạy.
Trong AngularJS, module được hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trong mã nguồn script của bạn, dưới đây là một template chuẩn của angular sử dụng modules
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
Hello, Angular's Module!
</div>
</body>
</html>
script.js
var app = angular.module('ExampleModule', []);
-
ng-app="ExampleModule": Khai báo một angular app là module, sử dụng ExampleModule được khai báo trong script
-
Trong script, angular.module() là hàm khai báo cho module.
-
cặp dấu ngoặc [] chính là mảng các module sẽ được nạp chung vào để chạy chung với ứng dụng (module chính được khai báo trong ng-app) ví dụ:
var app = angular.module('ExampleModule', ['ngRoute', 'ngBootstrap']);
Controller trong module.
Trong ví dụ trên chúng ta đã thấy việc khai báo module như thế nào, vậy controller khi ứng dụng sẽ được khai báo như thế nào. Hãy xem ví dụ duới đây
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ExampleCtrl">
Hello, {{ name }}!
</div>
</body>
</html>
script.js
var app = angular.module('ExampleModule', []);
app.controller('ExampleController', function($scope) {
$scope.name = 'World';
});
- Method .controller của module sẽ đóng vai trò khai báo thêm một controller cho module.
- Function đại diện cho controller được khai báo bình thường giống như controller khai báo bên ngoài module
Tổ chức của một ứng dụng thực tế
Thông thường thì tổ chức một ứng dụng thực tế sẽ được khởi tạo như sau
├── index.html
├── css
│ └── style.css
└── scripts
├── module_1.js
├── module_2.js
├── module_3.js
└── main.js
- index.html chính là html documents
- style.css chính là mã nguồn css cho document
- main.js chính là mã nguồn cho module chính
- các files js khác là các modules được module chính sử dụng, như vậy template của chúng ta sẽ được khai báo lại như sau
index.html
<!doctype html>
<html ng-app="ExampleModule">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="scripts/module_01.js"></script>
<script src="scripts/module_02.js"></script>
<script src="scripts/module_03.js"></script>
<script src="main.js"></script>
</head>
<body>
<div ng-controller="ExampleCtrl">
Hello, Angular's Module!
</div>
</body>
</html>
main.js
var app = angular.module('ExampleModule', ['Module1', 'Module2', 'Module3']);
app.controller('ExampleController', function($scope) {
$scope.name = 'World';
});
Bài của mình đến đây là hết. Hen gặp lại các bạn trong phần tiếp theo.
