AngularJS

A Brief Introductory Article

Muhammad Hasan Sarosh,
Wednesday - October 29, 2014.

AngularJS, which is owned and maintained by Google, is an open

source framework which helps the developers to develop single page AJAX
like web applications (includes HTML mark up, CSS styling files and Java
script code files at Client Side) and is developed using Java script which takes
of the burden from server and makes the applications much lighter.
In 2009 while working on an online storage service of JSON data files
two developers, Adam Aborns and Hevery Misko, at Brat Tech LLC, which is a
firm based in California, developed AngularJS framework. Later they left their
business perspective and made that project as an open source library to let
the developers contribute the code. Later Adam Aborns withdraw from that
project and Hevery Misko joined Google Incorporation where two other
employees of Google, Vojta Jina and Igor Minar, joined him to continue
development and maintenance of AngularJS library.
AngularJS is based on MVC i.e. Model View Controller architecture and
makes the front end web applications well structured, easy to test and easy
to maintain. Our Rich Internet Applications are separated in MODELs, VIEWs
and CONTROLLERs by AngularJS.
Let me give you a short and brief description of MVC - Model View
Controller pattern of software development.
Controllers are referenced by URL paths and that is what a user
interact with. In AngularJS they are specified imperatively using Java script
functions and objects. Different parameters are passed to these functions of
Controllers. They implement the logic, ask models for resources and
generate views.
Views are the HTML pages which are specified declaratively and
rendered by browser and that are what a user sees on his screen that is the
User Interface. Views are generated by Controllers on the basis of
parameters passed to them and the data received from Models.

Models are primarily responsible to fetch data on the basis of

parameters provided to them from controllers. They are usual java script
objects; that is they are defined in imperative manner.

What are DIRECTIVES in ANGULARJS?

One of the very important things of an AngularJS application is its
Directives. They are written as additional attributes to the DOM (Document
Object Model) Elements. They are marked to these elements and specific
functionalities are assigned to them. We are required to use the directives to
make the HTML really interactive, they achieve this by editing the Document
Object Model and by adding event listeners to these objects. These
directives enhance the ability of browser by adding more functionality to it.
We can also define our own custom directives to add our desired
functionality to the HTML tags those are the DOM elements. They are
referred as Killer feature of AngularJS. Following are some every day like
directives which are already defined in AngularJS code library.
Example :
ng - app directive is a must use directive. It specifies that the
element marked with it is the root element of AngularJS application. The
value it possesses is used to interact with the code modules of AngularJS
application.
ng - init directive has been defined to set the initial values for
AngularJS application. It makes it possible to use expressions in an AngularJS
application in an ongoing scope. Though it is widely used in AngularJS
application directive but controllers should be used to define values within
the scope. This particular directive is often used with ng - repeat
directive, which is also a very important directive used in AngularJS
application to make iterations.
ng - repeat directive is used with collections. This directive causes
instantiation of template on all the items of a collection one by one. Every
instance of template created by it possesses its personal scope. In that scope
the assigned loop variable keep referring to the item of collection which is
being used in that particular iteration while the $index keeps referring the
key or the item index.

What are MODULES in ANGULARJS?

Modules are like the containers in our AngularJS application which keep
many distinguish parts of our application. Filters, Directives, Services,
controllers etc. could be hold by these Modules of AngularJS application.
Other applications have an entry point to them which is usually
referred as main method or function which keeps the different parts of that
application connected to each other but an AngularJS application does not
have this main function or method.
REFERENCES :
AngularJS Superheroic Java Script MVW Framework. (October
29, 2014)
API Documentation : ng-repeat
https://docs.angularjs.org/api/ng/directive/ngRepeat

AngularJS Superheroic Java Script MVW Framework. (October

29, 2014)
API Documentation : ng-app
https://docs.angularjs.org/api/ng/directive/ngApp

AngularJS Superheroic Java Script MVW Framework. (October

29, 2014)
API Documentation : ng-init
https://docs.angularjs.org/api/ng/directive/ngInit

AngularJS Superheroic Java Script MVW Framework. (October

29, 2014)
AngularJS: Developer Guide : Modules
https://docs.angularjs.org/guide/module

Shahnawaz Ali : Blog (October 29, 2014)

AngularJS Fundamentals
http://www.shahnawaz.pk/angularjs-fundamentals/

Pawel Kozlowski , Peter Bacon Darwin : Mastering Web

Application Development with AngularJS (2013)

Egghead.io (October 29, 2014)

An Introduction to The AngularJS Directive

https://egghead.io/articles/an-introduction-to-the-angularjs-directivepart-1