Download - AngularJs - Taming the Superhero
![Page 1: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/1.jpg)
TAMING THE SUPERHERO
Project: Truedash | Speaker: Miloš Bošković
/ Webcamp Ljubljana / March 2015
![Page 2: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/2.jpg)
› Simple & Collaborative Business Intelligence › Startup located in London – Shoreditch (but
also worldwide) › Started around December 2013 › Around 15 people involved in the project › Backend built on Java Apache Spark and
MongoDb› Frontend built on AngularJs 1.x
/ Webcamp Ljubljana / March 2015
![Page 3: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/3.jpg)
![Page 4: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/4.jpg)
![Page 5: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/5.jpg)
![Page 6: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/6.jpg)
/ Webcamp Ljubljana / March 2015
![Page 7: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/7.jpg)
/ Webcamp Ljubljana / March 2015
![Page 8: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/8.jpg)
/ Webcamp Ljubljana / March 2015
![Page 9: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/9.jpg)
WHAT WE’RE GONNA COVER
› Some of the AngularJs features › How these features are used in
Truedash › How these features are not used in
Truedash
/ Webcamp Ljubljana / March 2015
![Page 10: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/10.jpg)
› Superheroic JavaScript MVW Framework (hence the talk title)
› MVW -> Model-View-Whatever › Maintained by Google
/ Webcamp Ljubljana / March 2015
![Page 11: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/11.jpg)
BINDINGS
› One-way › Two-way › One-time
› Watcher (observer pattern)
Name
Nikola
Hello Nikola!
Result
Miško Hevery: Two-way data binding is an anti-pattern for large-scale web apps (link)
![Page 12: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/12.jpg)
DIRECTIVES
› Teaches HTML new tricks› Define new behaviour on HTML tag they’re put
on› Can be defined as HTML tags or attributes› Prefixed with ng (in our case tu)
![Page 13: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/13.jpg)
ng-if & ng-show
› Render/remove and Show/hide content
![Page 14: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/14.jpg)
![Page 15: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/15.jpg)
ng-repeat
› Use bind once (one-time binding) whenever possible
![Page 16: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/16.jpg)
INTERPOLATION VS ng-bind
› Interpolation is slower than ng-bind directive (link) › When it comes to large-scale apps, it does matter
![Page 17: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/17.jpg)
TRUEDASH DIRECTIVES
› Component-like approach › Make everything a directive › Promotes reusability and isolation › Should make switching to Angular 2.0 easier
![Page 18: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/18.jpg)
![Page 19: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/19.jpg)
HAVE PERFORMANCE IN MIND
› On destroy event for directives (and controllers)› Gulp
- Minify - Uglify (a little tricky with Angular)- Concatenation- Template caching
› Turn off debugger mode (link)
/ Webcamp Ljubljana / March 2015
![Page 20: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/20.jpg)
USEFUL LINKS
› https://angularjs.org/ › https://github.com/johnpapa/angular-styleguide › http://devchat.tv/adventures-in-angular/ (Angular podcasts) › https://angular.io/ (Angular 2.0)
/ Webcamp Ljubljana / March 2015
![Page 21: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/21.jpg)
ABOUT TRUEDASH AND OUR TEAM
› Wanna work with us? Email us at [email protected]
/ Webcamp Ljubljana / March 2015
Borislav Nikola You?
![Page 22: AngularJs - Taming the Superhero](https://reader036.vdocuments.mx/reader036/viewer/2022062515/55c4021fbb61eb60078b464b/html5/thumbnails/22.jpg)
THANK YOU
/ Webcamp Ljubljana / March 2015