Overview Of AngularJS

In this article, we will see an 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.
    Two-Way databinding

    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.

website

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

Search Angular JS

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.

Page

Just drag and drop the AngularScript first.

script

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.

CODE

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

CODE

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:

application
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.

CODE

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?

output
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?
CODE
OUTPUT
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,

CODE

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

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

properties
When you run the solution, it should display Akshay.

solution
You can also use arrays like:

arrays

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,

OUTPUT
Conclusion

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!!