Modularizing an AngularJS application is essential for better organization, maintainability, and reusability of code. Using the RequireJS node library it can be achieved to modularize AngularJS applications.
NPM Commands-
AngularJS – npm install [email protected]
AngularJS – npm install angular-route
RequireJS – npm install requirejs
Example
File Structure
The main directory contains index.html & main.js file which includes the required js module with all angular dependencies. Under src folder contains all pages like home, about, login, register etc. with having app.js & route.js file. This file structure is almost similar to angular 2+
Index.html
Our angular js application every time starts with an html file so we will declare our main html file name with index in the main directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="./node_modules/requirejs/require.js"
data-main="main.js"
></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Declare RequireJs lib using script src into that html file in head tags also add the data attribute name is data-main to include the main.js file to start the angular application using RequireJS modularisation.
ng-view directory provided by angular js to display the views using angular js routing template urls.
Main.JS
First we need the main file to import & export all AngularJS dependencies. We can place this main.js file into the main directory folder.
require.config({
paths: {
angular: "./node_modules/angular/angular.min",
"angular-route": "./node_modules/angular-route/angular-route.min",
},
shim: {
angular: {
exports: "angular",
},
"angular-route": {
deps: ["angular"],
exports: "angular-route",
},
},
});
require(["angular", "src/app"], function (angular) {
angular.bootstrap(document, ["app"]);
});
AngularJS is defined as a shim and injects the angular object into the RequireJS module. The angular.module is defined in our application module, and injects that object into the RequireJS module. The conditionals ensure that we bootstrap AngularJS only when the page is ready for it, and only once.
Above main.js file having 2 methods i.e. Paths & Shim. Using Paths we can inject all the libraries into the Requirejs module. Shim is used to export the libs all over the application.
App.js
define(["angular", "angular-route", "src/routes"], function (angular) {
const app = angular.module("app", ["ngRoute", "routes"]);
return app;
});
Making angular app.js file to module application with angular & angular route and other dependencies to run the angular js application.
It allows you to break your application into modules. Each module can encapsulate different components, services, directives, filters, etc. This promotes better organization and separation of concerns.
Define module like app.js, auth.module.js, home.module.js
auth.module.js
define([
"angular",
"./login/login.controller",
"./register/register.controller",
], function (angular, loginController, regController) {
angular
.module("authModule", [])
.controller("LoginController", loginController)
.controller("RegisterController", regController);
});
In the above module file defines new angular module that register login & register controllers
Login.controller.js
define([], function () {
var controller = function ($scope) {
$scope.message = "Login Controller";
};
controller.$inject = ["$scope"];
return controller;
});
To define the controller in angular that performs an operation to show the results into the views like above controller returning message variable into the view.
In other register.controller.js, home.controller.js file also defines angular controller definition & returns controller.
In angular routing we can import all the modules to use the controllers in routing paths & views
Route.js
define(["angular", "src/home/home.module", "src/auth/auth.module"], function (
angular
) {
var routes = angular.module("routes", ["homeModule", "authModule"]);
routes.config([
"$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "src/home/home.html",
controller: "HomeController",
})
.when("/login", {
templateUrl: "src/auth/login/login.html",
controller: "LoginController",
})
.when("/register", {
templateUrl: "src/auth/register/register.html",
controller: "RegisterController",
})
.otherwise({ redirectTo: "/" });
},
]);
return routes;
});
This routing provides path views & their controllers on which path having which controller defines. This routing is registered into the app.js file to use in universal applications.
Like this we can achieve modularize angular application in Angular JS.
Modularisation in Angular 2+
Angular 2+ version already pre defined concepts like module controller services directives etc.
Module is used to register all the controllers & libraries used into that module. We can import modules into angular routing easily to achieve multiple types of redirecting like lazy routing, default routing etc.
Angular contains a default app module file which we can use over the angular application. And we can import libs, controllers or deps etc.
To create new module the command is
ng g module module_name
Using this command it will generate a module for the application. We can import this module into lazy load routing else into the app module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthComponent } from './layout/auth/auth.component';
@NgModule({
declarations: [AppComponent, AuthComponent],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Like this we can create multiple custom modules to separate each & every controller.
Support On Demand!
