What You Need To Know About AngularJS Data Binding

What You Need To Know About AngularJS Data Binding

You hear a lot about data binding in AngularJS, and with good reason: its at the heart of everything you do with Angular. What You Need To Know About AngularJS Data Binding. A data binding consists of a set of functions associated with a scope. AngularJS scopes behave like scopes in Javascript: a scope contains a set of named variables.

You hear a lot about data binding in AngularJS, and with good reason: its at the heart of everything you do with Angular. I've mentioned data binding more than a few times in my guides to  directives and filters, but I haven't quite explained the internals of how data binding work. To novices, it seems like straight sorcery, but, in reality, data binding is fundamentally very simple.

Scoping out the situation

Fundamentally, data binding consists of a set of functions associated with a scope. A scope is an execution context for the expressions you write in your HTML. AngularJS scopes behave like scopes in Javascript: a scope contains a set of named variables and is organized in a tree structure, so expressions in a given scope can access variables from an ancestor scope in the tree. However, data binding adds three powerful functions to a scope that enable you to assign an event handler to fire when a variable in scope changes as easily as you assign an event handler to fire when a button is clicked.

  • $watch()

This function takes an expression and a callback: the callback will be called when the value of the expression changes. For example, lets say our scope has a variable name, and we want to update the firstName and lastName variables every time name changes. With$watch, this is trivial:

$scope.$watch('name', function(value) {
  var firstSpace = (value || "").indexOf(' ');
  if (firstSpace == -1) {
    $scope.firstName = value;
    $scope.lastName = "";
  } else {
    $scope.firstName = value.substr(0, firstSpace);
    $scope.lastName = value.substr(firstSpace + 1);
  }
});

Under the hood, each scope has a list of watchers, internally called $scope.$$watchers, which contain the expression and the callback function. The $watch simply adds a new watcher to the $$watchers array, which AngularJS loops over when it thinks something that can change the state of the scope.

  • $apply()

When called without arguments, $apply lets AngularJS know that something happened that may have changed the state of the scope, so AngularJS knows to run through its watchers. You usually don't have to call $apply() yourself, because directives like ngClick do it for you. However, if you're writing your own event handler, like the swipeLeft and swipeRight directives from my  guide to directives, you need to plug $apply() into your event handler. Try removing the $apply() calls from the swipeLeft and swipeRight directives in this JSFiddle and watch as the UI stops responding to swipes.

angularjs angular

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular vs AngularJS | Difference Between Angular And AngularJS | Angular Training

This video on Angular vs AngularJS differentiates between the two frameworks. Although Angular and AngularJS are used interchangeably, they are significantly different. JavaScript based AngularJS was the first ever released version. However, the subsequent version are the TypeScript based Angular framework.

Hire Top Angular Developers | Hire Angularjs Developer India

Hire dedicated Angular JS developers & programmers in India for custom full-stack AngularJS app development projects on an hourly / full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts

Angular vs AngularJS: Differences Between Angular and AngularJS

What is the difference between Angular vs AngularJS? One vital distinction between Angular vs AngularJS is AngularJS is JavaScript-based while Angular is TypeScript based. These two frameworks have similarities as a front end, open-source platform that create dynamic SPAs but letโ€™s look at their differences.

Angular vs AngularJS | Difference Between Angular vs AngularJS | Angular Training

This Edureka video on "๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐ฏ๐ฌ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ๐‰๐’" will help you differentiate between TypeScript-based Angular and JavaScript-based AngularJS based on various factors.