Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
AngularJS - Mobile Warsaw 20/10/2014
29
-
Upload
dariusz-kalbarczyk -
Category
Documents
-
view
219 -
download
4
description
AngularJS
Transcript of AngularJS - Mobile Warsaw 20/10/2014
Dariusz Kalbarczyk Experienced programmer currently working in IT
Develops Angular based projects for large enterprises in Poland
Editor in chief of PIMM (wwwissuucomindependent-music-magazine)
Arkadiusz Kalbarczyk Young student with a fresh view on IT
studying computer engineering at the
Polish Japanese Institute of Information Technology
Engaged in projects regarding AngularJS technology
What is AngularJS
Where to start
The first application
$scope = bridge
Directives
Communication with server
Most Popular Mobile Web APP Frameworks
IONIC
Mobile Angular UI
Why would you bother learning AngularJS afterall
Open source JavaScript based library
Brief history
Greatest advantages
Society
httpsangularjsorg
httpswwwyoutubecomuserangularjs
httpng-polandpl
Indexhtml
lthtml ng-app=appgt
ltheadgt
lttitlegtFirst AngularJS applttitlegt
ltheadgt
ltbody ng-controller=firstCtrlgt
ltdivgtname 1-01+23-3ltdivgt
ltdivgtltinput data-ng-model= name gtltdivgt
ltscript src=angularjsgtltscriptgt
ltscript src=first-ctrljsgtltscriptgt
ltbodygt
lthtmlgt
first-ctrljs
var app = angularmodule(app [])
appcontroller(firstCtrl function ($scope)
$scopename = AngularJS
)
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
What is AngularJS
Where to start
The first application
$scope = bridge
Directives
Communication with server
Most Popular Mobile Web APP Frameworks
IONIC
Mobile Angular UI
Why would you bother learning AngularJS afterall
Open source JavaScript based library
Brief history
Greatest advantages
Society
httpsangularjsorg
httpswwwyoutubecomuserangularjs
httpng-polandpl
Indexhtml
lthtml ng-app=appgt
ltheadgt
lttitlegtFirst AngularJS applttitlegt
ltheadgt
ltbody ng-controller=firstCtrlgt
ltdivgtname 1-01+23-3ltdivgt
ltdivgtltinput data-ng-model= name gtltdivgt
ltscript src=angularjsgtltscriptgt
ltscript src=first-ctrljsgtltscriptgt
ltbodygt
lthtmlgt
first-ctrljs
var app = angularmodule(app [])
appcontroller(firstCtrl function ($scope)
$scopename = AngularJS
)
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Open source JavaScript based library
Brief history
Greatest advantages
Society
httpsangularjsorg
httpswwwyoutubecomuserangularjs
httpng-polandpl
Indexhtml
lthtml ng-app=appgt
ltheadgt
lttitlegtFirst AngularJS applttitlegt
ltheadgt
ltbody ng-controller=firstCtrlgt
ltdivgtname 1-01+23-3ltdivgt
ltdivgtltinput data-ng-model= name gtltdivgt
ltscript src=angularjsgtltscriptgt
ltscript src=first-ctrljsgtltscriptgt
ltbodygt
lthtmlgt
first-ctrljs
var app = angularmodule(app [])
appcontroller(firstCtrl function ($scope)
$scopename = AngularJS
)
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
httpsangularjsorg
httpswwwyoutubecomuserangularjs
httpng-polandpl
Indexhtml
lthtml ng-app=appgt
ltheadgt
lttitlegtFirst AngularJS applttitlegt
ltheadgt
ltbody ng-controller=firstCtrlgt
ltdivgtname 1-01+23-3ltdivgt
ltdivgtltinput data-ng-model= name gtltdivgt
ltscript src=angularjsgtltscriptgt
ltscript src=first-ctrljsgtltscriptgt
ltbodygt
lthtmlgt
first-ctrljs
var app = angularmodule(app [])
appcontroller(firstCtrl function ($scope)
$scopename = AngularJS
)
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Indexhtml
lthtml ng-app=appgt
ltheadgt
lttitlegtFirst AngularJS applttitlegt
ltheadgt
ltbody ng-controller=firstCtrlgt
ltdivgtname 1-01+23-3ltdivgt
ltdivgtltinput data-ng-model= name gtltdivgt
ltscript src=angularjsgtltscriptgt
ltscript src=first-ctrljsgtltscriptgt
ltbodygt
lthtmlgt
first-ctrljs
var app = angularmodule(app [])
appcontroller(firstCtrl function ($scope)
$scopename = AngularJS
)
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Why do we really need $scope
Importance of Inheritance
$scope in slightly greater detail
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
function FurnitureStore($scope)
$scopeoffers = [
name lsquochairrsquo price 14999
name lsquotablersquo price 18999
name lsquodrawerrsquo price 20599
]
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
What the fudge is a directive
Are the any important
Methods of implementation
Priorities
Build-in directives
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltnew-directivegtlt new-directive gt
ltspan new-directive =expressiongtltspangt
lt-- directive new-directive expression --gt
ltspan class= new-directive expressiongtltspangt
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltdoctype htmlgt
lthtml ng-app=appgt ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
ltscriptgt
ltbodygt
lthtmlgt
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltdoctype htmlgt
lthtmlgt
ltbodygt
ltdiv ng-controller=ExampleControllergt
test
ltdivgt
ltscript type=textjavascript
src=httpsajaxgoogleapiscomajaxlibsangularjs1220angularjsgtltscriptgt
ltscriptgt
var app = angularmodule(app [])
appcontroller(ExampleController function ($scope)
$scopetest = 123
)
angularbootstrap(document [app]) ltscriptgt
ltbodygt
lthtmlgt
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Module (lthtml ng-app=rdquomoduleNamerdquogt)
Config Filter Directive Factory Controller
Routes
Service
Provider
Value
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
a
form
input
input[checkbox]
input[dateTimeLocal]
input[date]
input[email]
input[month]
input[number]
input[radio]
input[text]
input[time]
input[url]
input[week]
ngApp ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ngClassEven
ngClassOdd
ngClick
ngCloak
ngController ngCopy
ngCsp
ngCut
ngDblclick
ngDisabled
ngFocus
ngForm
ngHide
ngHref
ngIf
ngInclude
ngInit
ngKeydown
ngKeypress
ngKeyup
ngList
ngModel ngModelOptions
ngMousedown
ngMouseenter
ngMouseleave
ngMousemove
ngMouseover
ngMouseup
ngNonBindable
ngOpen
ngPaste
ngPluralize
ngReadonly
ngRepeat ngSelected
ngShow
ngSrc
ngSrcset
ngStyle
ngSubmit
ngSwitch
ngTransclude
ngValue
script
select
textarea
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltdiv data-ng-controller=mainCtrlgt
lt-- main --gt
ltdiv data-ng-controller=childOneCtrlgtlt-- one --gtltdivgt
ltdiv data-ng-controller=childTwoCtrlgt
lt-- two --gt
ltdiv data-ng-controller=nextCtrlgtlt-- next --gtltdivgt
ltdivgt
ltdivgt
The ngController directive attaches a controller class to the view This is a key
aspect of how angular supports principles behind the Model-View-Controller
design pattern
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltinput type=text ng-model=yourName gt
lth1gtHello yourNamelth1gt
The ngModel directive binds an inputselect textarea (or custom form
control) to a property on the scope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
ltinput type=text data-ng-model=search style=width 80px gt
ltulgt
ltli data-ng-repeat=mountain in mountainsList | filter searchgt
mountain
ltligt
ltulgt
The ngRepeat directive creates an instance of a template once per item from a
collection Each template instance gets its own scope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
$http
No callback hell thanks to promises
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
var http = new XMLHttpRequest()
var params = bdquoname=Janampsurname=Kowalskirsquo
httpopen(bdquoGETrdquo lsquodatajsonrsquo true)
httponreadystatechange = function()
if(httpreadystate == 4 ampamp httpstatus == 200)
var response = httpresponseText
else if (httpstatus = 400)
error handling
httpsend(params)
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
POST $httppost(url data config)
PUT $httpput(url data config)
DELETE $httpdelete(url config)
HEAD $httphead(url config)
JSONP $httpjsonp(url)
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Sencha Touch
jQuery Mobile + Backbone
Kendo UI
Angular JS + Ionic
React
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Mobile Angular UI is a mobile UI framework
just like Sencha Touch or jQuery Mobile If
you know Angular JS and Twitter Bootstrap
you already know it [ httpmobileangularuicom ]
Angular JS Everywhere
No jQuery dependencies no fat bootstrap
js Just a few angularjs directives super
easy to learn to put things together
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Build HTML5 Mobile Apps with Bootstrap and Angular JS
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
Easy to learn
Supports MV
Rapidly growing community
Googlersquos child
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
dkalbarczykorangepl akalbarczykhotmailcom
ng-polandpl
wwwfacebookcomAngularJSANewHope
![[AngularJS] From Angular to Mobile in 30 minutes](https://static.fdocuments.in/doc/165x107/547e8a0c5806b5c75e8b46c5/angularjs-from-angular-to-mobile-in-30-minutes.jpg)
