Mobile First with Angular.JS - Владимир Цветков, Obecto
1 like627 views
The document provides an overview of an architecture crash course on AngularJS that discusses client-side problems and how Angular addresses them using scopes and dependency injection, describes directives, data binding and filters in Angular, examines development problems and tooling solutions like Grunt and Bower, and covers mobile-first headaches. The agenda includes topics on client problems and Angular solutions, directives, data binding and filters, development tools, and mobile development challenges. Code examples and a GitHub commit link are provided to demonstrate concepts from the crash course.
More Related Content
What's hot (6)
Similar to Mobile First with Angular.JS - Владимир Цветков, Obecto (20)
More from beITconference (7)
Recently uploaded (20)
Mobile First with Angular.JS - Владимир Цветков, Obecto
- 2. CLASS OF 2001 CLASS OF 2006
- 3. programmer | ˈprəәʊgraməә | noun ! a person that turns caffeine (and pizza) into computer programs.
- 5. But not that kind of an architect... Picture property of Warner Bros.
- 6. “… 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
- 10. Startup = Growth => We’re looking for growth hacks
- 11. growth hacking ! looking for low-cost and innovative alternatives to traditional approaches
- 16. 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
- 17. 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
- 18. 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...
- 19. M V C M M V V C C S S S in situations like that you need to take care of dependency management Problem 1: Dependencies
- 20. 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?
- 21. 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.
- 22. The Angular approach $scope M V W $scope M V W $scope M V W $scope M V W $scope M 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
- 23. 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
- 24. 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.
- 31. 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
- 32. 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
- 37. 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
- 41. 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 More Headaches…
- 43. Please, send your Questions on my daddy’s email (vtsvetkov@obecto.com) or else he’ll be late for my party!