🧩 AngularJS Modules: Root, Feature, Shared, Routing (2025 Guide)
🧲 Introduction – Why Learn AngularJS Modules?
One of the core strengths of AngularJS is its ability to structure applications using modules. AngularJS modules allow developers to organize code into logical containers such as the root module, feature modules, shared components, and routing configurations. Understanding how to modularize your AngularJS app helps you build scalable, maintainable, and testable applications.
🎯 In this guide, you’ll learn:
- What AngularJS modules are and how they work
- The roles of root, feature, shared, and routing modules
- How to structure an AngularJS app using modular best practices
- Hands-on examples with explanations
🔍 What Is an AngularJS Module?
In AngularJS, a module is a container for the different parts of an application—controllers, services, filters, directives, and more.
var app = angular.module('myApp', []);
🧾 Explanation:
'myApp'is the module name.- The second argument
[]is the list of dependencies for the module.
Modules help in separating functionality and enable dependency injection, making AngularJS applications more maintainable and testable.
🏠 Root Module (ng-app)
The root module is the main module that bootstraps the AngularJS application.
<html ng-app="myApp">
var app = angular.module('myApp', []);
🔗 It often contains core services, global controllers, and acts as the entry point of the application.
🧩 Feature Modules
Feature modules represent a specific section or functionality of the application, such as “User Management”, “Product Catalog”, or “Dashboard”.
angular.module('userModule', []);
angular.module('productModule', []);
Each feature module can:
- Have its own controllers, services, and views
- Be imported into the root module
📌 Example:
angular.module('myApp', ['userModule', 'productModule']);
♻️ Shared Module
The shared module includes reusable components, directives, filters, or services used across multiple feature modules.
angular.module('sharedModule', []);
📌 Example:
angular.module('sharedModule').directive('customButton', function() {
return {
template: '<button class="btn">Click Me</button>'
};
});
Then include it wherever needed:
angular.module('myApp', ['sharedModule']);
🧭 Routing Module (ngRoute)
AngularJS provides the ngRoute module to implement routing, allowing SPA behavior where different views load without refreshing the page.
🛠️ Include the Routing Script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
🧩 Define a Routing Module
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/home'
});
});
🧾 Explanation:
ngRoutehandles navigation between different views.when()defines routes and their corresponding templates/controllers.otherwise()handles unmatched URLs.
📁 Suggested Folder Structure for Modular AngularJS App
angularjs-app/
│
├── index.html
├── app.js → Root module
├── shared/ → Shared module
│ └── directives.js
├── user/ → Feature module
│ ├── user.controller.js
│ └── user.service.js
├── product/ → Feature module
│ └── product.controller.js
├── routes/ → Routing module
│ └── routes.config.js
🧠 Best Practices for Using AngularJS Modules
✔️ Always create a root module and keep it clean
✔️ Group related components into feature modules
✔️ Place reusable components in shared modules
✔️ Use ngRoute or ui-router for navigation
✔️ Avoid tightly coupling modules—keep them independent
🧪 Complete Example: Modular AngularJS App
app.js (Root Module)
var app = angular.module('myApp', ['userModule', 'sharedModule', 'ngRoute']);
user.controller.js (Feature Module)
angular.module('userModule', []).controller('UserCtrl', function($scope) {
$scope.username = "John Doe";
});
directives.js (Shared Module)
angular.module('sharedModule', []).directive('customHeader', function() {
return {
template: "<h1>Welcome to My App</h1>"
};
});
routes.config.js (Routing)
app.config(function($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: 'user.html',
controller: 'UserCtrl'
});
});
📌 Summary – Recap & Next Steps
Modular development is essential for building large-scale AngularJS apps. By dividing your codebase into root, feature, shared, and routing modules, you promote clean architecture, better collaboration, and easier maintenance.
🔍 Key Takeaways:
- Root module bootstraps the app.
- Feature modules contain isolated functionality.
- Shared module holds common, reusable components.
- Routing module manages SPA navigation.
⚙️ Real-world Relevance:
Modular AngularJS apps scale better, are easier to test, and simplify onboarding for new developers—especially in legacy enterprise environments.
❓ FAQ – AngularJS Modules
❓ What is the purpose of angular.module()?
✅ It defines or retrieves a module. You pass dependencies as the second argument when creating a module.
❓ Can a module have multiple controllers?
✅ Yes. A module can contain as many controllers, services, and directives as needed.
❓ What’s the difference between a feature and shared module?
✅ A feature module handles a specific domain (e.g., Users), while a shared module holds reusable logic used across multiple features.
❓ How does routing work in AngularJS?
✅ Routing enables navigation between different views using ngRoute, loading templates dynamically without refreshing the page.
Share Now :
