ng-app

data-ng-app

ng-app in AngularJS is the directive that defines the main root element of the Angular application. This ng-app is mainly used to tell AngularJS which part of the HTML document should be treated as the Angular application. We mainly place the ng-app directive as an attribute in the HTML element and that element becomes the main root of the AngularJS application. When the HTML document of the application is been loaded, the AngularJS automatically utilizes the application defined by the ng-app. This mainly processes the DOM within the element that contains the ng-app and binds the data, applied directive to enhance the user interactions.

Syntax

<div ng-app="myApp">
    <!-- AngularJS application content -->
</div>

Example: The below example demonstrates the usage of the ng-app directive in AngularJS. Here, as per the user input, we will be changing the text and also the style (color) of the container by giving it a random color at every click.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          AngularJS ng-app Directive 
      </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </script> 
    
    <style> 
        body { 
            text-align: center; 
            background-color: #f0f0f0; 
            font-family: Arial, sans-serif; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        h3 { 
            font-style: italic; 
            color: #333; 
        } 
  
        .container { 
            border: 2px solid #008CBA; 
            padding: 20px; 
            border-radius: 10px; 
            background-color: white; 
            margin: 20px auto; 
            width: 400px; 
        } 
  
        p { 
            font-size: 18px; 
            color: #333; 
        } 
  
        button { 
            background-color: #008CBA; 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <div ng-app="myApp"> 
        <div ng-controller="MyController" 
             class="container"> 
            <h1>w3wiki</h1> 
            <h3>ng-app directive</h3> 
            <p>{{ name }} is the portal for geeks.</p> 
            <label for="nameInput"> 
                Change the text: 
            </label> 
            <input type="text"
                   id="nameInput" 
                   ng-model="name"> 
            <button ng-click="updateText()"> 
                Update Text 
            </button> 
            <button ng-click="changeStyle()"> 
                Change Style 
            </button> 
        </div> 
    </div> 
    
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('MyController', function ($scope) { 
            $scope.name = 'w3wiki'; 
            $scope.updateText = function () { 
                if ($scope.name) { 
                    $scope.name += ' is amazing!'; 
                } 
            }; 
            $scope.changeStyle = function () { 
                document.querySelector('.container').style.backgroundColor 
                    = getRandomColor(); 
                document.querySelector('p').style.fontSize = '24px'; 
            }; 
            function getRandomColor() { 
                var letters = '0123456789ABCDEF'; 
                var color = '#'; 
                for (var i = 0; i < 6; i++) { 
                    color += letters[Math.floor(Math.random() * 16)]; 
                } 
                return color; 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

What is the difference between ng-app and data-ng-app in AngularJS ?

In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions.

In this article, we will see the concepts of ng-app and data-ng-app in AngularJS. As these attributes are fundamental concepts while defining the AngularJS applications with the HTML documents. In this article, we will see both of these directives, their basic implementation, and the core differences between these concepts. Although they are used for the same purpose, but there are some key differences between them.

Tags:

#AngularJS-Questions #Geeks Premier League 2023 #AngularJS #Geeks Premier League #Web Technologies

data-ng-app

ng-app

Syntax

HTML

What is the difference between ng-app and data-ng-app in AngularJS ?

Similar Reads