KodeInfo | Learning resources for web and mobile development

Introduction and Data Binding of AngularJs

December 26th, 2014 10:07:51 in Data Binding , Scopes by Imran Iqbal Comments(0) - Views(7367)
Tags : angularjs, Introduction, Two Way Data Binding

Introduction

Recently i started learning AngularJs, it was very difficult for me to find some good detailed articles or beginner tutorials  on AngularJs. I have to read from many different articles, books and tutorials. So i decided to put step by step help for beginners like me, so that they get complete required help from one place. Since AngularJs is a very rich framework so i decided to write in a series of post that will help beginners who want to learn or work on Single page web applications using AngularJs. I am assuming that people reading this article are aware of HTML and JavaScript/jQuery. So lets start with a short but detailed tutorial where you will be able to quickly understand the power of AngularJs in the world of web.

What is AngularJs

AngularJs is a client side technology, written entirely in JavaScript. It works with the long established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before.

AngularJs takes care of advanced features that users have become accustomed to in modern web applications, such as:

  • Separation of application logic, data models and views.
  • Ajax services.
  • Dependency Injection.
  • Browser history
  • Testing
  • And many more

Angularjs is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.

Angular teaches the browser new syntax through a construct we call directives. Examples include:

  • Data binding as in {{}}
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling
  • Grouping of HTML into reusable components

Data Binding and Your First Web Application

Data binding in Angular apps is the automatic synchronization of daa between the model and view components. Angular implements data binding in way that model will be the single source of truth in your application. The view is a projecting of the model at all times. When the model changes, the view reflects the change, and vice versa.

Let's write a simple hello world application using AngularJs.

<!DOCTYPE html>
<html ng-app>

<head>
	<title> Simple App</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>
	<input ng-model="name" type="text" placeholder="Your Name">
	<h1> Hello {{ name }}</h1>
</body>

</html>

                                                                

In classic web frameworks, the controller combines data from models and mashes them together with templates to deliver a view to the user. This combination produces a one way data binding.

                                  

AngularJs takes a different approach. Instead of merging data into a template and replacing a DOM element, AngularJs creates live templates as a view. Individual components of the views are dynamically interpolated live. The ng-app attribute declares that everything inside of it belongs to this Angular app. 

To review the code we just wrote, what we did was bind the name attribute to the input field using the ng-model directive on the containing model object ($scope).

All that means is that whatever value is placed in the input field will be reflected in the model object. When Angular thinks that the value could change, it will call $digest() on the value to check whether the values is changed. Hence when the Angular runtime is running, it will look for potential changes on the value. This process is dirty checking.

Now that we have a binding setup, we can see how the view changes the model. When the value in the input field changes, the name will be updated and the view will reflect the change.

To illustrate bi directional binding from the back end to front end, we will have to dive into controllers. To declare our above example inside of a controller, we will change the HTML to look like.

<!DOCTYPE html>
<html ng-app>

<head>
	<title> Simple App</title>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>
	<div ng-controller="MyController">
		<input ng-model="name" type="text" placeholder="Your Name">
		<h1> Hello {{ name }}</h1>
	</div>
	
</body>

<script type="text/javascript">
	function MyController($scope){
		
		$scope.getName = function(){

		return $scope.name;
	}
	};
</script>
</html>

This shows how angular works with data binding and reflects it on view in both ways. We will go through remaining concepts in our next tutorials.

To know about angular js controllers go to http://www.kodeinfo.com/post/angularjs-controllers

Thanks

Kode Info

Author

  • Imran Iqbal
    Imran Iqbal

    Imran is a web developer and consultant from India. He is the founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

Related

WHY USE A FRAMEWORK OVER PLAIN PHP

WHY USE A FRAMEWORK OVER PLAIN PHP
read more

GETTING STARTED WITH LARAVEL

GETTING STARTED WITH LARAVEL
read more

UNDERSTANDING LARAVEL STRUCTURE

UNDERSTANDING LARAVEL STRUCTURE
read more

UNDERSTANDING LARAVEL ROUTES

UNDERSTANDING LARAVEL ROUTES
read more

comments powered by Disqus