Angular JS Overview: Benefits, Basics, & Simple Examples

Overview

We will learn what is Angular JS, and 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 applications (SPA) and rich Web Applications. An 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, that 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 data binding 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 respectively.
• Testing This is where Angular JS has the upper hand. With the help of Angular JS, unit testing and end-to-end testing have 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 is done by Angular itself.
• Directives There are 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 build an Angular JS file, we need only one script file i.e. angular.js file.

You can also download it from the 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 an HTML or ASPX page.

I added the ASPX page.

Just drag and drop the AngularScript first.

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

What is the 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 the Angular JS Application. It will check the first ng-app directive in the page first, if the ng-app section is found, then it bootstraps the page and manages the data for the display.

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

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

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

We got the desired output sum of 10 and 100.

Now, we will write those ng-apps in a div and 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 the 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 the div section will be computed and displayed.

Now let's do it for Boolean.

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

Similarly, we can use plain JavaScript properties and access names, ages, 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 position 1, which should display Hari.

Conclusion

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