What is the difference between ng-app and data-ng-app in AngularJS ?
Last Updated :
24 Jul, 2024
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.
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>GeeksforGeeks</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 = 'GeeksforGeeks';
$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:
data-ng-app
data-ng-app directive is one of the alternative methods to define the main root element of an AngularJS app in HTML. This directive is also used for bootstrapping the Angular App like the ng-app directive. But this is more used with the HTML validation tools and the parsers. By using the data-ng-app, we can ensure compatibility with the HTML validation tools and parsers that might not be recognized with the custom AngularJS attributes. We can use this data-ng-app directive where there is a need to work with other libraries or tools that rely on strict HTML validation.
Syntax
<div data-ng-app="myApp">
<!-- AngularJS application content -->
</div>
Example: The below example demonstrates the usage of the data-ng-app directive in AngularJS. Here, when the button is clicked, the h1 title is been changed with a different title, and also transition effect is been applied.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS data-ng-app Directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js">
</script>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: green;
transition: transform 0.5s;
}
h1.ng-hide-add,
h1.ng-hide-remove {
display: inline-block !important;
}
h1.ng-hide {
opacity: 0;
}
h3 {
color: #008CBA;
font-style: italic;
}
.btn {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div data-ng-app="myApp"
ng-controller="MyController"
style="border: 2px solid #008CBA;
border-radius: 10px;
padding: 20px;
background-color: white;
margin: 0 auto;
width: 400px;">
<h1 ng-style="h1Style"
class="animate-fade">
{{ title }}
</h1>
<h3>data-ng-app Example</h3>
<button class="btn"
ng-click="changeTitle()">
Change Title
</button>
</div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('MyController', function ($scope) {
var titles = ['GeeksforGeeks', 'AngularJS is Awesome'];
var currentTitleIndex = 0;
$scope.title = titles[currentTitleIndex];
$scope.h1Style = {};
$scope.changeTitle = function () {
$scope.h1Style.transform = 'rotate(360deg)';
$scope.title = titles[currentTitleIndex];
currentTitleIndex =
(currentTitleIndex + 1) % titles.length;
};
});
</script>
</body>
</html>
Output:
Difference Between ng-app and data-ng-app Directives
Basis | ng-app | data-ng-app |
|---|
| HTML Validation | May not pass HTML validation tools and parsers. | Designed to be HTML validation compliant. |
| Custom Attributes | Not recognized by all HTML validators. | Recognized as a valid data-* attribute. |
| Usage | Commonly used in AngularJS applications. | Preferred when strict HTML validation is needed. |
| Customization | Less flexible in custom attribute naming. | Allows more flexibility in attribute naming. |
| Data Attribute Convention | Does not strictly adhere to HTML5's data attribute convention. | Does not strictly adhere to HTML5's data attribute convention. |
Similar Reads
What is the difference between change and ngModelChange in Angular?
change: The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user.The change event is not necessarily fired for each alteration to an element's value. change is a DOM event that is it can trigger chan
2 min read
What is the Difference between Constructor and ngOnInit in AngularJS ?
Constructor: Constructor is the default method for a class that is created when a class is installed and ensures the proper execution of the roles in the class and its subsections. Angular are preferably the Dependency Injector (DI), analyzes the builder's components and when creating a new feature
3 min read
Difference between ng-container and ng-template in AngularJS
Both ng-container and ng-template can be used to create responsive and dynamic components. Angular provides a set of structural directives that can be used with both ng-template and ng-container such as: ng-ifng-forng-switch. These structural directives are used to alter the structure of the DOM by
3 min read
What's the difference between ng-pristine and ng-dirty in AngularJS ?
AngularJS supports client-side form validation. AngularJS keeps track of all the form and input fields and it also stores the information about whether anyone has touched or modified the field or not. The two different classes ng-dirty and ng-pristine that are used for form validation, are described
2 min read
What is the Difference Between required and ng-required 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 AngularJS, we can use certain Directive
4 min read
What is the difference between $watch and $observe in AngularJS ?
AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to obse
3 min read
What is the Difference Between factory and service in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will explore the differences between t
4 min read
What is the difference between ng-if and data-ng-if directives ?
The ng-if is a directive in AngularJS which is used to remove the HTML element if the value of the expression or variable is false, unlike ng-hide which just hides the HTML element from the DOM. Syntax: <element angular_directive=expression> Contents... </element> There are few other opt
2 min read
What is the difference between '@' and '=' in directive scope in AngularJS ?
AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols
4 min read
What is the Difference Between Promises and Observables in Angular ?
Angular is a TypeScript-based Single-Page Application framework used to create dynamic and responsive web applications. It is one of the most popular and robust frameworks. One of its key features is to handle Asynchronous Operations effectively. In Asynchronous, code is not executed sequentially ra
5 min read