![Page 1: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/1.jpg)
Mobile-First with AngularJS
![Page 2: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/2.jpg)
CLASS OF 2001 CLASS OF 2006
![Page 3: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/3.jpg)
programmer | ˈprəәʊgraməә | noun !
a person that turns caffeine (and pizza) into computer programs.
![Page 4: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/4.jpg)
I am architect
![Page 5: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/5.jpg)
But not that kind of an architect...
Picture property of Warner Bros.
![Page 6: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/6.jpg)
“… guide, as in mountaineering. A guide is a more experienced and skilful team member who teaches other team members to better fend for themselves yet is always there for the really tricky stuff.”
-- Martin Fowler, Who needs an Architect?
http://martinfowler.com/ieeeSoftware/whoNeedsArchitect.pdf
![Page 7: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/7.jpg)
![Page 8: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/8.jpg)
PARENT
Sofia Zoo, 2013
![Page 9: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/9.jpg)
![Page 10: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/10.jpg)
Startup = Growth => We’re looking for growth hacks
![Page 11: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/11.jpg)
growth hacking !
looking for low-cost and innovative alternatives to traditional approaches
![Page 12: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/12.jpg)
![Page 13: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/13.jpg)
![Page 14: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/14.jpg)
![Page 15: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/15.jpg)
![Page 16: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/16.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters!
!
!
Development Problems (& how the tooling works)!
Mobile-First Headaches
![Page 17: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/17.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters!
!
!
Development Problems (& how the tooling works)!
Mobile-First Headaches
![Page 18: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/18.jpg)
MVC, MVCS, MVWhatever
M V
C
this is what we’re familiar with — let’s
complicate it a bit
M V
C
S
in a perfect world there would be only 4 dots with arrows between them...
![Page 19: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/19.jpg)
M V
C
MM
VV
C C
SS S
in situations like that you need to take care of dependency
management
Problem 1: Dependencies
![Page 20: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/20.jpg)
Problem 2: Event Handling
M V
C
What kind of events?
Who dispatches these events?
How to subscribe to the events of interest?
How such events reach the model, controller or whatever?
![Page 21: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/21.jpg)
Problem 3: Presentation Patterns
M V
C
What logic is allowed to be put in the HTMLs?
How does the model get adapted for the needs of the View?
How to mediate the cooperation between several components?
How about the View Display logic and DOM manipulation?
V.D.
V.L.
M.P.
Med.
![Page 22: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/22.jpg)
The Angular approach$scope
M V
W
$scopeM V
W
$scopeM V
W
$scopeM V
W
$scopeM V
W
D.I.Hierarchy of scopes tied to HTML DOM
Dependencies Injector is a registry for all Angular components
Events travel through the hierarchy of $scope — emit & broadcast
Presentation Model & Passive View as presentation patterns
![Page 23: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/23.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters!
!
Development Problems (& how the tooling works)!
Mobile-First Headaches
"
![Page 24: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/24.jpg)
yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.
Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
![Page 25: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/25.jpg)
![Page 26: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/26.jpg)
![Page 27: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/27.jpg)
![Page 28: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/28.jpg)
![Page 29: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/29.jpg)
![Page 30: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/30.jpg)
![Page 31: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/31.jpg)
Don’t forget to check out the code: !
https://github.com/npacemo/beit-first-try !
So far we’re at this commit: !
https://github.com/npacemo/beit-first-try/commit/eb9237
![Page 32: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/32.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters!
!
Development Problems (& how the tooling works)
Mobile-First Headaches
"
"
![Page 33: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/33.jpg)
![Page 34: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/34.jpg)
![Page 35: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/35.jpg)
![Page 36: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/36.jpg)
![Page 37: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/37.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters!
Development Problems (& how the tooling works)
Mobile-First Headaches
"
"
"
![Page 38: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/38.jpg)
![Page 39: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/39.jpg)
![Page 40: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/40.jpg)
![Page 41: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/41.jpg)
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & FiltersDevelopment Problems (& how the tooling works)
Mobile-First Headaches
"
"
"
! More Headaches…"
![Page 42: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/42.jpg)
![Page 43: Mobile First with Angular.JS - Владимир Цветков, Obecto](https://reader034.vdocuments.us/reader034/viewer/2022052602/55a15fa81a28ab4f6a8b47bb/html5/thumbnails/43.jpg)
Please, send your Questions on my
daddy’s email ([email protected]) or else he’ll be late for
my party!