AngularJS $document Service
Last Updated :
23 Jan, 2023
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app.
The $document service in AngularJS is a wrapper around the browser's document object, which represents the HTML document that is being displayed in the browser. It provides a convenient way to manipulate the document object within an AngularJS application. The $document service can be used to get a reference to DOM elements, bind event listeners to the document object, and perform other common tasks with the document object.
Syntax:
angular.module('myModule', [])
.controller('MyController', function($scope, $document) {
// Use the $document service here
});The $document service in AngularJS does not take any arguments. It is a wrapper around the browser's document object, and it provides a convenient way to manipulate the document object within an AngularJS application.
Example 1: This example describes the basic example of $document service which prints a message on clicking a button each time.
HTML
<!doctype html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
<style>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 160px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
</style>
<script>
angular.module('myApp', [])
.controller('MyController', function ($scope, $document) {
var body = $document[0].querySelector('#id1');;
$document.on('click', function () {
var message = '<p>The document was clicked</p>';
body.insertAdjacentHTML('beforeend', message);
});
});
</script>
</head>
<body ng-controller="MyController">
<center id="id1">
<h1> GeeksforGeeks</h1>
<h3>AngularJS $document service</h3>
<button>Click me</button>
</center>
</body>
</html>
Output:
Example 2: In this example, we have an AngularJS application with a single controller, MyController. We have injected the $document service into the controller as a dependency, and we have defined a submitForm function that is called when the user clicks the submit button.
The submitForm function checks the validity of the form using the $valid property of the form object. If the form is valid, it logs the form data to the console and sets the formSubmitted flag to true, which displays a confirmation message to the user. If the form is invalid, it displays an error message using the insertAdjacentHTML method.
HTML
<!doctype html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js">
</script>
<style>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 160px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
input {
width: 200px;
padding: 5px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body ng-controller="MyController">
<center>
<h1> GeeksforGeeks</h1>
<h3>AngularJS $document service</h3>
<form name="form" novalidate>
<label>Name:</label>
<input type="text"
ng-model="formData.name" required>
<br>
<label>Email:</label>
<input type="email"
ng-model="formData.email" required>
<br>
<button ng-click="submitForm()">
Submit
</button>
</form>
<div ng-if="formSubmitted">
<p>Thank you for submitting the form!</p>
<p>Your name is {{formData.name}}</p>
<p>Your email is {{formData.email}}</p>
</div>
</center>
<script>
angular.module('myApp', [])
.controller('MyController', function ($scope, $document) {
$scope.formData = {};
$scope.formSubmitted = false;
$scope.submitForm = function () {
if ($scope.form.$valid) {
// Form is valid, submit it
console.log($scope.formData);
$scope.formSubmitted = true;
} else {
// Form is invalid, display an error message
var errorMessage =
'<p class="error-message">Please fill out all required fields</p>';
var form = $document[0].querySelector('form');
form.insertAdjacentHTML('beforeend', errorMessage);
}
}
});
</script>
</body>
</html>
Output:
Reference: https://docs.angularjs.org/api/ng/service/$document
Similar Reads
AngularJS $rootElement service The AngularJS $rootElement service is a global service that provides a reference to the root element of the AngularJS application. This can be useful in a variety of scenarios, such as modifying the root element's class name or attributes, or traversing the root element's descendants. Syntax: The sy
3 min read
AngularJS $compile Service The $compile service in AngularJS is used to compile an HTML template into a function that can be used to link the template to a scope. This service is typically used to compile dynamic templates that are generated on the fly, such as templates that are loaded from the server or created by a directi
4 min read
AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
Angular.js $log Service The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warnin
5 min read
AngularJS $controller Service AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
AngularJS $parse Service The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read