AngularJS Modules – Hướng dẫn sử dụng Modules trong AngularJS

AngularJS Modules là một phần quan trọng trong cấu trúc ứng dụng AngularJS, cho phép ta tách ứng dụng thành các module nhỏ hơn và quản lý chúng dễ dàng hơn. Mỗi module chứa một hoặc nhiều thành phần, bao gồm các controller, services, directives, filters, và templates.

Việc sử dụng Modules giúp ta tăng tính linh hoạt và dễ bảo trì của ứng dụng, cũng như giúp phân chia code thành các phần độc lập, giúp đơn giản hóa việc phát triển và bảo trì ứng dụng.

Trong bài viết này, chúng ta sẽ tìm hiểu về các tính năng của AngularJS Modules và cách sử dụng chúng để tạo ứng dụng.

Xem thêm Module DNS Node.js

Giới thiệu về Modules trong AngularJS

Trong AngularJS, Modules là một cách để tổ chức ứng dụng thành các phần riêng biệt. Một ứng dụng AngularJS có thể có nhiều Modules, và mỗi Module có thể chứa các Controllers, Services, Directives, Filters và các thành phần khác.

Mục đích của việc sử dụng Modules trong AngularJS là để giảm thiểu sự phức tạp của ứng dụng và giúp dễ dàng quản lý các thành phần. Bằng cách tách ứng dụng thành các Modules, chúng ta có thể tập trung vào từng phần của ứng dụng một cách độc lập, nâng cao khả năng tái sử dụng và dễ dàng bảo trì.

AngularJS cũng cung cấp các Modules chuẩn để sử dụng, nhưng chúng ta có thể tạo các Modules tùy chỉnh để đáp ứng nhu cầu cụ thể của ứng dụng của chúng ta.

Tạo Module trong AngularJS

Để tạo một module trong AngularJS, chúng ta sử dụng phương thức angular.module() với cú pháp như sau:

var myAppModule = angular.module('myApp', []);

Trong đó, myApp là tên của module, [] là danh sách các module mà module hiện tại sẽ phụ thuộc vào (dependencies). Nếu không có module nào được liệt kê, chúng ta sẽ sử dụng [] rỗng.

Sau khi tạo module, chúng ta có thể sử dụng nó để định nghĩa các controller, directive, service, filter, … bằng cách sử dụng phương thức myAppModule.controller(), myAppModule.directive(), myAppModule.service(), myAppModule.filter(), …

Ví dụ: Định nghĩa một controller trong module myApp

myAppModule.controller('myController', function($scope) {
  // Định nghĩa các phương thức và thuộc tính của controller tại đây
});

Chúng ta cũng có thể định nghĩa nhiều controller, directive, service, filter, … trong một module.

Sử dụng Module trong AngularJS

Để sử dụng một module trong AngularJS, ta cần khai báo module đó là dependency (phụ thuộc) của module hiện tại.

Ví dụ, nếu muốn sử dụng module myApp trong module myApp.controller, ta có thể khai báo như sau:

// Khai báo module myApp
var myApp = angular.module('myApp', []);

// Khai báo module myApp.controller
var appController = angular.module('myApp.controller', ['myApp']);

// Định nghĩa controller cho module myApp.controller
appController.controller('myController', function($scope) {
  // Định nghĩa các thành phần cho controller
});

Ở đây, ta đã khai báo myApp là dependency của myApp.controller thông qua ['myApp']. Khi đó, các thành phần trong module myApp sẽ được sử dụng trong module myApp.controller.

Sau khi đã khai báo dependency, ta có thể sử dụng các thành phần của module đó trong các thành phần khác của module hiện tại, chẳng hạn như controller, directive, service, …

Xem thêm Module web trong Node.js

Các tính năng nâng cao của Module trong AngularJS

AngularJS cung cấp một số tính năng nâng cao khi sử dụng Modules như sau:

1. Dependency Injection: Module trong AngularJS có thể sử dụng Dependency Injection để quản lý các phụ thuộc của mình. Điều này giúp tăng tính linh hoạt của ứng dụng và giảm độ phức tạp khi phát triển.
2. Lazy loading: Module trong AngularJS cũng hỗ trợ tính năng lazy loading, cho phép tải các module chỉ khi cần thiết. Điều này giúp giảm thời gian tải ứng dụng và tăng hiệu suất của ứng dụng.
3. Hỗ trợ Service: Module trong AngularJS cung cấp khả năng đăng ký và sử dụng Service. Điều này giúp tạo ra các đối tượng có thể tái sử dụng được trong toàn bộ ứng dụng.
4. Tách biệt các chức năng: Module trong AngularJS cho phép tách biệt các chức năng khác nhau trong ứng dụng thành các module riêng biệt. Điều này giúp tăng tính tái sử dụng và dễ dàng bảo trì cho các chức năng khác nhau của ứng dụng.
5. Tích hợp với các thư viện bên ngoài: AngularJS cung cấp khả năng tích hợp với các thư viện bên ngoài thông qua các Module, giúp tăng tính linh hoạt và tiết kiệm thời gian phát triển.

Tóm lại, Module là một tính năng quan trọng trong AngularJS, giúp tăng tính tái sử dụng, dễ bảo trì và tăng tính linh hoạt của ứng dụng.

Dependency Injection trong AngularJS Modules

Trong AngularJS, dependency injection là một kỹ thuật quan trọng giúp cho việc phát triển ứng dụng trở nên dễ dàng và dễ bảo trì hơn. Dependency injection (DI) cho phép các thành phần của ứng dụng được quản lý và sử dụng thông qua việc chuyển các đối tượng phụ thuộc (dependencies) vào các thành phần đó, thay vì định nghĩa trực tiếp các dependencies trong các thành phần đó.

Trong AngularJS, các dependencies được khai báo bằng cách sử dụng các chuỗi tên (string names), sau đó các chuỗi tên đó sẽ được sử dụng để tìm kiếm và cung cấp đối tượng phụ thuộc khi các thành phần được khởi tạo. Việc cung cấp các dependencies có thể được thực hiện thông qua một số cơ chế, bao gồm:

• Khai báo dependencies trực tiếp trong các constructor của các thành phần
• Sử dụng chuỗi tên (string names) để liên kết các dependencies với các thành phần khác nhau
• Sử dụng các “providers” để cung cấp các dependencies, mà có thể được khai báo trực tiếp hoặc thông qua các module.

Khi sử dụng DI, các thành phần của ứng dụng trở nên độc lập hơn, giúp cho việc kiểm thử và bảo trì trở nên dễ dàng hơn. Ngoài ra, DI cũng cho phép ta dễ dàng tái sử dụng các thành phần, hoặc thay đổi các dependencies của các thành phần đó mà không ảnh hưởng đến toàn bộ ứng dụng.

Export và Import Module trong AngularJS

Trong AngularJS, các module có thể được xuất và nhập giữa các module khác nhau để tái sử dụng code và tránh xung đột tên biến. Để xuất một module, ta sử dụng phương thức angular.module() với tham số thứ hai là một mảng chứa tên các module cần được xuất. Ví dụ:

// Tạo một module tên là "myApp"
angular.module('myApp', []);

// Xuất module "myApp"
angular.module('exportedModule', ['myApp']);

Sau khi module đã được xuất, ta có thể nhập nó vào một module khác bằng cách sử dụng phương thức angular.module() với tham số thứ hai là một mảng chứa tên các module cần được nhập. Ví dụ:

// Nhập module "exportedModule" vào module "anotherModule"
angular.module('anotherModule', ['exportedModule']);

Khi đó, các controller, service, directive,… trong module “myApp” sẽ được sử dụng trong module “exportedModule” và “anotherModule”.

Xem thêm Node.js Package Manager

Config và Run Block trong AngularJS Module

Trong AngularJS, mỗi module có thể có một số block đặc biệt được gọi là config block và run block, được sử dụng để cấu hình và thực thi các tác vụ trước khi ứng dụng chạy.

Config block được sử dụng để cấu hình các thông số cho module, ví dụ như cấu hình $routeProvider để quản lý định tuyến cho ứng dụng. Các config block có thể có các phụ thuộc như các giá trị, hàm hoặc provider khác.

Ví dụ:

angular.module('myApp', [])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
      });
  });

Run block được sử dụng để thực thi các tác vụ trước khi ứng dụng chạy, ví dụ như cấu hình định tuyến ban đầu hoặc thiết lập các biến toàn cục. Các run block cũng có thể có các phụ thuộc như các giá trị, hàm hoặc service khác.

Ví dụ:

angular.module('myApp', [])
  .run(function($rootScope) {
    $rootScope.title = 'My App';
  });

Trong ví dụ này, $rootScope được sử dụng để thiết lập biến title trên $rootScope và biến này sẽ có sẵn trong toàn bộ ứng dụng.

Trong AngularJS, một mô-đun định nghĩa một ứng dụng. Nó là vùng chứa cho các phần khác nhau của ứng dụng của bạn như Controller, services, filters, directives, v.v.

Các bài viết liên quan:

• AngularJS Controller
• Hướng dẫn AngularJS
• Controller là gì?
• AngularJS Directives
• Controller Resource Laravel

Một mô-đun được sử dụng như một phương thức Main (). Controller luôn thuộc về một mô-đun.

Ví dụ:

Cách tạo một mô-đun

Phương thức module () của đối tượng Angular được sử dụng để tạo một mô-đun. Nó còn được gọi là hàm angular.module AngularJS

 <div ng-app="myApp">...</div>  
<script>  
var app = angular.module("myApp", []);   
</script>  

Bây giờ chúng ta có thể thêm Controller, directives, filters và hơn thế nữa vào ứng dụng AngularJS.

Cách thêm Controller vào mô-đun

Nếu bạn muốn thêm Controller vào ứng dụng của mình, hãy tham khảo Controller có directives ng-controller.

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<div ng-app="myApp" ng-controller="myCtrl">  
{{ firstName + " " + lastName }}  
</div>  
<script>  
var app = angular.module("myApp", []);  
app.controller("myCtrl", function($scope) {  
    $scope.firstName = "Ajeet";  
    $scope.lastName = "Maurya";  
});  
</script>  
</body>  
</html>  

Cách thêm directives vào một mô-đun

Các directives AngularJS được sử dụng để thêm chức năng vào ứng dụng của bạn. Bạn cũng có thể thêm các directives của riêng mình cho các ứng dụng của bạn.

Sau đây là danh sách các directives AngularJS:

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" w3-test-directive></div>  
<script>  
var app = angular.module("myApp", []);  
app.directive("w3TestDirective", function() {  
    return {  
        template : "Đây là một hàm tạo directives."  
    };  
});  
</script>  
</body>  
</html>  

Mô-đun và Controller trong file

Trong các ứng dụng AngularJS, bạn có thể đặt mô-đun và Controller vào các tệp JavaScript.

Trong ví dụ này, “myApp.js” chứa định nghĩa mô-đun ứng dụng, trong khi “myCtrl.js” chứa Controller:

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
<script src="myApp.js"></script>  
<script src="myCtrl.js"></script>  
</body>  
</html>  

Với App.js

app.controller("myCtrl", function($scope) {  
    $scope.firstName    = "Ajeet";  
    $scope.lastName= "Maurya";  
});   

Ở đây “myCtrl.js” chứa:

<div ng-app="myApp" ng-controller="myCtrl">  
{{ firstName + " " + lastName }}  
</div>  

Ví dụ này cũng có thể được viết là:

<!DOCTYPE html>  
<html>  
<body>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<div ng-app="myApp" ng-controller="myCtrl">  
{{ firstName + " " + lastName }}  
</div>  
<script>  
var app = angular.module("myApp", []);  
app.controller("myCtrl", function($scope) {  
    $scope.firstName = "first name";  
    $scope.lastName = "last name";  
});  
</script>  
</body>  
</html> 

Xem thêm Module Node.js Crypto