angularjs gÇô tutorial day #1
DESCRIPTION
trTRANSCRIPT
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 ?