Open In App

AngularJS $document Service

Last Updated : 23 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads