What is AngularJS?

AngularJS is a client side JavaScript MVC framework to develop a dynamic web application. AngularJS was originally started as a project in Google but now, it is open source framework.

AngularJS is entirely based on HTML and JavaScript, so there is no need to learn another syntax or language.

AngularJS is also called just "Angular".

AngularJS changes static HTML to dynamic HTML. It extends the ability of HTML by adding built-in attributes and components and also provides an ability to create custom attributes using simple JavaScript.

AngularJS website - https://angularjs.org

As you can see in the above angularjs.org website, you can download AngularJS 1 library by clicking on the Download AngularJS 1 link. AngularJS 2 is in the beta version as of this writing. This tutorials is using AngularJS 1.

Angular is an open source framework. Click on View on GitHub link to see the source code.

AngularJS Example:

The following is a simple AngularJS example that changes a label to whatever you type in the textbox.

AngularJS Example:

    
<!DOCTYPE html>

<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    Enter Your Name: <input type="text" ng-model="name" /> <br />
    Hello <label ng-bind="name"></label>
</body>
</html>

Try it

The above example is plain HTML code with couple of AngularJS directives (attributes) such as ng-app, ng-model, and ng-bind.

The same task can be accomplished using jQuery with more lines of code, as shown below.

jQuery Example:
    
<!DOCTYPE html>

<html>
<head>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    Enter Your Name: <input type="text" id="txtName" /> <br />
    Hello <label id="lblName"></label>

    <script>
        $(document).ready( function< () {
            $('#txtName').keyup(function () {
                $('#lblName').text($('#txtName').val());
            });
        });
    </script>
</body>
</html>

 
Try it 

Thus, AngularJS includes built-in attributes using which we can increase the productivity.

Advantages of AngularJS:

Open source JavaScript MVC framework.
Supported by Google
No need to learn another scripting language. It's just pure JavaScript and HTML.
Supports separation of concerns by using MVC design pattern.
Built-in attributes (directives) makes HTML dynamic.
Easy to extend and customize.
Supports Single Page Application.
Uses Dependency Injection.
Easy to Unit test.
REST friendly.

Let's setup AngularJS development environment in the next section.