Now a days AngularJS is getting popular among developers, many companies are changing their websites with AngularJS.
Simple intro to AngularJS
AngularJS is a JavaScript framework by Google. It’s used for making robust dynamic web apps. It handles all DOM and AJAX well written code. It can be used to create CRUD (Create, Read, Update, Delete)
This tutorial will be for jQuery developers (others can learn too). Many of us (even me) use jQuery for DOM manipulation in our website, like form manipulation, input, checkbox synchronizing, dynamic dropdown value. Now all these are possible with AngularJS. I will show some of them. Even Angular has 5-6 more benefits from jQuery.
Lets Start,
1. Input[type=text] synchronization.
Using jQuery
From code we can see that, I have attached ‘keypress’ event to first input, that will invoke whenever I press a key, then it copies it’s value to slave text field.
It may look small but for larger applications where there are lots of DOM manipulation done, it becomes heavy. And if you look at JavaScript lines for angular you will be surprised. (Not a single line at all.)
Using AngularJS
Angular uses directives to bind value to variables, As shown in HTML I have binded angular variable master in "ng-model", so when there is a change in text field, it will be in master variable also.
This variable is also binded to slave text field. so it’s value will be chaned also.
Hurray, No single line of JavaScript. This is not ideal for every situation.
Below is another example of binding value to paragraph. Have a look at this.
