Tag Archives: Cold Fusion

Building ColdFusion And AngularJS Applications


Building ColdFusion And AngularJS Applications

  • 1. Building ColdFusion and AngularJS Applications Mike Collins SupportObjective CFSummit October 2014
  • 2. Today’s Agenda Walkthrough Requirements for a CF AngularJS Application Build our ColdFusion REST Server side  Building the API  Testing the API Build AngularJS the Client side Intro to AngularJS Core AngularJS features Build and Demo AngularJS using CF REST Wrap up
  • 3. Our Project Requirements Player Registration Application – New Player Registration – Player Manager – ColdFusion 11 Server Side – AngularJS 1.3 Client Side – Use SQL DB to store data – Use REST API with JSON
  • 4. Client-side and Server-side FRONTEND BACKEND Angular Clients JSON JSON REST API to receive Use $http service to and deliver JSON call backend REST API
  • 5. Team Development Approach • The Client-side team and Server-Side team met and decided on an API • Parallel independent development • The Client side will use AngularJS ngMock to mock server-side communication until server side is ready • Server-side can test the REST API using cfhttp or jMeter to test until the client side is ready
  • 6. Building the ColdFusion REST based Server Side
  • 7. ColdFusion Server Side Features • What does CF bring to the server side • ColdFusion RESTFUL Features • Provide your applications dynamic pages • Backend Integration to JDBC, LDAP, Web Services, Email, PDF Services, JSON • Improve Security with encrypted request tokens • Seed applications with initial loading of data • Dynamically build AngularJS apps with CF
  • 8. ColdFusion RESTful Features • New feature added in CF10 • Ability to create REST services by defining certain attributes in the tags – cfcomponent – cffuntion – cfargument • RESTful Function Signatures • Supports JSON and XML serialization/deserialization • Client applications can consume REST services by issuing HTTP/HTTPS requests format • Also – other CF REST options exist such as TAFFY
  • 9. Creating a CF REST Component 1. Define CFC as REST and define a restpath attribute <cfcomponent rest=”true” restpath=”playerService”> 2. Define REST function 3. Define REST <cffunction name=”getPlayer” access=”remote“ httpmethod=”GET“ restpath=”getPlayer/{playerID}” returntype=”any” produces=”application/json”> function arguments <cfargument name=”playerID“ required=”true” restargsource=”Path” type=”numeric”/ >
  • 10. Understanding RestArgPath • CFFunction aguments can be retrieved from multiple places • Path, Query String, Form, Cookie, Header <cfargument name=”playerID“ required=”true” restargsource=”Path” type=”numeric”/ >
  • 11. REST Component Registration • Need to register your REST CFCs in CFAdmin • Using 2 new settings in Application.cfc – <cfset this.restsettings.cfclocation = “./, ./rest”> – <cfset this.restsettings.skipcfcwitherror = true>
  • 12. Processing REST Requests • /Rest is a new servlet mapping in web.xml • How REST requests are processed with Application.cfc Method Processed OnRequestStart Yes OnRequest No OnError Yes OnCFCRequest No OnRequestEnd Yes
  • 13. CF RESTful HTTP Post Example AngularJS APP <cffunction name=”newPlayer” access=”remote” httpmethod=”POST” restpath=”newPlayer” returntype=”any” returnformat=”json”> <cfargument name=”playerData” required=”true” type=”string” /> <cfif not isJSON(arguments.playerData)> <cfreturn errorjson(“-1000″,”Request Error Code 1000 – Invalid JSON #arguments.playerData#”)> </cfif> <!— Deserialize JSON —> <cfset jsondata = deserializeJSON( arguments.playerData )> …
  • 15. Server-side Testing • CFHTTP scripts • jMeter Load Testing
  • 16. About AngularJS
  • 17. About AngularJS • Adapts and extends HTML • Some of the key features: – two-way data-binding – synchronizes model data and views – Filters for client side data – http ajax call features • Follows a MVC pattern – loose coupling between presentation, data, and logic components. • A complete client-side JavaScript solution • Managed by a developer team at Google Igor and Miska from Google
  • 18. AngularJS Application Framework
  • 19. AngularJS Popularity Project contributors per month
  • 20. AngularJS Reach • Browser support – Safari – Chrome – Firefox – Opera – IE8, IE9 – Mobile browsers Android, Chrome Mobile, iOS Safari • AngularJS 1.3 does not support IE 8
  • 22. Optional Add-on Modules • Loaded after the coreangular.js file: – angular-animate.js – Enable animation support – angular-cookies.js – A convenient wrapper for reading and writing browser cookies – angular-resource.js – Interaction support with RESTful services via the $resource service – angular-route.js – Routing and deep linking services and directives for angular apps – angular-sanitize.js – Functionality to sanitize HTML – angular-touch.js – Touch events and other helpers for touch-enabled devices – New angular-messages.js – helps with displaying informative error messages with forms