This document provides an introduction and overview of single page applications (SPAs) using AngularJS as an example framework. It discusses what SPAs are and why they are used, including how they allow a more native-like user experience. It then walks through setting up a sample SPA project for managing todo lists and categories using AngularJS, including creating routes, controllers, services and templates to support basic CRUD operations. The goal is to help understand the key concepts and setup needed to build a basic SPA.
9. So, what is SPA?
Singlepageappbook.com
"Single page apps are distinguished by their
ability to redraw any part of the UI without
requiring a server roundtrip to retrieve HTML.
This is achieved by separating the data from
the presentation of data by having a model
layer that handles data and a view layer that
reads from the models."
10. Why do we need SPA?
Singlepageappbook.com
"The main reason is that they allow us to offer a
more-native-app-like experience to the user."
12. So, IMHO...
If GMAIL (web version) is not a SPA, will it
really matter?
If you wait 2 seconds longer, will it really
matter?
13. So, IMHO...
It's harder than the usual web apps
It's duplicating validation step, but I guess it's
quite normal nowdays
14. So, IMHO...
Unless you have a damn good reason to build it
as SPA, maybe, just maybe......deep down
inside, you are a masochist developer
OR
We just love to challenge ourselves!
15. What does SPA look like?
Notice the URLs!
https://mail.google.com/mail/u/0/#inbox
https://mail.google.com/mail/u/0/#drafts
https://mail.google.
com/mail/u/0/#inbox/13f93d5835e1d04a
...
16. OK, so where should I start?
AngularJS Home Page
http://angularjs.org
17. That sounds nice!
And here comes the famous Hello World
example!
Followed by simple TODO app!
And suddenly they talk about modules,
directive, dependency injection, service,
factory....
19. Rule of thumb
Don't be like,
"A solution tries to find a problem"
Be like,
"A problem tries to find a solution"
20. So what is the problem (goal)?
I want to create a SPA where:
1. I can manage my todo list
2. I can manage category of my todo list
3. Normally, I only need to see the dashboard
page where all my todo list is group by category
and I can check/uncheck the list items
21. OK, let's set up the project
You can manually setup your project folder
OR
You can use available project templates out
there:
- angular-seed
- ng-boilerplate