A RESTFul Day at the SPA with Taffy & Angular
By Abram Adams
@Abram_Adams
aadams@cfxchange.com
Overview
- Learn what a SPA is
- Explore what a RESTFul API is
- Look at some of the building blocks Angular provides
- Controllers
- Services
- Routing
- Etc...
- Identify some "Best Practices"
- Build a SPA from the ground up using Angular 1.3
- Build a RESTFul API using CFML via Taffy framework
What is a SPA?
"...is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application" - Wikipedia
This is in contrast to traditional web apps that rely on the Request/Response paradigm in which every page is requested from the server.
What is a RESTFul API?
“REST, or REpresentational State Transfer, is a method for computer programs to talk to each other over networks.” -- Adam Tuttle, REST Web APIs: The Book
“It is a set of generalized conventions that make it easier for API-client developers to understand how to manage data over network protocols —like HTTP— with very little additional context and documentation” -- Adam Tuttle, REST Web APIs: The Book
Perception of SPAs
Reality
Moral of the story: Use a Framework!
My Favorite SPA Stack
-
Front End:
-
Angular
-
-
Back End:
-
CFML/Taffy
-
+
DEMO 1
Bootstrapping your Angular App
Recap So Far
- Bootstrapped a simple Angular App
- How to initialize Angular and your "app"
- Showed simple bindings using ng-model
<html ng-app="app">
....
angular.module( 'app', [] );
....
Hello {{name}}!<br/>
<input ng-model="name">
DEMO 2
Angular Controllers
Structuring Your Project
By Feature
By Type
Recap So Far
- Bootstrapped a simple Angular App
- Added a Controller (and a functional list app)
- Looked at the signature of a controller
- Dependency Injection
- controllerAs syntax and concept of exposing variables to your model using a "View Model" scope vs $scope.
- Adding your scripts to the index.html file
Good "starting point" Guide
- https://github.com/johnpapa/angular-styleguide
DEMO 3
Angular Router (UI Router)
Recap So Far
- Bootstrapped a simple Angular App
- Added a Controller
- Added a Router
- Added a couple "states" for our app
- Described Angular's "config" method
- Added navigation to switch between states
DEMO 4
Angular Services/Factories
Recap So Far
- Bootstrapped a simple Angular App
- Added a Controller
- Added a Router
- Added a Service factory to grab data
- Refactored our Controllers to use these new services.
Demo 5
The "Precious Collectibles" Store
Summary
- Bootstrapping Angular App
- Data binding using ng-model
- Remember to load your js scripts in index.html!
- Controllers
- Use controllerAs syntax
- Keep API at the top, implementation below
- "expose" data to your view via View Model (vm)
- Routes via UI Router
- States == Pages
- Wire up controllers
- Nested states ( checkout.address, etc...)
- Services Factories and Constants
- Use Services to abstract interfacing with back-end data/services.
- Cosntants for site-wide config
Break time!
~15 minutes
Up Next... Server Side API via CFML+Taffy
Review
- Bootstrapping Angular App
- Data binding using ng-model
- Remember to load your js scripts in index.html!
- Controllers
- Use controllerAs syntax
- Keep API at the top, implementation below
- "expose" data to your view via View Model (vm)
- Routes via UI Router
- States == Pages
- Wire up controllers
- Nested states ( checkout.address, etc...)
- Services Factories and Constants
- Use Services to abstract interfacing with back-end data/services.
- Cosntants for site-wide config
Server Side RESTFul API
via CFML+Taffy
CFML REST Framework
- Easy to setup
- Very low learning curve
- Fantastic "dashboard" for developing and testing endpoints
- Actually has documentation!
Framework site: http://taffy.io
documentation site: http://docs.taffy.io
Components of Our API
- Taffy Framework
- Application.cfc
- Endpoint/Resources
Demo 6
Taffy Dashboard
Wait, that's it?
yup
Q & A
Resources
Angular: https://angularjs.org/
Angular Best Practices: https://github.com/johnpapa/angular-styleguide
Lucee: http://lucee.org/
Taffy: http://taffy.io
Adam Tuttle’s REST Web APIs; The Book: https://gumroad.com/l/rest-the-book
(Discount code "devobj15" for $4 off)
@Abram_Adams
aadams@cfxchange.com
THIS APP AND ALL DEMO CODE:
deck
By Abram Adams
deck
- 1,168