CF Objective Notes - Developing Single Page Apps (SPA) with ColdFusion and Angular

May 16, 2014

Developing Single Page Apps (SPA) with ColdFusion and Angular
Mike Collins

Agenda
quick understanding of angularJS
walkthru key features and main components of an angular JS app
learn about CF RESTful svcs w/ angular
walk thru a DEMO app

Adapts and extends HTML
key features
-2 day data binding
synchronizes model data and views
filters for client side data
http / ajax call features

follows MVC
loose coupling between presentation, data, and logic components.

A complete client side java script solution
managed by a dev team at Google

it's a "complete framework"
data binding, mvc, routing, history, templates, etc.

popularity in AngularJS is going up, near top of "popular JS frameworks" lists

browser support
all the major browsers
1.3 (beta) will be dropping IE8 support

angularjs.org – download either stable or bleeding age versions from here
optionan add-on modules
angular-animage – enable animation support
angular-route – routing and deep linking services and directives
etc

works well with others – jquery, bootstrap, CF, html5, phonegap, etc.

key features--
#1 thing. As you make your 1st request, there is a compilation step, reads your scripts, looks at binding, creates event listeners, etc.

2-day data binding
filters
ngRoute – ngView
NG-repeat directives
$http service
$http interceptor feature
Form Processing
built in form CSS classes
ng-show directive

simple app

that's a "hello world" Angular app

controllers --

View page brought in under this controller – home.cfm
Angular Filters
(for bringing down arrays of data from a cfquery as JSON, etc)

first define the filter for a data listing

ngRoute Module –
write a config to tell angular when we go to a link, what we want to happen


etc

when I want to pass this to the server all I need to pass is "player", angular will serialize that to JSON and pass the whole thing up to the server

angular forms--
built in css classes
-ng-valid, ng-invalid, ng-pristine, ng dirty

built in validations
-url, email, max, maxlength, min, minlength, number, pattern, required

input properties
-$valid, $invalid, $pristine, $dirty
-$error{} - contains filed data for all invalid fields

etc

Angular form code--

$http service
can encapsulate this into factories, services, etc
$http caching
$http interceptors
$http headers
great for security
$http security
built in json vulnerability protection
built in XSRF protection

$http post to CF RESTful API

Angular and CF working together--
what can CF do to make the client side better?
ColdFusion RESTful API
makes it easy to integrate into any client side JS frameworks
easy to create an API

seed applications with initial loading of data
provide yoru dynamic view pages
backend integration to JDBC, LDAP, web services, email. PDF, JSON, etc
improve security w/ encrypted request tokens
code generation of angularjs apps
example forms

Coldfusion restful features
RESTful CFC API
RESTful Function signatures
registering and refreshing CFCs
serializing JSON and consuming JSON in your CFCs

creating a RESTful coomponent

there's a lot built into how cffunction and cfargument work together to make building the API seamless.

REST components
it is it's ow servlet
comes in a different way than a normal CFC
application.cfc
onRequestStart will see the request
onRequest will NOT
OnError is nOT called (bug)
OnCFCRequest will NOT see the request
it has a different "request path" than a regular http request
only visible in onRequestStart

need to "register" your REST components in either CF admin or via the Admin API
or in App.cfc
this.restsettings.cfclocation="./, /rest, /foo";
this.restsettings.skipcfcwitherror = true;
...have to "refresh" the rest files if you change them (via CF admin)

RESTful CFC post Example
ColdFusion 11 JSON improvements
to basically deal w/ the JS frameworks like angular
data type preservation
case preservation
added "struct" as new Query Format
custom serializer
(select *) returns all uppercase keys. So keep that in mind if using select *

directives--
think of them like custom tags with stuff between the "open and close tags"
can wrap anything you like and anyone can use that "tag"

working w/ client side data
angular likes to keep data on the client
concurrency becomes an issue if people are all pushing data back and forth and if someone's client has dirty/old data
services to help
-firebase, GoInstant
Sockets
-socket.io, HTML5 web sockets

building in security
custom request tokens
angular $http interceptors

team development processing
another benefit
once you an api
front end can code to the api while back-end fills in the details
parallel development

ngMock
-simulates a back end, to mock back-end communication