What is AngularJS?

AngularJS or simply Angular is a JavaScript framework that makes the development of RIA internet applications easier. It is an extension to HTML with new attributes. It makes use of declarative programming for building UI. This article is an introduction to AngularJS. It describes the basic overview of AngularJS. Summary of the article:

What is AngularJS?

History of AngularJS

Why AngularJS?

Advantage of AngularJS

AngularJS Directives

AngularJS Expressions

AngularJS Modules

What is AngularJS?
AngularJS is a open source JavaScript framework for creating single page web applications. These types of applications need HTML, CSS and JavaScript only. AngularJS extends our existing HTML attributes with Directives and binds data to HTML with Expressions. AngularJS is written in JavaScript and is distributed as a JavaScript file can be added to a web page with a script tag:

AngularJS is client side, so everything is occur in web browser. AngularJS is based on the MVC (Model View Control) pattern. So it separates our RIA applications into models, views and controllers. The views are specified using HTML and AngularJS’s own attributes. The models and controllers are specified via JavaScript objects and JavaScript functions. Thus, as like HTML the views are specified declaratively, and as like JavaScript the models and controllers are specified imperatively. It has some difference with jQuery.

History of AngularJS
AngularJS was originally developed by Miško Hevery and Adam Abrons in 2009 at Brat Tech LLC. It is now officially backed by Google.

Why AngularJS?
HTML is great for creating static documents. But it is faulty when we try to use it for declaring dynamic views in web-applications. AngularJS lets us to extend HTML vocabulary for your application. Its output is readable, extraordinarily expressive, and time consuming to develop.

Advantage of AngularJS
The advantages of AngularJS is given bellow:

Need to write lesser code

It helps to create template that is reusable in multiple times

It provides two way data binding

We can directly call the code behind code in the html

We can validate forms and input fields in client side without writing a single line of code

AngularJS Directives
AngularJS directives are used to specify custom and reusable HTML tags that moderate the behavior of certain elements. AngularJS provides some predefined directives to perform faster operations. But we can creates our custom directives also. Some common directives are given bellow:

ng-app
This directive initializes an AngularJS application. It is the root element of the application allowing behavior to be modified through custom HTML tags.

ng-bind
This directive binds application data to the HTML view. We can see the value of data on runtime.

ng-show & ng-hide
This directive show or hide an element based on the value of a boolean expression.

ng-switch
This directive performs an action from a set of choices based on the value of a selection expression.

ng-view
This directive is responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.

ng-if
This directive works like our traditional if statement.

AngularJS Expressions
The expressions in AngularJS are written inside double braces, like: {{ expression }}. They bind data to HTML the same way as the ng-bind directive. They are much like JavaScript expressions and can contain operators, variables, and literals.
Example {{ 2 + 3 }} or {{ FirstName + ” ” + LastName }}

AngularJS Expressions Example:

<div ng-app="">
<p>Sum of 2 and 3 is: {{ 2 + 3 }}</p>
</div>

AngularJS Numbers, Strings, Arrays, Objects are as like as JavaScript. Example is given bellow:

AngularJS Modules
In AngularJS module is as like as a container for the different parts of applications (controllers, directives, services, filters, etc). Like others applications angular applications don’t have main method. In AngularJS application all the controllers should belong to a module. It makes our application more readable, reusable, and keeps the global namespace clean. Consider the following example where “myModule” is a module and “myController” is a controller.

<div ng-app="myModule" ng-controller="myController">

A controller without a module where controller function is global is given bellow:

AngularJS provides all the features that are required to develop CRUD applications. Its data validations, code reusability, URL routing, data binding features are really fantastic. We can use AngularJS with ASP.NET also.

About Author

Rashed

I’m Rashedul Alam, software engineer/architect, technical blogger, and educator. I have over 10 years of working experience in the field of software design and development. I like to share my knowledge and technical stuff with others. I am a community contributor, providing problem solving answer through different forum.