AngularJS - Part 1
-
Upload
nishikant-taksande -
Category
Software
-
view
225 -
download
1
Transcript of AngularJS - Part 1
![Page 1: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/1.jpg)
gAngularJS
ByNishikant Taksande
NetPay Merchant Services
![Page 2: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/2.jpg)
![Page 3: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/3.jpg)
TemplateSERVICE
MODULE
Injector
Dependency Injection
CONTROLLERData Binding
View
Filter
Compiler
ExpressionsScope ModelDirectives
?
![Page 4: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/4.jpg)
![Page 5: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/5.jpg)
The Principles
Boilerplate
D.R.Y. Structure Testability
Source: google I/O
![Page 6: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/6.jpg)
DatabaseRAM
<div>
<span> <ul>
<li><li><li>
Where does it fits in?
Source: google I/O
![Page 7: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/7.jpg)
How it works?
AngularJS will initialize when DOM content is loaded
ng-app
![Page 8: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/8.jpg)
Conceptual Overview
TEMPLATE
DIRECTIVES
MODEL
SCOPE
EXPRESSIONS COMPILER
VIEW FILTER
DATA BINDING CONTROLLER
MODULE SERVICE
![Page 9: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/9.jpg)
Kick Start
DIRECTIVES FILTERS DATA BINDING
![Page 10: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/10.jpg)
What are directives ?
They teach HTML new trick!
![Page 11: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/11.jpg)
Using DirectivesDirective
Directive
![Page 12: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/12.jpg)
Using Directives …
![Page 13: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/13.jpg)
Using Filters
![Page 14: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/14.jpg)
RAM
{{ databinding }}
Logic
<div>
<span> <ul>
<li><li><li>
![Page 15: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/15.jpg)
ManagesNotifies
Observes
Logic / Controller(JS Classes)
UI / View(DOM) RAM Data / Model
<div>
<span> <ul>
<li>
Structure
![Page 16: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/16.jpg)
Model
View
var firstName = “john”
<h1>john</h1>
controller, viewModel
MVC
![Page 17: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/17.jpg)
View, Controller and Scope
VIEW CONTROLLER SCOPE
![Page 18: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/18.jpg)
View, Controller and Scope…
VIEW CONTROLLER$scope
$scope is the glue between a controller and a view
![Page 19: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/19.jpg)
View, Controller and Scope…
$scope injected dynamically
![Page 20: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/20.jpg)
Module, Routes and Factories
MODULE ROUTES FACTORIES
![Page 21: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/21.jpg)
MODULE
CONFIG
ROUTES
VIEW CONTROLLER$scope
*FACTORIESDIRECTIVES
![Page 22: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/22.jpg)
Module and container<html ng-app="sampleApp">
MODULE
CONFIG FILTER DIRECTIVE FACTORY CONTROLLER
ROUTES
SERVICE
PROVIDER
![Page 23: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/23.jpg)
Creating Module
var sampleApp = angular.module('sampleApp', []);
What it is for?This is where dependency
injection comes in
var sampleApp = angular.module('sampleApp', [‘helperApp’]);
sampleApp depends on helperApp module
![Page 24: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/24.jpg)
Creating Controller in ModuleCreating Module
Creating Controller
![Page 25: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/25.jpg)
Role of Routes
VIEW #1 VIEW #2
VIEW #3VIEW #4
/view1
/view2
/view3
/view4
![Page 26: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/26.jpg)
Routes Dependency
Define Module Route
![Page 27: AngularJS - Part 1](https://reader035.fdocuments.net/reader035/viewer/2022062523/589f08861a28ab226b8b4d93/html5/thumbnails/27.jpg)
AngularJS