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.

tip 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

AngularJS Official Website
AngularJS Official Website

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

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>

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

Advantages of AngularJS

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

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