Open In App

AngularJS $parse Service

Improve
Improve
Like Article
Like
Save
Share
Report

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 AngularJS component as a dependency. For example, you might inject it into a controller like this:

angular.module('myModule', [])
  .controller('MyController', function($scope, $parse) {
    // Use the $parse service here
  });

Syntax:

var fn = $parse(expression);
var result = fn(context, locals);

Parameter: It accepts the expression as a parameter which is a string containing the expression to be parsed and evaluated.

Return type: It returns the function which depicts the compiled expression:

  • A context parameter is an optional object that specifies the context in which the expression should be evaluated. If provided, the expression is evaluated in the context of the context object. If not provided, the expression is evaluated in the global context.
  • The locals parameter is an optional object that contains local variables that should be available to the expression. If provided, the local variables are added to the context in which the expression is evaluated.

Example 1: In this example, we have an AngularJS application with a single controller, MyController. We have injected the $parse service into the controller as a dependency. When the user enters an expression into the input element and clicks the “Evaluate” button, the evaluate function is called and the result is displayed in the <p> element.

HTML




<!doctype html>
<html ng-app="myApp">
  
<head>
    <script src=
    </script>
    <style>
        h1 {
            color: green
        }
  
        button {
            color: white;
            background-color: black;
            height: 30px;
            width: 130px;
            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>
  
    <script>
        angular.module('myApp', [])
            .controller('MyController', function ($scope, $parse) {
                $scope.a = 1;
                $scope.b = 2;
                $scope.expression = 'a + b';
  
                $scope.evaluate = function () {
                    var fn = $parse($scope.expression);
                    $scope.result = fn($scope);
                }
            });
    </script>
</head>
  
<body ng-controller="MyController">
    <center>
        <form>
            <h1> GeeksforGeeks</h1>
            <h3>AngularJS $parse service</h3>
            <label>Expression:</label>
            <input type="text" 
                   ng-model="expression" /><br>
            <button ng-click="evaluate()">
                Evaluate
            </button>
        </form>
        <p>Result: {{result}}</p>
    </center>
</body>
  
</html>


Output:

 

Example 2: This example adds two input fields to the form, one for the first name and one for the last name. When the form is submitted, the updateFullName function is called, which updates the firstName and lastName properties on the scope with the values of newFirstName and newLastName, respectively, and re-evaluates the full name expression. This updates the value of $scope.fullName and the text displayed on the page.

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="myCtrl">
    <center>
        <h1> GeeksforGeeks</h1>
        <h3>AngularJS $parse service</h3>
        <h4>{{fullName}}</h4>
        <form ng-submit="updateFullName()">
            <label>First Name:</label>
            <input type="text" 
                   ng-model="newFirstName" required>
            <br>
            <label>Last Name:</label>
            <input type="text" 
                   ng-model="newLastName" required>
            <br>
            <button type="submit">
                Update Full Name
            </button>
        </form>
    </center>
    <script>
        var app = angular.module('myApp', []);
  
        app.controller('myCtrl', function ($scope, $parse) {
            $scope.firstName = 'Hello';
            $scope.lastName = 'Geek';
  
            // Parse the expression and assign the result to a variable
            var getFullName = $parse('firstName + " " + lastName');
            $scope.fullName = getFullName($scope);
  
            // Update the values of firstName and 
            // lastName and re-evaluate the expression
            $scope.updateFullName = function () {
                $scope.firstName = $scope.newFirstName;
                $scope.lastName = $scope.newLastName;
                $scope.fullName = getFullName($scope);
            }
        });
    </script>
</body>
  
</html>


Output:

 



Last Updated : 23 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads