AngularJS Basic Tutorial

AngularJS is a front-end framework for javascript developed by Google. With the powerful features of AngularJS, the development process can be much shorter. On the other hand, the organization of Javascript code becomes more structured and “clean” because the use of this framework encourages the application of the MVC pattern—or MV-Whatever—in the applications we develop. AngularJs

Simple Example
Let’s start with the simplest example: addition. Previously, first download the AngularJS framework file from the official page: http://angularjs.org. Or you can also use the provided CDN file:

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js
Here is our first AngularJS code. Use your favorite text editor and save the following code as an HTML file.

AngularJS
10 + 30 = {{ 10 + 30 }}
If you open the HTML file in a browser, you will get the number “40” as a result of adding between “10” and “30”. Display in Browser You must have noticed that there are additional attributes in the tag. ng-app is the main directive of AngularJS. It acts as the root-element of AngularJS. Simply put, this ng-app directive will tell you where to fire AngularJS, in this case the body element—that means the entire document. You’ll also notice the double curly braces in our example: {{…}}. For those of you who have used templating-engines such as Mustache, Hogan, or Handlebars, you must be familiar with this notation. In AngularJS, these double curly braces are called data binding expressions. What is inserted between these double curly braces will be evaluated by AngularJS, before finally outputting the results to the browser. In our example, we inserted an addition expression between double curly braces. Therefore, the addition expression will be evaluated before we finally get the result of the addition in the browser. Well, not so magical isn’t it?.

Add Some Magic
The previous example is certainly not very magical, so let’s add a little “magic” from AngularJS. Now we will create a simple multiplication application, but this time we will also add interaction with the user. Now the user can enter the number to be multiplied. Here is the full code:

AngularJS
*
= {{ x * y }}
Save it again as an HTML file and run the file in the browser. Now try to enter the number that will be multiplied through the two text inputs, please change the value. Voil! Immediately you will get the result of the multiplication. How? You didn’t even write any Javascript code! Display in Browser In the above example, you have another directive: ng-model. ng-model is an AngularJS directive that works for two-way data binding purposes. In simple terms it will bind the input control with the data used by AngularJS. So when the value of the input control changes, the data in AngularJS will also change; even vice versa. This is the elegance of AngularJS. We don’t touch the DOM directly: no more $(#blabla), no onchange(blabla), or .html(blabla). All manipulations of the DOM are magically abstracted away by AngularJS. As a result our code becomes more concise and structured. Of course the discussion here is still very simple and limited, only a small part of the elegance of AngularJS. You can dive deeper into AngularJS from the documentation: http://docs.angularjs.org/api and discover its true power!

Share To Social Media