This, That & Everything: AngularJS

Everything about AngularJS Two-way Data Binding

There is a lot of talk going on about AngularJS these days.Everyone used it says, It is an awesome framework.Any thoughts from you guys? Well, obviously it should have characteristics that other frameworks does not match and yes of course it surely does.
Among so many good things that Angular offers, there is one thing that stand out."How AngularJS handle Data Binding ?" Architecture behind AngularJS Data Binding mechanism is really fascinating. Commonly known as Two-Way binding among developers and it allows you to do so much more with less coding and take care lot of headache underlying work for you.

So I thought it is a good time to take a very good look at what really going on inside Angular and in this article I am going to discuss in and out details on AngularJS Two-Way Data Binding mechanism.

See the Pen AngularJS Two-way Binding by Anjana Wijesundara (@anjanawijesundara) on CodePen.

Above you can see a classic example of two-way binding in AngularJS. As you can see when ever We change our inputs it will automatically affect to the "Customer Information" panel too.What most exiting is "No additional Java Scripts or coding" necessary for do that.

Source : AngularJS Docs-Data Binding

Before Jumping to Data binding in AngularJS or explaining the code we'll take a peek at some important element in AngularJS architecture.

What Is Controller ?

Controller is the interaction between model and view.It controls the data of angular Application.

What Is Model ?

Model is the lowest level of pattern responsible for maintain Data.It is responsible for maintaining the application data.

Take a another look at our "CustomerController" again,It will create a model of Customer.

What Is Scope ?

Scope is the an object that refers to the application model.It provide the glue between application controller and the view.Scope allows the directives to be notified of property changes,Which allows the directives to render the updated value to the DOM.

This is your index.html file or your application view. As you can see we can use ng-bind or "{{ }}" to get model's data to view from controller. On the other hand all the input DOM property changes are report back to the controller too.Hence As soon as you change the value of a input it will affect to the model too.

If we take above program as an example, Initially Customer Information Panel and inputs have the values we assign to the model inside our "CustomerController".But as soon as we change the values of the input fields it will affect to the model,So the information inside Customer Information Panel will update too.

Folks this What we call Two-way Data Binding mechanism in AngularJS. We did not use one single additional line of code. All the data handling and communication between Model and View done by Angular it self.

That is the beauty which comes with Angular.Hope you enjoy the article and get something out of it.

12:20:00 PM
0 Comments

CRUD Application with AngularJS

AngularJS

This tutorial will teach you how to create a CRUD Application using AngularJS,PHP,MySQL and Slim framework.
You can find the source code of this article here

AngularJS is a Java Script framework for dynamic web apps.It lets you extend HTML tags.

Slim is a PHP micro framework which we are going to use for create REST service in php.

Below you can find file structure of the Application.

js - This folder include all the JavaScript files we use here.
api - This folder will contain Slim framework.
pages - This folder contains all the front end pages.

well let's get started with Installing Slim framework inside api folder . Follow the link, If you have any doubts over how to installing it. It's fairly easy process and I am not going write it in detail here.

After installing Slim you'll get a folder call Slim inside api folder.we'll leave it there for the current been.

Next create the index.html file and put below code segment inside it.

Well lets go through this code. We load AngularJS to our app and remember we have to load the angular-route.js too.I will tell you why later in this tutorial. Optionally I load bootstrap style sheet to have to have some sort of user friendly front end

<body ng-app="Application">

You can say this as a starting point of a Angular Application. ng-app directive responsible for auto-bootstrap angular application.

<div ng-view></div>

This directive is simply responsible for View of the Application.

Now inside JS folder create app.js file.

Here we have our 'Application' module.

In First line we declare our module.In this case it's Application. Second argument is a array. It consist of dependencies for the module.Here we need 'ng-Route' since it is the module that responsible for provide routing and deeplinking services and directives for angular apps.

Rest of the code is for set routs for the App.$routeProvider use for configuring routes.I recommend you to go through above link to get a better understand about $routeProvider. Actually this is where we need above discussed 'ng-Route' module to be installed as a dependency for $routeProvider.

Lets we move on to create our first Controller.

This is the controller for get the list of customer details.

AngularJs application are controlled by Controllers. 'CustomerListControler' is a JavaScript function and $scope is the application object. Which means it owns the application variable and objects.

$http use to communicate with web servers.

$http.get is the function use to read the server data and those data will store in property call customers.

What we have here is Controller for add a new customer.

One of new thing we come across here is $location. $location service parses the URL in the browser address bar and makes the URL available to your application.Changes to the URL in the address bar are reflected into $location service & changes to $location are reflected into the browser address bar.

Then we move onto create 'CustomerEditController', The Controller that will responsible for handle Edit and Delete.

Hm..looks like we don't have anything new to discuss here. So we'll move on to create database handling section.

Go to index.php file inside Slim folder.

In first two lines we call & create instance of Slim. Then comes the interesting part of Slim's route handling.As you can see it's really easy to understand .That is the one of main reason we use Slim framework here.If you want to know more about Slim routing follow this

Then we'll create actual database connection & database handling.

Now we almost end.All you have to do is create frond end pages for add,update and detailed list of customers.
Go to pages folder and create list.html,new.html and edit.html files
Well..It's done guys.Now we have your own little AngularJS application whichcapable of doing CRUD operation.I hope you enjoy the tutorial.
Happy coding.

You can find the source code of this article here

11:35:00 AM
29 Comments

Pages

This, That & Everything

Everything about AngularJS Two-way Data Binding

What Is Controller ?

What Is Model ?

What Is Scope ?

CRUD Application with AngularJS

About me

Follow Me

Press

Labels

recent posts

Blog Archive

Popular Posts