Open In App

AngularJS ng-init Directive

Last Updated : 28 Jul, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application.

Syntax:

<element ng-init = "expression">
    ...
</element>

Example: This example describes the ng-init Directive by initializing an array of strings. 

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS ng-init Directive
    </title>

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

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h3>ng-init directive</h3>

    <div ng-app="" ng-init="sort=['quick sort', 
        'merge sort', 'bubble sort']">
        Sorting techniques:
        <ul>
            <li>{{ sort[0] }} </li>
            <li>{{ sort[1] }} </li>
            <li>{{ sort[2] }} </li>
        </ul>
    </div>
</body>

</html>

Output:

 

Example 2: The example describes the ng-init Directive by specifying the object with its properties & associated value of it.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        AngularJS ng-init Directive
    </title>

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

<body style="text-align: center">
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h3>ng-init directive</h3>

    <div ng-app="" ng-init=
        "objects={
            Company:'GeeksforGeeks', 
            Course:'Data Structures & Algorithms'
        }">
        <p>
            Learn {{ objects.Course }} 
            from {{ objects.Company }}
        </p>
    </div>
</body>

</html>

Output:

 

V
Vishal Chaudhary 2
Improve
Article Tags :

Explore

Lightbox