Introduction
In my previous articles I told you about:
This article explains the $rootElement Service provided by AngularJS.
AngularJS provides a service named $rootElement, by using this service the user can display the name of the element where "ng-app" is declared or where the element was passed into the angular.Bootstrap. This service can also be used to learn the location of where the injector is published, knowing this type of location we need to use $rootElement.injector().
Here I will create an application that will help you understand this service in a convenient way.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and can download it: ANGULARJS.
After downloading the external file you need to add this file to the head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a JavaScript function in which the $rootElement Service will be initiated.
<script>
var showAppName = angular.module('showAppName', []);
showAppName.service('serve', function ($rootElement) {
return { appName: $rootElement.attr('ng-app') };
});
showAppName.controller('x', function ($scope, serve) {
$scope.appName = serve.appName;
});
</script>
Here I took a variable "showAppName", in this variable I took the angular.module in which the value for ng-app is provided, this is the name that will be bound to the ng-app and will be displayed in the output window.
Then I created a function in which the $rootElement Service is declared, since we want to display only the ng-app value so I am using the $rootElement.attr, if we want to display the location of where the injector is published then we need to declare the $rootElement.injector().
After this I have created a controller function named "x", the value of ng-app is passed to a variable named as appName.
Now our work on the View is completed so we can work on the ViewModel.
Step 3
<body>
<form id="form1" runat="server">
<div ng-app="showAppName" ng-controller="x">
This is my App Name: "{{appName}}"
</div>
</form>
</body>
Here I took a div that is bound to the ng-app and ng-controller both, in the ng-app I passed the "showAppName" that was declared in the first line of JavaScript code, in the Controller I have provided the name of the controller function.
After this I had written some text that can also be provided inside the label, appName is bound with this text using the {{ }} brackets, this will show the value that was provided in the first line of code.
Now our application is ready for execution.
Output
On running the application you will see that the ng-app value is provided along with the text that was provided in the DOM.
![rootElement Service]()
You can see that the expected result is shown in the output window.
Now I am changing the ng-app value in the code:
<script>
var tryingagain = angular.module('tryingagain', []);
tryingagain.service('serve', function ($rootElement) {
return { appName: $rootElement.attr('ng-app') };
});
tryingagain.controller('x', function ($scope, serve) {
$scope.appName = serve.appName;
});
</script>
I am running the code again and a different result can be seen:
![rootElement Service]()
The complete code of this application is as follows:
<html ng-app="tryingagain" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
var tryingagain = angular.module('tryingagain', []);
tryingagain.service('serve', function ($rootElement) {
return { appName: $rootElement.attr('ng-app') };
});
tryingagain.controller('x', function ($scope, serve) {
$scope.appName = serve.appName;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="tryingagain" ng-controller="x">
This is my App Name:- "{{appName}}"
</div>
</form>
</body>
</html>