Your SlideShare is downloading. ×
Single page apps_with_cf_and_angular[1]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Single page apps_with_cf_and_angular[1]

1,067
views

Published on

Published in: Software, Technology, Education

1 Comment
0 Likes
Statistics
Notes
  • Hers are the slides, sample app and my contact info. Thanks all for attending. https://drive.google.com/file/d/0B1_JT2snOzkHX3VDajlvMzdYRlU/edit?usp=sharing
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,067
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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