{"id":1223,"date":"2014-04-24T11:48:29","date_gmt":"2014-04-24T06:18:29","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1223"},"modified":"2014-04-24T11:48:29","modified_gmt":"2014-04-24T06:18:29","slug":"creating-cfmobile-application-using-angularjs","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-cfmobile-application-using-angularjs\/","title":{"rendered":"Creating CFMobile Application using AngularJS"},"content":{"rendered":"<p>In my previous blog\u00a0articles\u00a0I had explained how to create CFMobile applications using JQuery, Bootstrap\/JQueryMobile. Here are links to sample (CFMobileExpenseTracker) applications using the two UI frameworks &#8211;<\/p>\n<ul>\n<li><a href=\"http:\/\/ramkulkarni.com\/temp\/2014-02-25\/ExpenseTracker_project.zip\" target=\"_blank\">CFMoibleEpenseTracker using Bootstrap<\/a>\u00a0. <a title=\"Creating database mobile application with ColdFusion Splendor\" href=\"http:\/\/ramkulkarni.com\/blog\/creating-database-mobile-application-with-coldfusion-splendor\/\" target=\"_blank\">Blog article<\/a>.<\/li>\n<li><a href=\"\/assets\/content\/Ram\/2014-04-12\/CFMobileExpenseTracker.zip\" target=\"_blank\">CFMobileExpenseTracker using JQueryMobile<\/a>. <a href=\"http:\/\/blogs.coldfusion.com\/post.cfm\/slides-of-e-seminar-everything-about-mobile-application-development\" target=\"_blank\">Blog article<\/a>.<\/li>\n<\/ul>\n<p>I wanted to create the same application using <a href=\"https:\/\/angularjs.org\/\" target=\"_blank\">AngularJS<\/a>. It had\u00a0been on my &#8216;to learn&#8217; list for sometime now. So I spent the last weekend\u00a0learning it. If you already know concepts of MVC and Dependency Injection, then understanding AngularJS is not difficult. The well documented <a href=\"http:\/\/docs.angularjs.org\/tutorial\" target=\"_blank\">tutorials<\/a> also helped.<\/p>\n<p>I decided to re-write CFMobileExpenseTracker using AngularJS and JQueryMobile.\u00a0Since AngularJS provides very easy way to manipulate DOM, you really don&#8217;t need JQuery. But I had to include it in the\u00a0application\u00a0anyway because\u00a0JQueryMobile depends on it. I also used JQuery for basic event handling.<\/p>\n<p>Earlier in my application I had used client side custom tag (expenseList.cfm) to display expense items by calling JQuery APIs to modify DOM and update UI. I could get rid of this custom tag entirely after using AngularJS, because of templating features \u00a0and automatic\u00a0synchronisation\u00a0between model and view provided by Angular JS.<\/p>\n<p>Here are the screen shots of the application &#8211;<br \/>\n<a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1224\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/creating-cfmobile-application-using-angularjs\/2014_04_24_image1\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png?fit=480%2C800\" data-orig-size=\"480,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2014_04_24_image1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png?fit=180%2C300\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png?fit=480%2C800\" class=\"alignnone wp-image-1224 size-medium\" style=\"border: 1 solid black;\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1-180x300.png?resize=180%2C300\" alt=\"2014_04_24_image1\" width=\"180\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png?resize=180%2C300 180w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image1.png?w=480 480w\" sizes=\"(max-width: 180px) 100vw, 180px\" data-recalc-dims=\"1\" \/><\/a><a href=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1225\" data-permalink=\"http:\/\/ramkulkarni.com\/blog\/creating-cfmobile-application-using-angularjs\/2014_04_24_image2\/\" data-orig-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png?fit=480%2C800\" data-orig-size=\"480,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"2014_04_24_image2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png?fit=180%2C300\" data-large-file=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png?fit=480%2C800\" class=\"alignnone size-medium wp-image-1225\" style=\"border: 1 solid black;\" src=\"https:\/\/i0.wp.com\/138.197.85.232\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2-180x300.png?resize=180%2C300\" alt=\"2014_04_24_image2\" width=\"180\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png?resize=180%2C300 180w, https:\/\/i0.wp.com\/ramkulkarni.com\/blog\/wp-content\/uploads\/2014\/04\/2014_04_24_image2.png?w=480 480w\" sizes=\"(max-width: 180px) 100vw, 180px\" data-recalc-dims=\"1\" \/><\/a><\/p>\n<p>Though I said that I re-wrote the application, it was not a complete re-write. I could reuse CFCs and made small modifications to index_include.cfm. I added a new JS file (angular_app.js) to crate AngularJS application and controllers &#8211;<!--more--><!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #ffffff; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\">expesneTrackerApp <span style=\"color: #333333;\">=<\/span> angular.module(<span style=\"background-color: #fff0f0;\">\"expenseTrackerApp\"<\/span>,[]);\n\nexpesneTrackerApp.controller(\n\t<span style=\"background-color: #fff0f0;\">\"expnseItemsCtrl\"<\/span>,\n\t[\n\t\t<span style=\"background-color: #fff0f0;\">\"$scope\"<\/span>,\n\t\t<span style=\"color: #008800; font-weight: bold;\">function<\/span> ($scope) {\n\t\t\t$scope.expenses <span style=\"color: #333333;\">=<\/span> [];\n\t\t\t$scope.addExpense <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span> (expense)\n\t\t\t{\n\t\t\t\t$scope.expenses.push(expense);\n\t\t\t}\n\n\t\t\t$scope.dateToStr <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span> (dateNum)\n\t\t\t{\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> tmpDate <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">new<\/span> <span style=\"color: #007020;\">Date<\/span>(dateNum);\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> dateFormat(tmpDate,<span style=\"background-color: #fff0f0;\">\"mm\/dd\/yyyy\"<\/span>);\n\t\t\t}\n\t\t}\n\t]\n).controller (\n\t<span style=\"background-color: #fff0f0;\">\"addExpDlgCtrl\"<\/span>,\n\t[\n\t\t<span style=\"background-color: #fff0f0;\">\"$scope\"<\/span>,\n\t\t<span style=\"color: #008800; font-weight: bold;\">function<\/span> ($scope) {\n\t\t\t$scope.resetExpense <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span> ()\n\t\t\t{\n\t\t\t\t$scope.amount <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0000dd; font-weight: bold;\">0<\/span>;\n\t\t\t\t$scope.desc <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t\t\t$scope.date <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t\t\t$scope.imagePath <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t\t}\n\n\t\t\t$scope.resetExpense();\n\t\t}\n\t]\n).controller (\n\t<span style=\"background-color: #fff0f0;\">\"displayReceiptCtrl\"<\/span>,\n\t[\n\t\t<span style=\"background-color: #fff0f0;\">\"$scope\"<\/span>,\n\t\t<span style=\"color: #008800; font-weight: bold;\">function<\/span> ($scope)\n\t\t{\n\t\t\t$scope.resetData <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span>()\n\t\t\t{\n\t\t\t\t$scope.imagePath <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t\t}\n\t\t\t$scope.resetData();\n\t\t}\n\t]\n)\n<\/pre>\n<\/div>\n<p>I created the single expesneTrackerApp AngularJS application and added three controllers to it &#8211;<\/p>\n<p class=\"p1\">expnseItemsCtrl &#8211; Contains list of expense items.<\/p>\n<p class=\"p1\">addExpDlgCtrl &#8211; Contains values of new expense items<\/p>\n<p class=\"p1\">displayReceiptCtrl &#8211; Contains file path of image associated with an expense item.<\/p>\n<p class=\"p1\">Note that dateFormat function used in\u00a0expnseItemsCtrl is a built-in cfclient function.<\/p>\n<p class=\"p1\">Here is the new index.cfm &#8211; not much changed except attributes in HTML elements to associate with AngularJS controller and use of templating features, using {{}}, \u00a0of AngularJS to display expense items.<\/p>\n<div style=\"background: #ffffff; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #557799;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"color: #007700;\">&lt;html<\/span> <span style=\"color: #0000cc;\">ng-app=<\/span><span style=\"background-color: #fff0f0;\">\"expenseTrackerApp\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;head&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;META<\/span> <span style=\"color: #0000cc;\">HTTP-EQUIV=<\/span><span style=\"background-color: #fff0f0;\">\"CACHE-CONTROL\"<\/span> <span style=\"color: #0000cc;\">CONTENT=<\/span><span style=\"background-color: #fff0f0;\">\"NO-CACHE\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;meta<\/span> <span style=\"color: #0000cc;\">name=<\/span><span style=\"background-color: #fff0f0;\">\"viewport\"<\/span> <span style=\"color: #0000cc;\">content=<\/span><span style=\"background-color: #fff0f0;\">\"width=device-width, initial-scale=1.0\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;link<\/span> <span style=\"color: #0000cc;\">rel=<\/span><span style=\"background-color: #fff0f0;\">\"stylesheet\"<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"css\/jquery.mobile-1.4.2.min.css\"<\/span> <span style=\"color: #007700;\">&gt;&lt;\/link&gt;<\/span>\n\n\t\t<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"js\/jquery-2.1.0.min.js\"<\/span> <span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"js\/app.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"js\/jquery.mobile-1.4.2.min.js\"<\/span> <span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"js\/angular.min.js\"<\/span> <span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"js\/angular_app.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;style &gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">table<\/span> <span style=\"color: #007700;\">th<\/span> {\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">text-align<\/span><span style=\"color: #333333;\">:<\/span><span style=\"color: #008800; font-weight: bold;\">left<\/span>;\n\t\t\t}\n\t\t<span style=\"color: #007700;\">&lt;\/style&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;\/head&gt;<\/span>\n\n\t<span style=\"color: #007700;\">&lt;body<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\t\t<span style=\"color: #888888;\">&lt;!--- Main JQuery Mobile poage ---&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"page\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"mainPage\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"header\"<\/span> <span style=\"color: #0000cc;\">data-position=<\/span><span style=\"background-color: #fff0f0;\">\"fixed\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;h2&gt;<\/span>Expense Tracker<span style=\"color: #007700;\">&lt;\/h2&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"padding-left:10px\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"addBtn\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Add<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"deleteAllBtn\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Delete All<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-content\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #888888;\">&lt;!--- content will be dymanically populated ---&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">ng-controller=<\/span><span style=\"background-color: #fff0f0;\">\"expnseItemsCtrl\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"angularDiv1\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;table<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"100%\"<\/span> <span style=\"color: #0000cc;\">ng-if=<\/span><span style=\"background-color: #fff0f0;\">\"expenses.length &gt; 0\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;th&gt;<\/span>Date<span style=\"color: #007700;\">&lt;\/th&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;th&gt;<\/span>Amount<span style=\"color: #007700;\">&lt;\/th&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;th&gt;<\/span>Description<span style=\"color: #007700;\">&lt;\/th&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;th&gt;&lt;\/th&gt;<\/span>\n\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;tr<\/span> <span style=\"color: #0000cc;\">ng-repeat=<\/span><span style=\"background-color: #fff0f0;\">\"expense in expenses\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>{{dateToStr(expense.expenseDate)}}<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>{{expense.amount}}<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>{{expense.description}}<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>\n\t\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;span<\/span> <span style=\"color: #0000cc;\">ng-if=<\/span><span style=\"background-color: #fff0f0;\">\"expense.receiptPath.length &gt; 0\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;a<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"{{expense.receiptPath}}\"<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"imageReceipt\"<\/span><span style=\"color: #007700;\">&gt;<\/span>receipt<span style=\"color: #007700;\">&lt;\/a&gt;<\/span>\n\t\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/span&gt;<\/span>\n\t\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;span<\/span> <span style=\"color: #0000cc;\">ng-if=<\/span><span style=\"background-color: #fff0f0;\">\"expense.receiptPath.length == 0\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/span&gt;<\/span>\n\t\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n\t\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/table&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">ng-if=<\/span><span style=\"background-color: #fff0f0;\">\"expenses.length == 0\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t\t\tNo expenses found\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"footer\"<\/span> <span style=\"color: #0000cc;\">data-position=<\/span><span style=\"background-color: #fff0f0;\">\"fixed\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;h5&gt;<\/span>Created with CFMobile<span style=\"color: #007700;\">&lt;\/h5&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\n\t\t<span style=\"color: #888888;\">&lt;!--- JQM Dialog box to add an epxense item ---&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"page\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"addDlg\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"header\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;h2&gt;<\/span>Add Expense<span style=\"color: #007700;\">&lt;\/h2&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-content\"<\/span> <span style=\"color: #0000cc;\">ng-controller=<\/span><span style=\"background-color: #fff0f0;\">\"addExpDlgCtrl\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"addDlgContent\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n      \t\t\t<span style=\"color: #007700;\">&lt;table<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"100%\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>Date:<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"date\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"dateTxt\"<\/span> <span style=\"color: #0000cc;\">ng-model=<\/span><span style=\"background-color: #fff0f0;\">\"date\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/td&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>Amount:<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"text\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"amtTxt\"<\/span> <span style=\"color: #0000cc;\">ng-model=<\/span><span style=\"background-color: #fff0f0;\">\"amount\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/td&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;<\/span>Desc:<span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td&gt;&lt;input<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"text\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"descTxt\"<\/span> <span style=\"color: #0000cc;\">ng-model=<\/span><span style=\"background-color: #fff0f0;\">\"desc\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/td&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">colspan=<\/span><span style=\"background-color: #fff0f0;\">\"2\"<\/span><span style=\"color: #007700;\">&gt;&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"attachRcptBtn\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Attach Receipt<span style=\"color: #007700;\">&lt;\/button&gt;&lt;\/td&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;tr&gt;<\/span>\n      \t\t\t\t\t<span style=\"color: #007700;\">&lt;td<\/span> <span style=\"color: #0000cc;\">colspan=<\/span><span style=\"background-color: #fff0f0;\">\"2\"<\/span><span style=\"color: #007700;\">&gt;&lt;img<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"receiptImg\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"50\"<\/span> <span style=\"color: #0000cc;\">ng-src=<\/span><span style=\"background-color: #fff0f0;\">\"{{imagePath}}\"<\/span> <span style=\"color: #0000cc;\">ng-show=<\/span><span style=\"background-color: #fff0f0;\">\"imagePath.length &gt; 0\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/img&gt;&lt;\/td&gt;<\/span>\n      \t\t\t\t<span style=\"color: #007700;\">&lt;\/tr&gt;<\/span>\n      \t\t\t<span style=\"color: #007700;\">&lt;\/table&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"footer\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"dlgOKBtn1\"<\/span><span style=\"color: #007700;\">&gt;<\/span>OK<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"dlgCancel1\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Cancel<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\n\t\t<span style=\"color: #888888;\">&lt;!--- JQM Dialog box to display receipt ---&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"dialog\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"receiptDlg\"<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"overflow:scroll\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"header\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;h2&gt;<\/span>Receipt<span style=\"color: #007700;\">&lt;\/h2&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;div&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"receiptFitBtn\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Fit<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t\t\t<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-btn ui-btn-inline\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"receiptFullBtn\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Full Size<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"ui-content\"<\/span> <span style=\"color: #0000cc;\">style=<\/span><span style=\"background-color: #fff0f0;\">\"overflow:scroll\"<\/span> <span style=\"color: #0000cc;\">ng-controller=<\/span><span style=\"background-color: #fff0f0;\">\"displayReceiptCtrl\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t\t<span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"receiptImgLarge\"<\/span> <span style=\"color: #0000cc;\">ng-src=<\/span><span style=\"background-color: #fff0f0;\">\"{{imagePath}}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">data-role=<\/span><span style=\"background-color: #fff0f0;\">\"footer\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t\t<span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;\/body&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/html&gt;<\/span>\n\n<span style=\"color: #888888;\">&lt;!--- We will be using device APIs. So enable them ---&gt;<\/span>\n<span style=\"color: #007700;\">&lt;cfclientsettings<\/span> <span style=\"color: #0000cc;\">enabledeviceapi=<\/span><span style=\"background-color: #fff0f0;\">\"true\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n\n<span style=\"color: #007700;\">&lt;cfclient&gt;<\/span>\n\t<span style=\"color: #888888;\">&lt;!--- All cfclient code to creat dynamic HTML and <\/span>\n<span style=\"color: #888888;\">\t\tinterface with data access CFC is in the following included file ---&gt;<\/span>\n\t<span style=\"color: #007700;\">&lt;cfinclude<\/span> <span style=\"color: #0000cc;\">template=<\/span><span style=\"background-color: #fff0f0;\">\"index_include.cfm\"<\/span> <span style=\"color: #007700;\">&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/cfclient&gt;<\/span>\n<\/pre>\n<\/div>\n<p>Notice &lt;html&gt; tag is associated with AngularJS application (expenseTrackerApp) created in angular_app.js. In earlier applications, expense HTML table was created and populated in the expenseList.cfm custom tag. Now HTML table is created in index.cfm and populated using expnseItemsCtrl controller (in angular_app.js). Div &#8216;angularDiv1&#8217; (I know, I should have used a better name) is attached to expnseItemsCtrl using ng-controller attribute. And expense items are displayed in the table using ng-repeat iterator in &lt;tr&gt; tag.<br \/>\naddExpDlgCtrl controller is attached to addDlgContent div in the dialog box to add new expense item. displayReceiptCtrl controller is attached to a div in the dialog box to display receipt. Notice use of ng-model attributes in input text boxes to link them to values in the controller. Also image source it also attached to imagePath in the controller, using ng-src attribute.<\/p>\n<p>app.js file contains JS event handlers &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #ffffff; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/This file included in index.cfm<\/span>\n\n<span style=\"color: #888888;\">\/\/Handle mobileinit event of JQuery Mobile<\/span>\n$(<span style=\"color: #007020;\">document<\/span>).on(<span style=\"background-color: #fff0f0;\">\"mobileinit\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t<span style=\"color: #888888;\">\/\/perform any initialization, if required<\/span>\n});\n\n<span style=\"color: #888888;\">\/\/Handle pagecreate event of mainPage (JQM). Page is in index.cfm<\/span>\n$(<span style=\"color: #007020;\">document<\/span>).on(<span style=\"background-color: #fff0f0;\">\"pagecreate\"<\/span>, <span style=\"background-color: #fff0f0;\">\"#mainPage\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t$(<span style=\"background-color: #fff0f0;\">\"#addBtn\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\t$(<span style=\"background-color: #fff0f0;\">\"#addDlg\"<\/span>).dialog({closeBtn<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">\"none\"<\/span>});\n\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> scope <span style=\"color: #333333;\">=<\/span> angular.element(<span style=\"background-color: #fff0f0;\">\"#addDlgContent\"<\/span>).scope();\n\t\tscope.resetExpense();\n\t\tscope.$digest();\n\t\t_tmpImagePath <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t$.mobile.changePage(<span style=\"background-color: #fff0f0;\">\"#addDlg\"<\/span>,{role<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">\"dialog\"<\/span>});\n\t});\n\n\t<span style=\"color: #888888;\">\/\/Button event handler for Delete All button<\/span>\n\t$(<span style=\"background-color: #fff0f0;\">\"#deleteAllBtn\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\tdeleteAll(); <span style=\"color: #888888;\">\/\/in index_include.cfm<\/span>\n\t});\n\n\t<span style=\"color: #888888;\">\/\/Hyper link event handler for 'receipt' <\/span>\n\t$(<span style=\"color: #007020;\">document<\/span>).on(<span style=\"background-color: #fff0f0;\">\"click\"<\/span>,<span style=\"background-color: #fff0f0;\">\".imageReceipt\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(event){\n\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> imagePath <span style=\"color: #333333;\">=<\/span> $(event.target).attr(<span style=\"background-color: #fff0f0;\">\"href\"<\/span>);\n\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (imagePath <span style=\"color: #333333;\">!=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> scope <span style=\"color: #333333;\">=<\/span> angular.element(<span style=\"background-color: #fff0f0;\">\"#receiptImgLarge\"<\/span>).scope();\n\t\t\tscope.$apply(<span style=\"color: #008800; font-weight: bold;\">function<\/span>($scope){\n\t\t\t\t$scope.imagePath <span style=\"color: #333333;\">=<\/span> \timagePath;\n\t\t\t\t$(<span style=\"background-color: #fff0f0;\">\"#receiptDlg\"<\/span>).dialog({closeBtn<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">\"right\"<\/span>});\n\t\t\t\t$.mobile.changePage(<span style=\"background-color: #fff0f0;\">\"#receiptDlg\"<\/span>,{role<span style=\"color: #333333;\">:<\/span><span style=\"background-color: #fff0f0;\">\"dialog\"<\/span>});\n\n\t\t\t\t<span style=\"color: #888888;\">\/\/$(\"#receiptImgLarge\").width($(\"#receiptDlg .ui-dialog-contain\").width());<\/span>\n\t\t\t\tloadImage(imagePath,<span style=\"background-color: #fff0f0;\">\"receiptImgLarge\"<\/span>); <span style=\"color: #888888;\">\/\/in index_include.cfm<\/span>\n\t\t\t});\n\n\t\t}\n\t\tevent.preventDefault();\n\t\t<span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #008800; font-weight: bold;\">false<\/span>;\n\t});\n\n});\n\n<span style=\"color: #888888;\">\/\/JQM pagecreate event for add dialog<\/span>\n$(<span style=\"color: #007020;\">document<\/span>).on(<span style=\"background-color: #fff0f0;\">\"pagecreate\"<\/span>,<span style=\"background-color: #fff0f0;\">\"#addDlg\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t$(<span style=\"background-color: #fff0f0;\">\"#dlgOKBtn1\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\tsaveExpense(); <span style=\"color: #888888;\">\/\/in index_include.cfm<\/span>\n\t});\n\n\t<span style=\"color: #888888;\">\/\/Button event handler for Cancel button<\/span>\n\t$(<span style=\"background-color: #fff0f0;\">\"#dlgCancel1\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\t$(<span style=\"background-color: #fff0f0;\">\"#addDlg\"<\/span>).dialog(<span style=\"background-color: #fff0f0;\">\"close\"<\/span>);\n\t\t<span style=\"color: #888888;\">\/\/delete receipt, if it was attached<\/span>\n\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (_tmpImagePath <span style=\"color: #333333;\">!=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>)\n\t\t{\n\t\t\tdeleteFile(_tmpImagePath); <span style=\"color: #888888;\">\/\/in index_include.cfm<\/span>\n\t\t\t_tmpImagePath <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\t\t}\n\t});\n\n\t<span style=\"color: #888888;\">\/\/Button event handler for Attach Receipt button<\/span>\n\t$(<span style=\"background-color: #fff0f0;\">\"#attachRcptBtn\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\tattachReceipt(); <span style=\"color: #888888;\">\/\/in index_include.cfm<\/span>\n\t});\n\n});\n\n<span style=\"color: #888888;\">\/\/JQM pagecreate event to display receipt dialog<\/span>\n$(<span style=\"color: #007020;\">document<\/span>).on(<span style=\"background-color: #fff0f0;\">\"pagecreate\"<\/span>,<span style=\"background-color: #fff0f0;\">\"#receiptDlg\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t<span style=\"color: #888888;\">\/\/Button event handler for 'Fit' image to window button<\/span>\n\t$(<span style=\"background-color: #fff0f0;\">\"#receiptFitBtn\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\t$(<span style=\"background-color: #fff0f0;\">\"#receiptImgLarge\"<\/span>).css(<span style=\"background-color: #fff0f0;\">\"width\"<\/span>,<span style=\"background-color: #fff0f0;\">\"100%\"<\/span>);\n\t});\n\n\t<span style=\"color: #888888;\">\/\/Button event handler for 'Full Size' (image) button<\/span>\n\t$(<span style=\"background-color: #fff0f0;\">\"#receiptFullBtn\"<\/span>).on(<span style=\"background-color: #fff0f0;\">\"vclick\"<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>(){\n\t\t$(<span style=\"background-color: #fff0f0;\">\"#receiptImgLarge\"<\/span>).css(<span style=\"background-color: #fff0f0;\">\"width\"<\/span>,<span style=\"background-color: #fff0f0;\">''<\/span>);\n\t});\n\n});\n<\/pre>\n<\/div>\n<p>Since\u00a0data is updated in event handlers in this fale are outside the context of AngularJS, I first get scope associated with the required element, update the values and then either call $apply or $digest to let AngularJS watchers know that data has changed &#8211; watchers then update the UI with new data. See event handlers for #addBtn and .imageReceipt in the above code.<\/p>\n<p>index_include.cfm contains cfclient code. It first creates an instance of ExpenseManager CFC and then calls getExpenses method on it to get array of ExpenseVO objects. Earlier, this array was passed to the client side custom tag, expense_list.cfm to display it in HTML table. That code is now changed. We need to let AngularJS controller, expnseItemsCtrl, know that data has changed. Because this code is outside the context of AngularJS we will have to use scope.$apply method again to propagate changes to all UI watchers. Here is the complete code in index_include.cfm &#8211;<!-- HTML generated using hilite.me --><\/p>\n<div style=\"background: #ffffff; overflow: auto; width: auto; border: solid gray; border-width: .1em .1em .1em .8em; padding: .2em .6em;\">\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;cfclient&gt;<\/span>\n\t<span style=\"color: #888888;\">&lt;!--- included from index.html<\/span>\n<span style=\"color: #888888;\">\t\tContains code to create HTML dynamically and acts <\/span>\n<span style=\"color: #888888;\">\t\tas interface between HTML UI and data access code in <\/span>\n<span style=\"color: #888888;\">\t\tthe ExpenseManager.cfc<\/span>\n<span style=\"color: #888888;\">\t---&gt;<\/span>\n\n\t<span style=\"color: #888888;\">&lt;!--- Folder name where receipt images will be saved ---&gt;<\/span>\n\t<span style=\"color: #007020;\">&lt;cfset<\/span> <span style=\"color: #996633;\">variables.appFolderName<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"CFMobileExpenseTracker\"<\/span><span style=\"color: #007020;\">&gt;<\/span>\n\n\t<span style=\"color: #007020;\">&lt;cftry&gt;<\/span>\n\t\t<span style=\"color: #888888;\">&lt;!--- Create an instance of ExpenseManager.cfc and get all expenses from it ---&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;cfset<\/span> <span style=\"color: #996633;\">expMgr<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">new<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfc.ExpenseManager<\/span>()<span style=\"color: #007020;\">&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;cfset<\/span> <span style=\"color: #996633;\">expenses<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">expMgr.getExpenses<\/span>()<span style=\"color: #007020;\">&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(<span style=\"background-color: #fff0f0;\">\"##angularDiv1\"<\/span>).<span style=\"color: #0066bb; font-weight: bold;\">scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t\t\t<span style=\"color: #996633;\">$scope.expenses<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">expenses<\/span>;\n\t\t\t});\n\t\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n\n\t\t<span style=\"color: #007020;\">&lt;cfcatch<\/span> <span style=\"color: #996633;\">type<\/span><span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"any\"<\/span> <span style=\"color: #996633;\">name<\/span><span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"e\"<\/span><span style=\"color: #007020;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007020;\">&lt;cfset<\/span> <span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"color: #996633;\">e.message<\/span>)<span style=\"color: #007020;\">&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;\/cfcatch&gt;<\/span>\n\t<span style=\"color: #007020;\">&lt;\/cftry&gt;<\/span>\n\n\t<span style=\"color: #888888;\">&lt;!--- Reads expense item details from HTML input fields and<\/span>\n<span style=\"color: #888888;\">\t\tcalls ExpenseManager.addExpense to save to the database ---&gt;<\/span>\n\t<span style=\"color: #007020;\">&lt;cffunction<\/span> <span style=\"color: #996633;\">name<\/span><span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"saveExpense\"<\/span> <span style=\"color: #007020;\">&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">scope<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(<span style=\"background-color: #fff0f0;\">\"##addDlgContent\"<\/span>).<span style=\"color: #0066bb; font-weight: bold;\">scope<\/span>();\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">dateStr<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">scope.date<\/span>;\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">amtStr<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">trim<\/span>(<span style=\"color: #996633;\">scope.amount<\/span>);\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #996633;\">dateStr<\/span> <span style=\"color: #333333;\">==<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span> <span style=\"color: #333333;\">||<\/span> <span style=\"color: #996633;\">amtStr<\/span> <span style=\"color: #333333;\">==<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"background-color: #fff0f0;\">\"Date and amount are required\"<\/span>);\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\t\t\t}\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #333333;\">!<\/span><span style=\"color: #0066bb; font-weight: bold;\">isNumeric<\/span>(<span style=\"color: #996633;\">amtStr<\/span>))\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"background-color: #fff0f0;\">\"Invalid amount\"<\/span>);\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\t\t\t}\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">amt<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">Number<\/span>(<span style=\"color: #996633;\">amtStr<\/span>);\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">tmpDate<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">new<\/span> <span style=\"color: #0066bb; font-weight: bold;\">Date<\/span>(<span style=\"color: #996633;\">dateStr<\/span>);\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">desc<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">trim<\/span>(<span style=\"color: #996633;\">scope.desc<\/span>);\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">receiptPath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>;\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #0066bb; font-weight: bold;\">isDefined<\/span>(<span style=\"background-color: #fff0f0;\">\"_tmpImagePath\"<\/span>))\n\t\t\t\t<span style=\"color: #996633;\">receiptPath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">_tmpImagePath<\/span>;\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">expVO<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">new<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfc.ExpenseVO<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">tmpDate.getTime<\/span>(),<span style=\"color: #996633;\">amt<\/span>,<span style=\"color: #996633;\">desc<\/span>,<span style=\"color: #996633;\">receiptPath<\/span>);\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">expAdded<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">false<\/span>;\n\n\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">expMgr.addExpense<\/span>(<span style=\"color: #996633;\">expVO<\/span>);\n\t\t\t\t<span style=\"color: #996633;\">expAdded<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">true<\/span>;\n\t\t\t}\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"background-color: #fff0f0;\">\"Error : \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">e.message<\/span>);\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\t\t\t}\n\t\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n\n\t\t<span style=\"color: #007020;\">&lt;cfset<\/span> <span style=\"color: #0066bb; font-weight: bold;\">$<\/span>(<span style=\"background-color: #fff0f0;\">\"##addDlg\"<\/span>).<span style=\"color: #0066bb; font-weight: bold;\">dialog<\/span>(<span style=\"background-color: #fff0f0;\">\"close\"<\/span>) <span style=\"color: #007020;\">&gt;<\/span>\n\n\t\t<span style=\"color: #007020;\">&lt;cfif<\/span> <span style=\"color: #996633;\">expAdded<\/span> <span style=\"color: #333333;\">eq<\/span> <span style=\"color: #996633;\">true<\/span><span style=\"color: #007020;\">&gt;<\/span>\n\t\t\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(<span style=\"background-color: #fff0f0;\">\"##angularDiv1\"<\/span>).<span style=\"color: #0066bb; font-weight: bold;\">scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">$scope.addExpense<\/span>(<span style=\"color: #996633;\">expVO<\/span>);\n\t\t\t\t});\n\t\t\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;\/cfif&gt;<\/span>\n\n\t<span style=\"color: #007020;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #888888;\">&lt;!--- Calls ExpenseManager.deleteAllExpenses and <\/span>\n<span style=\"color: #888888;\">\t\tthen removes all items from the HTML table ---&gt;<\/span>\n\t<span style=\"color: #007020;\">&lt;cffunction<\/span> <span style=\"color: #996633;\">name<\/span><span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"deleteAll\"<\/span> <span style=\"color: #007020;\">&gt;<\/span>\n\n\t\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #333333;\">!<\/span><span style=\"color: #0066bb; font-weight: bold;\">confirm<\/span>(<span style=\"background-color: #fff0f0;\">\"Are you sure you want to delete all?\"<\/span>))\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\n\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">expMgr.deleteAllExpenses<\/span>();\n\t\t\t}\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"background-color: #fff0f0;\">\"Error : \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">e.message<\/span>);\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\t\t\t}\n\t\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n\n \t\t<span style=\"color: #888888;\">&lt;!---&lt;cf_expenseList parentDiv=\"expenseListDiv\" action=\"removeAll\"&gt;---&gt;<\/span>\n\t\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(<span style=\"background-color: #fff0f0;\">\"##angularDiv1\"<\/span>).<span style=\"color: #0066bb; font-weight: bold;\">scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t\t\t<span style=\"color: #996633;\">$scope.expenses<\/span> <span style=\"color: #333333;\">=<\/span> [];\n\t\t\t});\n\t\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n\n\t<span style=\"color: #007020;\">&lt;\/cffunction&gt;<\/span>\n\n\t<span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t\t<span style=\"color: #888888;\">\/\/Attach receipt to expense item ---&gt;<\/span>\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">attachReceipt<\/span>()\n\t\t{\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #333333;\">!<\/span><span style=\"color: #0066bb; font-weight: bold;\">createApplicationFolder<\/span>())\n\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">imageUrl<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.camera.getPicture<\/span>();\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #0066bb; font-weight: bold;\">isDefined<\/span>(<span style=\"background-color: #fff0f0;\">\"imageUrl\"<\/span>))\n\t\t\t{\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">imagePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">copyFileFromTempToPersistentFileSystem<\/span>(<span style=\"color: #996633;\">imageUrl<\/span>);\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #0066bb; font-weight: bold;\">isDefined<\/span>(<span style=\"background-color: #fff0f0;\">\"imagePath\"<\/span>) <span style=\"color: #333333;\">&amp;&amp;<\/span> <span style=\"color: #996633;\">imagePath<\/span> <span style=\"color: #333333;\">!=<\/span> <span style=\"background-color: #fff0f0;\">\"\"<\/span>)\n\t\t\t\t{\n\t\t\t\t\t<span style=\"color: #996633;\">_tmpImagePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">imagePath<\/span>;\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"image saved to \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">imagePath<\/span>);\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">loadImage<\/span>(<span style=\"color: #996633;\">imagePath<\/span>,<span style=\"background-color: #fff0f0;\">\"receiptImg\"<\/span>);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t<span style=\"color: #888888;\">\/\/Creates application folder stored in variables.appFolderName ---&gt;<\/span>\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">createApplicationFolder<\/span>()\n\t\t{\n\t\t\t<span style=\"color: #888888;\">\/\/set persistent file system<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">persistentfileSystem<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.setFileSystem<\/span>(<span style=\"background-color: #fff0f0;\">\"persistent\"<\/span>);\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">appFolderPath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">persistentfileSystem.root.fullPath<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">variables.appFolderName<\/span>;\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">createFolder<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">false<\/span>;\n\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">dirPath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.getDirectory<\/span>(<span style=\"color: #996633;\">appFolderPath<\/span>);\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #333333;\">!<\/span><span style=\"color: #0066bb; font-weight: bold;\">isDefined<\/span>(<span style=\"background-color: #fff0f0;\">\"dirPath\"<\/span>))\n\t\t\t\t\t<span style=\"color: #996633;\">createFolder<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">true<\/span>;\n\t\t\t} <span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #888888;\">\/\/assume directory does not exist<\/span>\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #996633;\">e.message<\/span>)\n\t\t\t\t\t<span style=\"color: #996633;\">createFolder<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">true<\/span>;\n\t\t\t}\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #996633;\">createFolder<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t\t{\n\t\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">dirEntry<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.createDirectory<\/span>(<span style=\"color: #996633;\">appFolderPath<\/span>,<span style=\"color: #996633;\">true<\/span>);\n\t\t\t\t}\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>)\n\t\t\t\t{\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">alert<\/span>(<span style=\"background-color: #fff0f0;\">\"Error : \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">appFolderPath<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\" - \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">e.message<\/span>);\n\t\t\t\t\t<span style=\"color: #996633;\">return<\/span> <span style=\"color: #996633;\">false<\/span>;\n\t\t\t\t}\n\t\t\t}\n\t\t\t<span style=\"color: #996633;\">return<\/span> <span style=\"color: #996633;\">true<\/span>;\n\t\t}\n\n\t\t<span style=\"color: #888888;\">\/\/Copies image file from temporary file system to persistent file system<\/span>\n\t\t<span style=\"color: #888888;\">\/\/in the folder <\/span>\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">copyFileFromTempToPersistentFileSystem<\/span> (<span style=\"color: #996633;\">tempFilePath<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #888888;\">\/\/save existing file system<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">oldFileSystem<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.getFileSystem<\/span>();\n\n\t\t\t<span style=\"color: #888888;\">\/\/Get file object from the path<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">tmpFile<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.get<\/span>(<span style=\"color: #996633;\">tempFilePath<\/span>);\n\n\t\t\t<span style=\"color: #888888;\">\/\/set persistent file system<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">persistentfileSystem<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.setFileSystem<\/span>(<span style=\"background-color: #fff0f0;\">\"persistent\"<\/span>);\n\n\t\t\t<span style=\"color: #888888;\">\/\/assume application folder is already created<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">newFilePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">persistentfileSystem.root.fullPath<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">variables.appFolderName<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">tmpFile.name<\/span>;\n\n\t\t\t<span style=\"color: #888888;\">\/\/If file with the same name exists in the persistent file system, then try save<\/span>\n\t\t\t<span style=\"color: #888888;\">\/\/it with different name<\/span>\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">count<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #6600ee; font-weight: bold;\">1<\/span>;\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">while<\/span> (<span style=\"color: #996633;\">count<\/span> <span style=\"color: #333333;\">&lt;<\/span> <span style=\"color: #6600ee; font-weight: bold;\">10<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t\t{\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.get<\/span>(<span style=\"color: #996633;\">newFilePath<\/span>);\n\n\t\t\t\t\t<span style=\"color: #888888;\">\/\/file already exists. Try different file name<\/span>\n\t\t\t\t\t<span style=\"color: #996633;\">count<\/span><span style=\"color: #333333;\">++<\/span>;\n\t\t\t\t\t<span style=\"color: #996633;\">newFilePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">persistentfileSystem.root.fullPath<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">variables.appFolderName<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"\/\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #0066bb; font-weight: bold;\">replace<\/span>(<span style=\"color: #996633;\">tmpFile.name<\/span>,<span style=\"background-color: #fff0f0;\">\".\"<\/span>,<span style=\"background-color: #fff0f0;\">\"_\"<\/span>) <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\"_\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">count<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\".jpg\"<\/span>;\n\t\t\t\t}\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>) {\n\t\t\t\t\t<span style=\"color: #888888;\">\/\/Assume file does not exists. Go ahead and copy from temp location to persistent location.\t<\/span>\n\t\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"Exception : \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">e.message<\/span>);\n\t\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">break<\/span>;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<span style=\"color: #888888;\">\/\/Copy file<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.copy<\/span>(<span style=\"color: #996633;\">tempFilePath<\/span>,<span style=\"color: #996633;\">newFilePath<\/span>);\n\n\t\t\t<span style=\"color: #888888;\">\/\/remove temporary file<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.remove<\/span>(<span style=\"color: #996633;\">tempFilePath<\/span>);\n\n\t\t\t<span style=\"color: #888888;\">\/\/Restore old file system<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.setFileSystem<\/span>(<span style=\"color: #996633;\">oldFileSystem.name<\/span>);\n\n\t\t\t<span style=\"color: #888888;\">\/\/return new file path<\/span>\n\t\t\t<span style=\"color: #996633;\">return<\/span> <span style=\"color: #996633;\">newFilePath<\/span>;\n\t\t}\n\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">loadImage<\/span> (<span style=\"color: #996633;\">filePath<\/span>, <span style=\"color: #996633;\">imageId<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #888888;\">\/\/first try to load by using file path<\/span>\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"FilePath = \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">filePath<\/span>);\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">imageLoaded<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">false<\/span>;\n\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">imageElement<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(<span style=\"background-color: #fff0f0;\">\"##\"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">imageId<\/span>);\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"Image scope - \"<\/span>);\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">imageElement.scope<\/span>());\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">imageElement.unbind<\/span>(<span style=\"background-color: #fff0f0;\">\"load\"<\/span>);\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">imageElement.bind<\/span>(<span style=\"background-color: #fff0f0;\">\"load\"<\/span>, <span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">event<\/span>){\n\t\t\t\t<span style=\"color: #888888;\">\/\/image loaded successfully<\/span>\n\t\t\t\t<span style=\"color: #996633;\">imageLoaded<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">true<\/span>;\n\t\t\t});\n\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">imageElement.scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t\t\t<span style=\"color: #996633;\">$scope.imagePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">filePath<\/span>;\n\t\t\t});\n\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">setTimeout<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>() {\n\t\t\t\t<span style=\"color: #008800; font-weight: bold;\">if<\/span> (<span style=\"color: #996633;\">imageLoaded<\/span>)\n\t\t\t\t\t<span style=\"color: #996633;\">return<\/span>;\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">loadImageData<\/span> (<span style=\"color: #996633;\">filePath<\/span>, <span style=\"color: #996633;\">imageId<\/span>, <span style=\"color: #996633;\">imageElement<\/span>);\n\t\t\t},<span style=\"color: #6600ee; font-weight: bold;\">1000<\/span>);\n\t\t}\n\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">loadImageData<\/span>(<span style=\"color: #996633;\">filePath<\/span>, <span style=\"color: #996633;\">imageId<\/span>, <span style=\"color: #996633;\">imageElement<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #008800; font-weight: bold;\">var<\/span> <span style=\"color: #996633;\">imageData<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.readAsBase64<\/span>(<span style=\"color: #996633;\">filePath<\/span>);\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">imageElement.scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t\t\t<span style=\"color: #996633;\">$scope.imagePath<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">imageData<\/span>;\n\t\t\t});\n\t\t}\n\n\t\t<span style=\"color: #996633;\">function<\/span> <span style=\"color: #0066bb; font-weight: bold;\">deleteFile<\/span> (<span style=\"color: #996633;\">filePath<\/span>)\n\t\t{\n\t\t\t<span style=\"color: #996633;\">try<\/span>\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">cfclient.file.remove<\/span>(<span style=\"color: #996633;\">filePath<\/span>);\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"File \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">filePath<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\" deleted\"<\/span>);\n\t\t\t}\n\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">catch<\/span> (<span style=\"color: #996633;\">any<\/span> <span style=\"color: #996633;\">e<\/span>)\n\t\t\t{\n\t\t\t\t<span style=\"color: #0066bb; font-weight: bold;\">console.log<\/span>(<span style=\"background-color: #fff0f0;\">\"Error removing file - \"<\/span> <span style=\"color: #333333;\">+<\/span> <span style=\"color: #996633;\">filePath<\/span>);\n\t\t\t}\n\t\t}\n\n\t<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n<span style=\"color: #007700;\">&lt;\/cfclient&gt;<\/span>\n<\/pre>\n<\/div>\n<p>Look for angular.element text in the above code to know where AngularJS scopes are used to setting\/retrieving data in\/from controllers. Notice that we are assigning array of ExpenseVO CFCs to a variable in AngularJS scope &#8211;<\/p>\n<pre><span style=\"color: #007020;\">&lt;cfscript&gt;<\/span>\n\t<span style=\"color: #0066bb; font-weight: bold;\">angular.element<\/span>(\"##angularDiv1\").<span style=\"color: #0066bb; font-weight: bold;\">scope<\/span>().<span style=\"color: #0066bb; font-weight: bold;\">$apply<\/span>(<span style=\"color: #0066bb; font-weight: bold;\">function<\/span>(<span style=\"color: #996633;\">$scope<\/span>){\n\t\t<span style=\"color: #996633;\">$scope.expenses<\/span> <span style=\"color: #333333;\">=<\/span> <span style=\"color: #996633;\">expenses<\/span>;\n\t});\n<span style=\"color: #007020;\">&lt;\/cfscript&gt;<\/span>\n<\/pre>\n<p>This works because CFCs are\u00a0translated\u00a0to JS object by cfclient.<\/p>\n<p>CFCs are not changed from the previous applications. And\u00a0expenseList.cfm is not needed now.<\/p>\n<p><a href=\"http:\/\/ramkulkarni.com\/temp\/2014-04-24\/CFAngularMobileExpenseTracker.zip\" target=\"_blank\">Download the entire source code<\/a>. <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-04-24\/CFAngularMobileExpenseTracker.apk\" target=\"_blank\">Download the Android APK file<\/a>.<\/p>\n<p>Because of recent\u00a0changes in PhoneGap Build server, some of the file APIs may not work. This has been fixed post-beta builds of ColdFusion Thunder. If you are using the public beta build and want to package this application from source, then use <a href=\"http:\/\/ramkulkarni.com\/temp\/2014-04-24\/config.xml\" target=\"_blank\">this config.xml <\/a>file.<\/p>\n<p>-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous blog\u00a0articles\u00a0I had explained how to create CFMobile applications using JQuery, Bootstrap\/JQueryMobile. Here are links to sample (CFMobileExpenseTracker) applications using the two UI frameworks &#8211; CFMoibleEpenseTracker using Bootstrap\u00a0. Blog article. CFMobileExpenseTracker using JQueryMobile. Blog article. I wanted to create the same application using AngularJS. It had\u00a0been on my &#8216;to learn&#8217; list for sometime &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/ramkulkarni.com\/blog\/creating-cfmobile-application-using-angularjs\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Creating CFMobile Application using AngularJS&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Creating CFMobile Application using AngularJS http:\/\/wp.me\/p2g9O8-jJ #ColdFusion","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[32,30,78,1],"tags":[103,85,94,22],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-jJ","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1223"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1223"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1223\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1223"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}