Two Way Data Binding In Angular Without $scope Object Using MVC

Satyaprakash Samantaray
Nov 16, 2017
2.3k
0
2
Article

Introduction

Data binding is the most useful and powerful feature among any of the existing or upcoming software development technologies. It is actually a process that bridges a connection between the view and business logic of the application.Basically, we will see one-way and two-way data binding with respect to AngularJS applications. But before we jump to that section, we will try to learn something about the scopes in AngularJS.

Description

Here, I will show you how two-way binding in AngularJS MVC works without $Scope object.

To know more details

Click Here>>

Source Code

Download>>

One Way Data Binding In AngularJS

One-way data binding is an approach where a value is taken from the data model and inserted into an HTML element. There is no way to update model from view.

AngularJS provides some predefined data binding directives which are as follows:

ng-bind – Binds the inner Text property of an HTML element.
ng-bind-template - Almost similar to the ng-bind directive but allows for multiple templates.
ng-non-bindable - Declares a region of content for which data binding will be skipped.
ng-bind-html - Creates data bindings using the inner HTML property of an HTML element.
ng-model - Creates a two-way data binding.

Two Way Data Binding

In simple terms, two-way data binding is when the model changes, the view reflects the change and vice versa. Two-way bindings in AngularJS are created with the ng-model directive. Practically, two-way bindings can be applied only to those elements that allow the user to provide a data value, which means the input, textarea, and select elements.

Note

Scopes are those objects that contain functionality and the data that has to be used when rendering the View. The scopes of the application refer to the application model, so you can think of scopes as a View Model.Scopes are the source of truth for the application state. Because of this live binding, we can rely on the $Scopes to update immediately when the View modifies it, and we can rely on the View to update when the $scope changes.

About $Scopes

Gives observers to watch for all the model changes.
Gives the ability to propagate model changes through the application as well as outside the system to other components associated.
Scopes can be nested in such a way that they can isolate functionality and model properties.
Gives an execution environment in which expressions are evaluated.

When the model changes the view is automatically updated. This is achieved using the data binding expression in the view.

AngularJS ng-bind and Html Span Element Templates

ng-bind
This directive binds the model value to the HTML element.
Template
Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.

Steps To Two way Databinding Using AngularJS without $scope object

Step-1

Create an MVC application named "Satyatwowaydbp1".

Code ref of Controller name i.e. HomeController.cs,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Satyatwowaydbp1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}

Code Description

Here, Index is the Controller action method name.

Code ref of View name i.e. \Home\Index.cshtml,

@{
ViewBag.Title = "Satyaprakash";
}
<style>
input[type=text], select {
width: 60%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<fieldset>
<legend style="font-family:Arial Black;color:blue">Two Way DataBinding AngularJS IN MVC 4.5</legend>
<div ng-app="">
My Full Name :
<input type="text" ng-model="MyTitle" placeholder = "Enter Your Name Here....">
<hr />
My Name Is 1st Time: <span style="color:blue;background-color: Yellow;color: Blue;font-style: oblique;font-weight: bold">{{MyTitle}}</span>
<br />
<br/>
My Name Is 2nd Time: <span style="color:orangered;background-color:yellow;font-style: oblique;font-weight: bold" ng-bind="MyTitle"></span>
</div>
</fieldset>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Code Description

To display the record using ng-bind and templates in AngularJS, in this example, I have set the ng-model directive for the TextBox.

<input type="text" ng-model="MyTitle" placeholder = "Enter Your Name Here....">

There are two HTML SPAN elements of which one is set with a template expression while other is specified with the ng-bind directive.

<hr />
My Name Is 1st Time: <span style="color:blue;background-color: Yellow;color: Blue;font-style: oblique;font-weight: bold">{{MyTitle}}</span>
<br />
<br/>
My Name Is 2nd Time: <span style="color:orangered;background-color:yellow;font-style: oblique;font-weight: bold" ng-bind="MyTitle"></span>

These two names will show with different colors that will specify easily HTML SPAN element and ng-bind directive.

As we type in the TextBox, both the HTML SPAN elements display the value of the TextBox dynamically and that too without writing a single line of JavaScript code. Here no button click event also not required.

Advantages

Because of the two-way data binding provided by angular, as you type in the textbox, the value is immediately displayed in the View just below the textbox. This two-way binding feature provided by Angular eliminates the need to write any custom code to move data from the model to the View or from the View to the model. The Model and View are synchronized. In other words, when the Model data changes, the change is reflected in the View while when the View changes, the Model is updated.

OUTPUT

The URL Is: http://localhost:49906/Home/Index