Overview Of AngularJS

Overview

We will learn what is Angular JS, what are the main benefits of Angular JS, and also we will see a simple example of Angular JS .

What Is Angular JS ?

• Angular JS is a JavaScript framework, which is used to build a Web Application. Google has developed Angular J . Angular JS is an open source project i.e. it can be downloaded, used and changed by anyone as per the requirements.
  
• Angular JS provides an excellent platform for creating Single Page Application (SPA) and rich Web Applications. Example of a Single Page Application is Gmail.
  
• You can refer to this Website(www.madewithangular.com) and you will get the whole list of Websites, which are developed in Angular JS
  
• There are plenty of JavaScript frameworks available in the market today.

Benefits of Angular JS ?

• Dependency Injection
  Dependency injection handles Angular JS as well .
  
  
• Two-Way databinding
  Two way databinding always keeps the model and view updated at the same time.
  
  
  If there is any change in the model, it updates the view. Similarly, when the view has any changes, it updates the model repectively.
  
  
• Testing
  This is where Angular JS has the upper hand. With the help of Angular JS, unit testing and end to end testing has become easier.
  
  
• Model-View-Controller(MVC)
  Angular JS goes well with MVC Applications. With the help of Angular JS, you can develop rich Web Applications. Managing the components and connecting them together is done by Angular itself.
  
  
• Directives
  There many directives available in Angular JS like the behavior of DOM elements and its flexibility . There are many filters in Angular JS too. Thus, let's see one by one in detail .

Introduction:

To built an Angular JS file, we need only one script file i.e angular.js file .

You can also download from official website of Angular.



Or you can download from NuGet Package by right clicking on your solution and managing the package.
 


Search Angular JS



Click to install it well and install Angular JS in your Application.

Now, right click on the solution and add HTML or ASPX page. 

I added ASPX page.



Just drag and drop the AngularScript first.



After dragging JS file, we add ng-app directive in our body tag .

Now what is ng-app directive here?

Ng-app is nothing but a directive in Angular JS as there are many many directives in Angular JS . ng-app is the starting point of Angular JS Application. It will check the  first ng-app directive in the page first, if ng-app section is found, then it bootstraps the page and manages the data for the display.

Now, we add ng-app directive in our body section.



Whatever you write in div section; it will display now and we will do a simple addition.



What are {{}} -- they are nothing but a binding expression here which is used to bind the numbers, when you run the Application and you will see:


We got the desired output sum of 10 and 100.

Now, we will write those ng-apps in a div and in another div. We will multiply two numbers.



In one div, I have written ng-app and in another div, I haven’t. Let's run our solution and see what output will we get?


As you can see with the output; it has not computed for the child div, it has only computed for the first div section .

Now, let's move the ng-app section to HTML tag and let's see what output will we get?


As you can see, we got the expected output, which means if we write ng-app directive in HTML tag; it is responsible for the child elements and what we had done in div section will be computed and displayed. 

Now lets do it for Boolean,



Now, I had written 1==2, which should return false.


Similarly, we can use plain JavaScript properties and access name, age and so on.


When you run the solution, it should display Akshay.


You can also use arrays like:



I had written a list of the names here and I want to return hari, so I had written an index postion 1, which it should display hari,


Conlcusion

This was about Angular JS Overview to give you an idea how Angular works and how to get the things rolling in Angular JS. I hope this article was helpful. All the Best!! Cheers!!