ng-app – Defining an AngularJS application

In AngularJS, ng-app is one of the most fundamental directives. It is used to initialize an AngularJS application and bind it to an HTML element. Without ng-app, AngularJS will not work, as it tells the browser where the AngularJS framework should be applied.

In this guide, we will cover:

What is ng-app?
How ng-app works?
Syntax and Example
Defining ng-app with and without a module
Best Practices for using ng-app
Common Mistakes and Troubleshooting
Conclusion

1. What is `ng-app`?

The ng-app directive marks an HTML element as the root of an AngularJS application. It is typically added to the <html> or <body> tag but can be applied to any HTML element.

When the browser encounters ng-app, AngularJS automatically initializes itself within the specified element, setting up the necessary bindings and controllers.

2. How `ng-app` Works?

The ng-app directive tells AngularJS where the application starts.
AngularJS scans the HTML document from top to bottom. When it finds an ng-app directive, it bootstraps the AngularJS framework within that element.
Any AngularJS functionality (like directives, controllers, and two-way data binding) will only work inside the element where ng-app is defined.

3. Syntax and Example

Basic Syntax

<element ng-app></element>

<element ng-app="moduleName"></element>

Where:

If no module is specified, AngularJS creates a default module.
If a module name is provided, AngularJS initializes that specific module.

Example 1: Basic `ng-app` Without a Module

If you do not specify a module, AngularJS will automatically create one.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic ng-app Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app>
    <h1>Welcome to AngularJS</h1>
    <p>Current Date: {{ new Date() }}</p>
</body>
</html>

Explanation:

The ng-app directive is placed in the <body> tag.
The {{ new Date() }} expression is evaluated by AngularJS and displays the current date.

Example 2: Using `ng-app` with a Module

A better practice is to define an AngularJS module and assign it to ng-app.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ng-app with Module</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
        <h1>{{ greeting }}</h1>
    </div>

    <script>
        var app = angular.module("myApp", []); // Defining the AngularJS module
        app.controller("MyController", function($scope) {
            $scope.greeting = "Hello, Welcome to AngularJS!";
        });
    </script>
</body>
</html>

Explanation:

ng-app="myApp" tells AngularJS to use the module named “myApp”.
The ng-controller="MyController" applies the controller to the <div>.
The controller updates $scope.greeting, and it is displayed in the UI.

4. Defining `ng-app` with and without a Module

Without a Module (Implicit Initialization)

<body ng-app>
    <h1>{{ "Hello AngularJS" }}</h1>
</body>

No module is explicitly defined.
AngularJS automatically bootstraps and executes expressions.

With a Module (Explicit Initialization)

<body ng-app="myApp">
    <div ng-controller="DemoController">
        <h2>{{ message }}</h2>
    </div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("DemoController", function($scope) {
            $scope.message = "This is an AngularJS Application!";
        });
    </script>
</body>

A module “myApp” is explicitly defined.
AngularJS initializes the module before applying bindings.

5. Best Practices for Using `ng-app`

Define ng-app at the highest level (usually <html> or <body>) to apply AngularJS globally.
Always use a named module (ng-app="myModule") for better maintainability.
Do not use multiple ng-app instances in a single HTML document, as AngularJS only bootstraps the first instance.
Keep the module and controllers separate in a JavaScript file rather than defining them inline.

6. Common Mistakes and Troubleshooting

Multiple `ng-app` Directives in a Single Page

<body ng-app="app1">
    <div ng-app="app2"> <!-- This won't work -->
        <h1>{{ message }}</h1>
    </div>
</body>

Why? AngularJS only bootstraps the first ng-app. The second instance is ignored.

Solution: Use only one ng-app and multiple controllers instead.

Using `ng-app` Without Including AngularJS

<body ng-app>
    <h1>{{ message }}</h1>
</body>

If the AngularJS library is missing, nothing will be processed.

Solution: Always include AngularJS before using ng-app:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Forgetting to Define the Module

<body ng-app="myApp">
    <div ng-controller="MainController">
        <h1>{{ title }}</h1>
    </div>
</body>

If "myApp" is not defined, AngularJS will throw an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp

Solution: Define the module properly:

var app = angular.module("myApp", []);
app.controller("MainController", function($scope) {
    $scope.title = "Hello AngularJS!";
});

1. What is ng-app?

2. How ng-app Works?

3. Syntax and Example

Basic Syntax

Example 1: Basic ng-app Without a Module

Example 2: Using ng-app with a Module

4. Defining ng-app with and without a Module