AngularJS tutorial for jQuery Developers: Part1

 

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.

 

Watch Video Tutorial

Shyam has written 22 articles

Shyam is senior full stack developer, who loves to explore new technologies and work on them. He's passionate about coding so can code 24/7. He uses PHP as a backend programming language.

He knows Laravel, MySQL, AngularJS, ReactJS, Redis, Kubernetes, Git, CodeIgniter, PHP, MVC pattern, Lodash, jQuery, VanilaJS, Teamcity and many other technologies and tools.

Shyam writes notes and hacks on his blog (http://shyammakwana.me). In spare time he can be found @ StackOverflow or crafting any new open source application.

Passionate Programmer and Meditator #PERIOD.