AngularJS Modules

AngularJS Modules

An AngularJS module defines the scope and boundary of an application.

It acts as a container for all the different parts of your web app.

What is a Module?

Think of a module as the "main function" of your application.

It dictates exactly how the application should be initialized and structured.

Without a module, your controllers and services have nowhere to live!

Creating a Module

You create a module using the angular.module() JavaScript function.

The first parameter is the name of your app, and the second is an array for dependencies.

You then link this module to your HTML using the ng-app directive.

<!-- HTML -->
<div ng-app="myApp">
  <h2>My Application is Running!</h2>
</div>

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

SEO and Best Practices

Splitting code into multiple modules keeps your application extremely organized.

A well-structured app loads faster, which is a massive ranking factor for SEO.

Keep your global module clean and inject smaller, feature-specific modules as needed.