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 model–view–controller (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 like Backbone, 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-app attribute to the root HTML element

Fourth: - A view is a section of HTML

First Program - AngularJS

Fifth: need a controller function

The angular object is a global object created by the AngularJS JavaScript which is included at the beginning of the page.

The controller() 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

angular global 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 ?