---
title: "Creating custom modules in Angularjs"
description: "Let us learn with a clear example what custom modules are in Angularjs, why they are used, and how to create them."
author: "Ashutosh Patel"
published: 2025-04-22
updated: 2025-04-22
canonical: https://www.mindstick.com/articles/339106/creating-custom-modules-in-angularjs
category: "angular js"
tags: ["angular js", "angularjs module"]
reading_time: 2 minutes
---
# Creating custom modules in Angularjs
Let us learn with a clear example what custom modules are in Angularjs, why they are used, and how to create them.
#### Modules in AngularJS
In Angularjs, a module is a container for different parts of an application, such as
- [Controllers](https://www.mindstick.com/forum/155596/how-do-asynchronous-controllers-work-in-asp-dot-net)
- [Directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net)
- Filters
- Services
- Factories, etc.
Modules help organise [your application](https://answers.mindstick.com/qa/97584/how-do-you-choose-the-correct-camera-for-your-application) into logical units and promote **[modularity](https://www.mindstick.com/interview/850/define-modularity)**, **reusability**, and **testability**.
#### Why create a custom module?
- **Separation of concerns:** Put features or sections of an app in their own modules.
- **Reusability**: Modules can be reused across different apps or features.
- **Maintainability:** Smaller, isolated units are easier to manage and debug.
- **[Dependency](https://www.mindstick.com/news/2358/apple-will-use-us-made-semiconductors-in-its-products-to-lessen-its-dependency-on-asia) [management](https://www.mindstick.com/articles/167972/why-it-knowledge-and-management-skills-need-to-be-on-the-same-page):** Easily inject and [manage dependencies](https://answers.mindstick.com/qa/111597/how-do-i-manage-dependencies-in-my-projects) between modules.
#### How to create a custom module
## Step 1: Define a Custom Module
```javascript
// Defining a custom module named 'myCustomModule'
var myCustomModule = angular.module('myCustomModule', []);
```
**Step 2: Add [components](https://answers.mindstick.com/qa/96924/what-are-the-hardware-components-of-a-desktop-computer-laptop) to the custom module**
Let's add a [controller](https://www.mindstick.com/forum/2545/how-to-submit-form-to-controller-or-model-in-mvc) to this custom module,
```javascript
myCustomModule.controller('MyController', function($scope) {
$scope.message = "Hello from MyController in myCustomModule!";
});
```
## Step 3: Use the custom module in the main application
```javascript
// Main app module depends on 'myCustomModule'
var mainApp = angular.module('mainApp', ['myCustomModule']);
```
## Step 4: Use in HTML
```html
```
Also, read: [What is an Angularjs module](https://www.mindstick.com/forum/160775/what-is-an-angularjs-module)
---
Original Source: https://www.mindstick.com/articles/339106/creating-custom-modules-in-angularjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.