Introduction to AngularJS With Simple Demo Application

Gaurav Gupta
Jan 09, 2015
15.4k
0
0
Article

Google developed a new framework for JavaScript developers, AngularJS. AngularJS is a JavaScript MVC framework to build properly architected and maintenable web applications. This framework makes it simpler for developers to build robust applications with HTML, CSS, and JavaScript.

AngularJS

According to angularjs.org: "AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. The resulting environment is extraordinarily expressive, readable, and quick to develop."

AngularJS developed web applications are based on the MVC architecture and also supports a modular approach to build applications that can depend on each other.

The most tempting features of AngularJS includes data binding, which encapsulates the behavior of controllers in the application with dependency injection, loosely coupled code and conciseness. It encapsulates the behavior of your application in controllers that are instantiated because of the concept of dependency injection. Due to dependency injection, AngularJS helps us to structure and test your JavaScript code very easily.

Most Prominent Feature of AngularJS.

Two-way data-binding : Your JavaScript data automatically updates your DOM and vice-versa.
Routing : Define routes, associate templates and controller in just a few lines.
Partial Views: Many helpers to help dealing with forms, one of the worst webdevs nightmare.
Directives : Directives are one of the most powerful feature of AngularJS. It specifies how your page should be structured for the data available in a given scope using Encapsulates templates and code in reusable components.
Testability : AngularJS was designed in a way your web app can be fully testable.
Filters : AngularJS provides you with the filter mechanism.
Services: We can also create and calling a service with $http.

So, after getting a basic knowledge, let's start to how to use AngularJS in web applications to make it more expressive and readable.

First you need to download the AngularJS from here.

http://www.angularjs.org/

Or you can add the script file like this:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

So, let's create a simple application as in the following:

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body style="background-color: pink">
<div>
            <input type="number" ng-model="FirstValue" value="0" placeholder="Enter First value here">
                +
          <input type="number" ng-model="SecondValue" placeholder="Enter Second value here">
={{FirstValue+SecondValue}}
</div>
</body>
</html>

Here are the definitions of directives I used in the code.

ng-app: This will activate the AngularJS to the entire document.
ng-model: This is used for two-way binding. This links the UI with the model.

{{--}} : This is the Expressions in AngularJS. This will execute expressions directly within your HTML page automatically whenever a TextBox value is changed.

Now, run the app and see output.

When you enter a value into both textboxes, it will automatically give the sum of these.

And, as when you change the value of any textboxes, this will cause the result to change immediately.