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=
"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: 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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.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="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:
Similar Reads
AngularJS $locale service
The AngularJS $locale service is a built-in service that provides localization information for the current browser environment. It is designed to help developers create applications that can be easily adapted to different locales and languages. The $locale service exposes a number of properties that
4 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
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 $document Service
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 serv
3 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 $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
AngularJS $httpParamSerializer Service
The AngularJS $httpParamSerializer service is a service that is used to serialize data into a URL-encoded string. It is commonly used with the AngularJS $http service to encode request parameters when making HTTP requests. Syntax: app.controller('myCtrl', function($scope, $http, $httpParamSerializer
4 min read
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 $cacheFactory Service
The $cacheFactory service in AngularJS is a factory function that creates new instances of the Cache object, which is a simple in-memory cache that stores key-value pairs. The Cache object is useful for storing data that is expensive to retrieve, such as data that comes from a server or data that is
5 min read
AngularJS $exceptionHandler Service
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 $exceptionHand
4 min read