AngularJS is a JavaScript framework that extends HTML and allows developers to create dynamic web applications. It features two-way data binding, services for making HTTP requests, and directives for common tasks like iteration and conditional display. The presentation discusses how to build AngularJS applications using core features like controllers, filters, forms, and routing. It also explains how to integrate AngularJS and ColdFusion by building RESTful APIs with CF components, handling data loading, and improving security. The demo application illustrates techniques for building forms, working with JSON data, and testing AngularJS applications.

1. ColdFusion and AngularJS
Applications
Mike Collins
SupportObjective
cfObjective
May 2014

2. Agenda
Quick Understanding about AngularJS
Walk thru key features and main components of an
AngularJS Application
Learn about using ColdFusion RESTful Services with
Angular
Walk thru a demo application

3. Learning about Angular

4. 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

5. AngularJS Application Framework

6. AngularJS Popularity
Project contributors per month

7. 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

8. Getting AngularJS
http://angularjs.org

9. 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

10. Works well with Others

11. Many Server-side Integration Points
Angular Clients
http
resource
websockets
services
factories
restful
Cloud Services

12. Getting Started Resources
• Dan Wahlin – AngularJS in 60ish Minutes
– https://www.youtube.com/watch?v=i9MHigUZKEM
• All the ng-conf sessions
– https://www.youtube.com/results?search_query=ng-conf
• AngularJS FAQ
– https://docs.angularjs.org/misc/faq

13. Building AngularJS Applications

14. AngularJS Application
• Request Startup Backend Providers
HTTP / JSON
WebSockets
Datastore

15. AngularJS Core Features
2 way Data Binding
Filters
ngRoute - ngView
Ng-repeat Directive
$http service
$http interceptor feature
Form Processing
Built in Form CSS Classes
Ng-show directive

16. Simple Angular App with Binding
<script type="text/javascript" src="/js/angular.min.js"></script>
<h1>Simple Data Binding with AngularJS</h1>
<div ng-app>
Name: <input type="text" ng-model="name" />
Welcome to AngularJS {{name}}
</div>
http://cfangular.com/simple/databinding.cfm

17. Creating AngularJS Controllers
Create the controller called mainController
playerApp.controller('mainController', function($scope) {
$scope.message = 'I am the home page!';
});
View Page brought in under this controller - Home.cfm
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
http://cfangular.com/playerapp/

18. AngularJS Filters
<tr class="playerRow" ng-repeat="p in playerList | filter:search |
orderBy:'playerfirstname' " ng-click="getPlayer(p.id)">
<td>{{p.playerfirstname | uppercase}} {{p.playerlastname}}</td>
<td>{{p.playerleague}}</td> <td>{{p.currentteam}}</td>
</tr>
Second assign the filter to some user input
Search: <input ng-model="search.$">
<select data-ng-model="search.currentteam">
<option ng-repeat="t in teams“ value="{{t.name}}">{{t.name}}</option>
</select>
First define the filter for a data listing

19. ngRoute Module

20. ngModel Sample
$scope.search = '';
$scope.player = {};
$scope.player['securitytoken'] = '' ;
$scope.player['playerfirstname'] = 'Mike';
$scope.player['playerlastname'] = 'Smith';
$scope.player['playerdob'] = '10/10/2001';
$scope.player['playergender'] = 'Boy';
$scope.player['playerleague'] = '';
$scope.player['playershirtsize'] = 'YM';
$scope.player['playernameonjersey'] = '';
$scope.player['playernumberrequest'] = '';
$scope.player['playerpantsize'] = '';
$scope.player['playerrequests'] = '';
$scope.player['playerlastteam'] = '';
$scope.player['playercurrentteam'] = '';

21. AngularJS 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 field data for all invalid fields
– ngmessages – new in 1.3
https://docs.angularjs.org/api/ngMessages
• Methods
– $setValidity(), $setPristine(), $setDirty(),$addControl(),
$removeControl()

22. Angular Form Code
<input class="cfang-input" name="parent1email" type="email"
ng-model="player.parent1email" placeholder="Parent1 Email"
value="{{player.parent1email}}" ng-required='1==1'>
Form Validation

23. Using $http service
• $http Caching
• $http Interceptors
• $http Headers
• $http Security
– Built in JSON vulnerability protection
– Built in XSRF protection

24. $http post to ColdFusion RESTful API

25. AngularJS and ColdFusion
Working Together

26. CF client side features
• ColdFusion Restful API
• Seed applications with initial loading of
data
• Provide your Dynamic View pages
• Backend Integration to JDBC, LDAP, Web
Services, Email, PDF Services, JSON
• Improve Security with encrypted
request tokens
• Code generation of AngularJs apps
– Example forms

27. ColdFusion RESTful Features
• RESTful CFC API
• RESTful Function Signatures
• Registering & Refreshing CFCs
• Serializing JSON & consuming JSON
in your CFCs

28. Creating a RESTful Component
<cfcomponent rest="true" restpath="playerService">
<cffunction name="getPlayer" access="remote“
httpmethod="GET“ restpath="getPlayer/{playerID}" returntype="any"
produces="application/json">
<cfargument
name="playerID“
required="true"
restargsource="Path"
type="numeric"/ >
First – Define your CFC as REST and give it a name
Second– Define your functions defining its function
signature and arguments

29. Using RestArgPath
• CFFunction aguments can be retrieved from
multiple places
• Path, Query String, Form, Cookie, Header

30. REST Components
• Application.cfc
– OnRequestStart will see request
– OnRequest will not see request
– OnError is not called (bug entered)
– OnCFCRequest will not see request

31. REST Component Registration
• Need to register your REST CFCs
• CFAdmin, CFAdmin API
• Using 2 new settings in Application.cfc
– <cfset this.restsettings.cfclocation = “./, ./rest">
– <cfset this.restsettings.skipcfcwitherror = true>

32. RESTful CFC Post Example

33. New REST Servlet in web.xml

34. ColdFusion 11 JSON Improvements
• JSON improvements
– Data type preservation for Query and CFC
– Case preservation of struct keys
– Added "Struct" as new QueryFormat
– Custom serializer
http://blogs.coldfusion.com/post.cfm/language-enhancements-in-coldfusion-splendor-improved-json-serialization-2

35. Demo Techniques
• Angular App Design
• Forms Model Binding
• Form Validation
• Form CSS classes
• AngularJS Filters
• Using JSON
• Authentication
• CF Restful API
• Error Handling
• Services
• Factories
• $http
• $resource
• Interceptors

36. Working with client-side data
• AngularJS makes it easy to work with large
amounts of data on the client
• Concurrency may become an issue

37. Real Time Features
• Services are out there
– Firebase, GoInstant
• Sockets
– Socket.io, HTML5 web sockets
• Would love to see cfwebsocket integration

38. Building in Security
• Custom request tokens
• AngularJS $http interceptors
• Check out some other sessions dealing with
security
– ZAP Application to test your RESTful api
– SecureAPIs
– Using Custom Security Headers

39. Team Development Process
• Client-side and Server-Side
• Teams agree on a API
• Parallel independent development
– Front end can develop using Angular’s ngMock
– Back end can develop using cfhttp to test restful
APIs

40. Testing and Tools
• Using Google Chrome Batarang
– View data in controller scopes
– View performance metrics
• ngMock
– AngulerJS module to mock backend
communication
• CFHTTP
– Create scripts to test restful all function signatures
inside each service

41. Q&A
Mike Collins
SupportObjective
cfObjective
May 2014