Building SPAs with AngularJS
Download as PPTX, PDF3 likes561 views
The document discusses the evolution of front-end development, specifically focusing on Single Page Applications (SPAs) and AngularJS as a primary framework. It covers the structure, tools, features, and components of SPAs, including the transition to AngularJS 2.0. Key points include the importance of dependencies, task management, and the overall organizational framework of developing SPAs.
![Single Page Applications
“Single Page Applications (SPA) are built on
expanding reach via the browser, reducing
round tripping, and enhancing User Experience
(UX) [...] you can build a SPA that supports
robust business applications. Angular,
Durandal, and Ember are three great SPA
presentation frameworks that lead the way in
this area.”
John Papa, Google Dev.
Expert, Microsoft MVPJohn Papa](https://image.slidesharecdn.com/ym2xhyn8r92lzpkhc2h6-signature-44b6360f130c1d672b871a0275bf5ab9a974b9421af0624b1b97dd811043d2a3-poli-150628223137-lva1-app6891/85/Building-SPAs-with-AngularJS-3-320.jpg)
Building SPAs with AngularJS
- 1. Building SPAs with AngularJS Cezar Carneiro
- 2. Front-End Development Before: ● Very few tools and technologies; ● Limited ability with JavaScript, HTML and CSS; ● Low expectation from JavaScript; ● We used to hate of Internet Explorer; Now: ● We still hate Internet Explorer; ● Use of JavaScript as main language; ● Infinity of tools and technologies;
- 3. Single Page Applications “Single Page Applications (SPA) are built on expanding reach via the browser, reducing round tripping, and enhancing User Experience (UX) [...] you can build a SPA that supports robust business applications. Angular, Durandal, and Ember are three great SPA presentation frameworks that lead the way in this area.” John Papa, Google Dev. Expert, Microsoft MVPJohn Papa
- 4. Single Page Applications - Tiers Server API HTTP View Rendering Persistency Models Routes Events Handling I18n Front-End Back-End ● MV-whatever structure on the client. ● Interactions are treated on the page. ● Most of the time the server only serves the static resources of the application. ● The SPA usually relies on a HTTP API. ● In some cases the server might pre- render a view for SEO purposes. ● The API may be hosted on the same server of the application.
- 5. Single Page Applications - Layers How MVC works in a SPA
- 6. Front End Tools ● Organize Dependencies Package Managers: NPM, Bower; ● Run Tasks Task Runners: Gulp.js, Grunt.js; ● Develop Frameworks: AngularJS, Backbone, React, Bootstrap, Foundation, Font-Awesome; ● Debug Sourcemaps + Browser, Batarang; ● Deploy Heroku, AWS, DigitalOcean;
- 7. ➔ Started in 2009; ➔ By Miško Hevery and Adam Abrons, (Brat Tech LLC); ➔ Sponsored by Google; ➔ Open to the community; ➔ Version 1.3.15 (till the date of this presentation); ➔ Very attractive to back-enders;
- 8. Proposal ● Web applications properly structured; ● Complete solution, free of dependencies; ● High level of abstraction; ● Declarative approach;
- 9. Out There 28/may/2015 07/aug/2014 Google searches: Contributors:
- 10. ➔Dependency Injection ➔Data Binding ➔Form Validation ➔{{ Expressions }} ➔Bootstrapping ➔Routing ➔i18n and l10n AngularJS - Features Two-way data-binding
- 11. ➔Unnecessary complexity; ➔Dirty Checking; ➔Full DOM parsing; ➔The Angular Way; AngularJS - Cons
- 13. AngularJS 2.0 ➔No retrocompatibility; ➔Many concepts were dropped; ➔New concepts come to existence; ➔Substantial performance improvement;
- 14. Demo Yoda Sentence Converter Input: Active voice sentence; Output: Same sentence on the passive voice;
- 15. index.html ➔ Instantiation the main module of the app; ➔ Loads static resources; ➔ Is only the framing;
- 16. Module ➔ Declaration of the module ‘yoda-converter’ (main module); ➔ Requiring the module ‘ngRoute’; ➔ Declaring the routes of the application;
- 17. View ➔ Instantiates the controller (line 1); ➔ Binding of the model (lines 5, 10 and 12); ➔ Click Event (line 6); ➔ Use of expressions (lines 10 and 12);
- 18. Controller ➔ Initialization of the model ‘sentence’ (line 5); ➔ Declaration of the click listener (line 10); ➔ Call to the service (line 11); ➔ Updates the model ‘sentence’ (line 13);
- 19. Service ➔ Declaration of the function ‘converting’ (line 4); ➔ Return of a $http promise (line 5); ➔ Cases of success and error of the promise (lines 15 and 17);