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 = ['w3wiki', '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:
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.