These are the slides I used on a small presentation that I gave at the company I work for. It contains the definition and information about Single Page Applications, information and details about AngularJS and a small demonstration. You may find the source code for the demo app here: https://github.com/cezar-carneiro/yoda-converter The slides have GIFs, but GIFs don't seem to work on slideshare.

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

12. AngularJS - Components
➔Modules;
➔Controllers;
➔Services;
➔Filters;
➔Directives;
➔Views;
➔Partials;
➔etc

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);

20. Thanks for watching
github.com/cezar-carneiro
cezargcarneiro@gmail.com