-
Difference between AngularJS Expression and JavaScript Expression
almost 8 years ago
These are the following differences between Angular JS expression and JavaScript expression :
- Used in HTML : Angular expressions can be used inside HTML while JavaScript expressions do not.
- Filters : Angular expressions works with filters while JavaScript expressions do not.
- Context : Angular expressions do not have direct access of global variables while JavaScript expressions have direct access. Global variables are window , document or location . The benefit of this in AngularJS is it prevent from accidental access to the global state.
- Forgiving : Angular JS forgiving the undefined and null for evaluated expression, while in JavaScript, it generates ReferenceError or TypeError.
- No Control Flow Statements : We cannot use control flow statements in angular expression. We can use only ternary operator.
- No function declarations : We cannot declare functions in Angular expression while in JavaScript expression we can do.
- No RegExp Creation With Literal Notation : We cannot create regular expression in Angular expression while in JavaScript expression we can do.
- No Comma And Void Operators : In Angular expression, we cannot use comma or void operators.
- One time binding : Angular JS supports one time binding. If you use :: in an expression , then it will create one time binding. The benefit of one time binding is it reduce the number of expression being watched that makes the digest loop faster that improved the final result performance. It also free the resources once binding is stabilized. It is used when we do not require to change value once its set.
Example of one time binding:
<h2>One Time Binding Example</h2> <body ng-app="oneTimeBidingExampleApp"> <div ng-controller="ctrl"> <button ng-click="getCity($event)">Get City</button> <p>One time binding: {{::name}}</p> <p>Without one time binding: {{name}}</p> </div> </body> @Scripts.Render("~/bundles/angularjquery") <script> angular.module('oneTimeBidingExampleApp', []). controller('ctrl', ['$scope', function ($scope) { var counter = 0; var names = ['Dehradun', 'Noida', 'Chandigarh', 'Gurgoan']; $scope.getCity = function (clickEvent) { $scope.name = names[counter % names.length]; counter++; }; }]); </script>OUTPUT :
Hope this blog will help you . Thanks
0 Comment(s)