Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS, Basic to Expert: Day Four

DZone's Guide to

AngularJS, Basic to Expert: Day Four

Welcome back! In today's article, we take a look a scope and data binding in AngularJS, and how they allow us to work with data in our applications.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Introduction:

In the previous articles of this AngularJS, From Basic to Expert series, we learned what AngularJS is, and looked at some basics of AngularJS, such as directives, the main concepts of AngularJS, which are modules, models, and controllers, and used them in our AngularJS demo application.

You can check previous articles here:

  1. AngularJS, Basic to Expert: Day One

  2. AngularJS, Basic to Exper: Day Two

  3. AngularJS, Basic to Expert: Day Three

In this article, "AngularJS, Basic to Expert: Day Four," we will learn about:

  • Scope in AngularJS.
  • Data binding in AngularJS.
  • So, I will explore these topics one-by-one and will also continue with the AngularJS demo application which we have used in the previous articles.

    Scope in AngularJS:

    Scope is an object injected into the application which represents data and methods. Scope is the main thing, or key, to bind application data and connect the model to the view. Scope handles the binding between the HTML view and JavaScript (AngularJS controller).

    Image title

    An AngularJS application consists of:

  • Model (which contains application data for the view).
  • View (our HTML page).
  • Controller (JavaScript functions).
  • Thus, scope is a JavaScript object which is available in both the view and controller.

    Data Binding in AngularJS:

    Data binding is data synchronization between the view and data model. In our previous articles, we have seen that AngularJS applications have a data model which is a collection of data for the application view and the view is our HTML which displays that data.

    Image title

    Data binding is the way data travels in AngularJS applications. In AngularJS, data binding defines how the data is passed from the view in our HTML page to the application's business logic. Another way of looking at data binding is that it controls the movement of data from the view to the functions in our AngularJS app, which reside in the controllers, or bind data at the same view, also.

    Data binding is the concept of automatic synchronization of data between the view and the model.

    The view access model can display data from the model on the view in several different ways.

    We can use the ng-bind directive which binds the inner HTML of an element.

    <p ng-bind="firstName"> </p>
    <!-- Or
    We can use double brackets to display firstName model property value.For example: -->
    {{ firstName }}
    <!-- Or
    We can use ng-model directive to bind model property to HTML element.
    e.g.-->
    <input type="text" ng-model="firstName">
           <p ng-model="firstName"> </p>

    Ok, so we have seen how we can bind a model property to HTML content in three ways. So, there should be some differences among them.

    Yes there is, and the differences are in the concept of data binding, actually, as AngularJS provides two types of data binding:

  • One-way data binding.
  • Two-way data binding.
  • One-Way Data Binding:

    We have already used one-way data binding in the above explanation and in our previous articles' demos and examples. One way data binding is generally used to display data on the view.

    The ng-bind directive and {{ }} provides the one-way data binding to display data on the view in an AngularJS application.

    Below are the examples of one-way data binding:

    {{ firstName }} 
    <p ng-bind="firstName"> </p>

    So, above, we are binding the model's value with the HTML element using data binding; but, if we change that HTML element it would not update the value in the model as it is performing one-way binding and not synchronizing the data between the model and view.

    Two-Way Data Binding:

    Two-way data binding is the synchronization process between the model and view in an AngularJS application.

    When the value is changed in the model, it is reflected in the view and when the value is changed in the view, it is also updated in the model; this process happens automatically. So, we always get updated and an up-to-date model and view without writing any extra code.

    The ng-model directive provides the two-way data binding between the model and the view in an AngularJS application. For example:

    <input type="text" ng-model="firstName">
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="D:\UserController.js"></script>
    <!--Using module by adding the name in the ng-app directive.-->
    <!--Adding UserController with the help of ng-controller directive.-->
    <body ng-app="MyERPDemoApp" ng-controller="UserController" > 
    {{ welcomenote }}
    <p>First Name: <input type="text" ng-model="firstName"></p>
    <p>Last Name: <input type="text" ng-model="lastName"></p>
    (used ng-bind nothing will display input type="text") <br/>
    <p>Company Address:<input type="text" ng-bind="CompanyAddress"></p>
    <p>Home Address: <input type="text" ng-model="HomeAddress" ></p>
    
    One way data binding: <br/>
    Company Address: <span ng-bind="CompanyAddress"> </span><br/> <br/>
    
    Two way data binding: <br/>
    <span >full Name: {{ firstName + " " +  lastName }} </span><br/>
    Home Address: <span ng-bind="HomeAddress"> </span><br/>
    
    </body>
    </html>

    Controller:

    // Creating module with name MyERPDemoApp.
    var angApp = angular.module("MyERPDemoApp", []);
    // Creating controller with name UserController.
    // passing $scope parameter
    angApp.controller('UserController', function($scope) {
    $scope.welcomenote="Welcome to Angular JS world..";
    $scope.CompanyAddress = "xyz street India";
    $scope.HomeAddress = "HM Add India";
    });

    Output:

    Image titleSummary:

    In this article, we have covered scope and data binding and we have seen how the data travels between the controller and view in AngularJS.

    Get complete series here: https://programingthress.com/

    What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

    Topics:
    angularjs ,web dev ,data binding ,web application development

    Published at DZone with permission of

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}