AngularJS Tutorial

Day #1
By
George

Agenda

AngularJS Introduction

Model-View-Controller (MVC pattern)

Single Page Application(SPA)

First Program

Application Execution

Data Binding

Assignments

AngularJS Introduction
What ?

AngularJS is a JavaScript MVC(Model-View-Controller) structured framework

for dynamic web applications

It is the client-sided, so all these things are happening in browsers

Helps to running single-page applications

Goal is to make browser-based applications with modelviewcontroller

(MVC) capability

Helps to make both development and testing easier.

AngularJS is developed by Googler and supported by Googler

AngularJS Introduction
Why ?

many other front-end frameworks available in the web world

likeBackbone,Knockout,Ember,Spline -- They all have many pros & Cons

With AngularJS:

Write lesser code

Reuse components

Two-way-data-binding

Dependency Injection

Form Validation

Helps end-to-end Testing

Model-View-Controller Architecture

MVC Event Work flow

Single Page Application

Single Page Application

First Program - AngularJS

First Step : HTML Page

Second Step: include the

AngularJS JavaScript file

First Program - AngularJS

Third : - ng-appattribute to
the root HTML element

Fourth: - A view is a
section of HTML

First Program - AngularJS

Fifth: need a controller
function

Theangularobject is a
global object created by
the AngularJS JavaScript
which is included at the
beginning of the page.
Thecontroller()function
call is what registers the
controller function itself.

Application Execution
First:

The HTML document is loaded into the browser, and evaluated by the browser.

AngularJS JavaScript file is getting loaded

angularglobal object is created

JavaScript which registers controller functions is executed

Second:

AngularJS scans through the HTML to look for AngularJS apps and views4

When AngularJS finds a view it connects that view to the corresponding controller
function.

Application Execution
Third:

AngularJS executes the controller functions and update (render) the views with data
from the model populated by the controller. The page is now ready.

Fourth:

AngularJS listens for browser events (e.g. input fields being changed, buttons clicked,
the mouse moved etc.)

If any of these browser events require a view to change, AngularJS will update the
view correspondingly.

If the event requires that the corresponding controller function is called, AngularJS will
do that too.

Any Question So far ?

Two-Way-Data-Binding

Two way data binding

in AngularJS handles
the model view
synchronization

Move On To Examples

Assignments

Create a Hello World program using AngulrJS

Make use of angularJS library and ng-app
directive Also, create a simple controller
use that controller to hold the model scope
And, bind that model scope into the views

Questions ?