How to use AngularJS Services In Angular

Accessing Using $rootScope Object

In this approach, we are accessing the scope from outside the JS function by using the AngularJS services. Here, we have used the messageService which mainly wraps the message variable and allows it to be accessed from within the controller. When the user performs the edit of the message in the input field, the updateServiceMessage() function is been actioned and the message is updated using the service.

Example: Below is an example that demonstrates accessing the scope from outside the js function in AngularJS using Services.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <title> 
          AngularJS Scope Access 
      </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
    </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            text-align: center; 
            background-color: #f0f0f0; 
            margin: 0; 
            padding: 0; 
        } 
  
        .container { 
            max-width: 400px; 
            margin: 0 auto; 
            padding: 20px; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
            background-color: #fff; 
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
        } 
  
        h1 { 
            color: green; 
        } 
  
        h3 { 
            color: #333; 
        } 
  
        p { 
            font-size: 18px; 
            margin: 20px 0; 
        } 
  
        .input-field { 
            width: 100%; 
            padding: 10px; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
        } 
    </style> 
</head> 
  
<body ng-controller="myController"> 
    <div class="container"> 
        <h1> 
              w3wiki 
          </h1> 
        <h3> 
              Approach 2: Using AngularJS Services 
          </h3> 
        <p>Edit the message:</p> 
        <input class="input-field" 
               type="text" 
               ng-model="message" 
               ng-change="updateServiceMessage()" /> 
        <p> 
              The message is from the service: 
              {{ serviceMessage }} 
          </p> 
    </div> 
        
    <script> 
        var app = angular.module('myApp', []); 
        app.service('messageService', function () { 
            var message = "Hello, World!"; 
            this.getMessage = function () { 
                return message; 
            }; 
            this.setMessage = function (newMessage) { 
                message = newMessage; 
            }; 
        }); 
        app.controller('myController',  
                       function ($scope, messageService) { 
            $scope.serviceMessage = 
                  messageService.getMessage(); 
            $scope.updateServiceMessage = function () { 
                messageService.setMessage($scope.message); 
                $scope.serviceMessage =  
                      messageService.getMessage(); 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output

How to access the Scope from outside JS Function in AngularJS ?

In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the application in response to user actions. In this article, we will see how we can access the scope from outside the JavaScript function in AngularJS.

Tags:

#AngularJS-Questions #Geeks Premier League 2023 #AngularJS #Geeks Premier League #Web Technologies

Accessing Using $rootScope Object

How to use AngularJS Services In Angular

HTML

How to access the Scope from outside JS Function in AngularJS ?

Similar Reads

Contact Us