{"id":1267,"date":"2014-07-11T13:21:10","date_gmt":"2014-07-11T07:51:10","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1267"},"modified":"2014-07-11T13:21:10","modified_gmt":"2014-07-11T07:51:10","slug":"angularjs-jquerymobile-and-dynamic-loading-of-pages","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/angularjs-jquerymobile-and-dynamic-loading-of-pages\/","title":{"rendered":"AngularJS + JQueryMobile and Dynamic Loading of pages"},"content":{"rendered":"

I was\u00a0experimenting with using AngularJS and JQueryMobile together and\u00a0loading pages dynamically.\u00a0The page loading and routing can either be handled by JQueryMobile ($.mobile.pageContainer.pagecontainer(<\/span>“change”<\/span>,“page_name”<\/span>)<\/span>) or AngularJS. With AngularJS you can use $route<\/a>\u00a0service along with ngView<\/a>\u00a0and\/or use\u00a0ngInclude<\/a>\u00a0.<\/p>\n

ngInclude looked easy enough to start with, but did not turn out to be that easy. I will take as simple example of a login application. If user is not logged-in, the app\u00a0will display the login\u00a0page and after successfully logging in, the application will display the main page, with the option to logout.<\/p>\n

Here is index.html –<\/p>\n

\n
<!DOCTYPE html><\/span>\n\n<html<\/span> ng-app=<\/span>\"loginSampleApp\"<\/span>><\/span>\n\t<head><\/span>\n\t\t<META<\/span> HTTP-EQUIV=<\/span>\"CACHE-CONTROL\"<\/span> CONTENT=<\/span>\"NO-CACHE\"<\/span>><\/span>\n\n\t\t<link<\/span> rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"css\/jquery.mobile-1.4.2.min.css\"<\/span> ><\/link><\/span>\n\n\t\t<script <\/span>src=<\/span>\"js\/jquery-2.1.0.min.js\"<\/span> ><\/script><\/span>\n\t\t<script <\/span>src=<\/span>\"js\/jquery.mobile-1.4.2.min.js\"<\/span> ><\/script><\/span>\n\t\t<script <\/span>src=<\/span>\"js\/angular.min.js\"<\/span> ><\/script><\/span>\n\n\t\t<script <\/span>src=<\/span>\"angular_app.js\"<\/span>><\/script><\/span>\n\n\t<\/head><\/span>\n\n\t<body<\/span> ><\/span>\n\t\t<div<\/span> ng-controller=<\/span>\"mainController\"<\/span> data-role=<\/span>\"page\"<\/span>><\/span>\n\t\t\t<div<\/span> data-role=<\/span>\"header\"<\/span> data-position=<\/span>\"fixed\"<\/span>><\/span>\n\t\t\t\t<h2><\/span>Login Application<\/h2><\/span>\n\t\t\t<\/div><\/span>\n\t\t\t<div<\/span> data-role=<\/span>\"content\"<\/span> id=<\/span>\"mainDiv\"<\/span> ><\/span>\n\t\t\t\t<ng<\/span>-include<\/span> src=<\/span>\"getTemplate()\"<\/span>><\/span><<\/span>\/ng-include>\n\t\t\t<\/div><\/span>\n\t\t\t<div<\/span> data-role=<\/span>\"footer\"<\/span> data-position=<\/span>\"fixed\"<\/span>><\/span>\n\t\t\t\t<h3><\/span>Created with AngularJS and JQuery Mobile<\/h3><\/span>\n\t\t\t<\/div><\/span>\n\t\t<\/div><\/span>\n\t<\/body><\/span>\n<\/html><\/span>\n<\/pre>\n<\/div>\n
Body of the page has a JQueryMobile div-page with header, content and footer. The content div calls ng-include directive and source is returned by getTemplate() function, which is declared in angular_app.js.<\/p>\n
angular_app.js –<\/p>\n
\n
window<\/span>.loggedIn =<\/span> false<\/span>;\nvar<\/span> loginSampleApp =<\/span> angular.module(\"loginSampleApp\"<\/span>,[]).\ncontroller (\n\t\"mainController\"<\/span>,\n\t[\n\t\t\"$scope\"<\/span>,\n\t\tfunction<\/span> ($scope)\n\t\t{\n\t\t\t$scope.getTemplate =<\/span> function<\/span>()\n\t\t\t{\n\t\t\t\tif<\/span> (!<\/span>window<\/span>.loggedIn )\n\t\t\t\t\treturn<\/span> \"login.html\"<\/span>;\n\t\t\t\telse<\/span>\n\t\t\t\t\treturn<\/span> \"main.html\"<\/span>;\n\t\t\t}\n\t\t}\n\t]\n). controller(\n\t\"loginController\"<\/span>,\n\t[\n\t\t\"$scope\"<\/span>,\n\t\tfunction<\/span> ($scope)\n\t\t{\n\t\t\t$scope.userName =<\/span> \"\"<\/span>;\n\t\t\t$scope.password =<\/span> \"\"<\/span>;\n\n\t\t\t$scope.onSubmit =<\/span> function<\/span>()\n\t\t\t{\n\t\t\t\tif<\/span> ($scope.userName !==<\/span> \"admin\"<\/span> ||<\/span> $scope.password !==<\/span> \"admin\"<\/span>)\n\t\t\t\t{\n\t\t\t\t\talert(\"Invalid user name or password\"<\/span>);\n\t\t\t\t\treturn<\/span> ;\n\t\t\t\t}\n\t\t\t\twindow<\/span>.loggedIn  =<\/span> true<\/span>;\n\t\t\t\treturn<\/span> ;\n\t\t\t}\n\n\t\t\t$scope.onReset =<\/span> function<\/span>()\n\t\t\t{\n\t\t\t\t$scope.userName =<\/span> \"\"<\/span>;\n\t\t\t\t$scope.password =<\/span> \"\"<\/span>;\n\t\t\t}\n\t\t}\n\t]\n). controller (\n\t\"mainPageController\"<\/span>,\n\t[\n\t\t\"$scope\"<\/span>,\n\t\tfunction<\/span> ($scope)\n\t\t{\n\n\t\t\t$scope.logout =<\/span> function<\/span>()\n\t\t\t{\n\t\t\t\twindow<\/span>.loggedIn  =<\/span> false<\/span>;\n\t\t\t}\n\t\t}\n\t]\n)\n;\n<\/pre>\n<\/div>\n
First I\u00a0initialize window.loggedIn flag to false. Then declare Angular App and controllers – mainController (used in index.html), loginController (used in login.html) and mainPageController (used in main.html). getTemplate function is declared in the mainController and it returns appropriate page name depending on value of the flag window.loggedIn.<\/p>\n
login.html –<\/p>\n
\n
<div<\/span> ng-controller=<\/span>\"loginController\"<\/span>><\/span>\n\tUser Name : <input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"userName\"<\/span> ng-model=<\/span>\"userName\"<\/span>><br><\/span>\n\tPassword  : <input<\/span> type=<\/span>\"password\"<\/span> id=<\/span>\"password\"<\/span> ng-model=<\/span>\"password\"<\/span>><br><\/span>\n\n\t<a<\/span> href=<\/span>\"#\"<\/span> data-role=<\/span>\"button\"<\/span> data-inline=<\/span>\"true\"<\/span> id=<\/span>\"submitBtn\"<\/span> ng-click=<\/span>\"onSubmit()\"<\/span>><\/span>Submit<\/a><\/span>\n\t<a<\/span> href=<\/span>\"#\"<\/span> data-role=<\/span>\"button\"<\/span> data-inline=<\/span>\"true\"<\/span> id=<\/span>\"resetBtn\"<\/span> ng-click=<\/span>\"onReset()\"<\/span>><\/span>Reset<\/a><\/span>\n<\/div><\/span>\n<\/pre>\n<\/div>\n
And main.html – <\/p>\n
\n
<div<\/span> ng-controller=<\/span>\"mainPageController\"<\/span>><\/span>\n\tYou are logged-in <br><\/span>\n\t<a<\/span> href=<\/span>\"#\"<\/span> data-role=<\/span>\"button\"<\/span> data-inline=<\/span>\"true\"<\/span> ng-click=<\/span>\"logout()\"<\/span>><\/span>Logout<\/a><\/span>\n<\/div><\/span>\n<\/pre>\n<\/div>\n
You can see how this application works here<\/a>\u00a0– enter user name and password as admin.
\nThe problem is that JQueryMobile styles are not applied to the dynamically included files. You will see that buttons appear as links instead of JQM buttons and text fields are also not JQM text fields.<\/p>\n
The solution for this problem is to trigger JQuery Mobile create event on the parent div, in this example\u00a0it is mainDiv in index.html. So I need to call\u00a0$<\/span>(<\/span>“#mainDiv”)<\/span>.trigger<\/span>(<\/span>“create”)<\/span>;<\/span><\/p>\n
But when and where do I call it from? It has to be called after ng-include is done with loading and compiling the page. So I need to handle $includeContentLoaded, which is triggered when ng-include is done loading the content.\u00a0This event has to be handled on the\u00a0AngularJS scope belonging to ng-include directive – in this example it is the scope in mainController because ng-include is within mainDiv and mainController is associated with mainDiv. So I modified mainController as follows – <\/p>\n
\n
controller (\n\t\"mainController\"<\/span>,\n\t[\n\t\t\"$scope\"<\/span>,\n\t\tfunction<\/span> ($scope)\n\t\t{\n\t\t\t$scope.$on(\"$includeContentLoaded\"<\/span>, function<\/span>(){\n\t\t\t\t$(\"#mainDiv\"<\/span>).trigger(\"create\"<\/span>);\n\t\t\t});\n\n\t\t\t$scope.getTemplate =<\/span> function<\/span>()\n\t\t\t{\n\t\t\t\tif<\/span> (!<\/span>window<\/span>.loggedIn )\n\t\t\t\t\treturn<\/span> \"login.html\"<\/span>;\n\t\t\t\telse<\/span>\n\t\t\t\t\treturn<\/span> \"main.html\"<\/span>;\n\t\t\t}\n\t\t}\n\t]\n)\n<\/pre>\n<\/div>\n
Notice\u00a0$scope.$on(“$includeContentLoaded” …),\u00a0$<\/span>(<\/span>“#mainDiv”)<\/span>.trigger<\/span>(<\/span>“create”) is called in this event handler. You can see updated application here<\/a> – notice that buttons and text fields appear properly now.<\/span><\/p>\n
So important thing to remember is that you need to apply JQueryMobile styles to dynamic pages not loaded using JQueryMobile by triggering create event. And if you are loading such pages using ngInclude then call trigger function of JQueryMobile in the handler for\u00a0$includeContentLoaded event.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
I was\u00a0experimenting with using AngularJS and JQueryMobile together and\u00a0loading pages dynamically.\u00a0The page loading and routing can either be handled by JQueryMobile ($.mobile.pageContainer.pagecontainer(“change”,“page_name”)) or AngularJS. With AngularJS you can use $route\u00a0service along with ngView\u00a0and\/or use\u00a0ngInclude\u00a0. ngInclude looked easy enough to start with, but did not turn out to be that easy. I will take as simple … <\/p>\n
Continue reading “AngularJS +  JQueryMobile and Dynamic Loading of pages”<\/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":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[106,10,30,1],"tags":[107,108,31],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-kr","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1267"}],"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=1267"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1267\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1267"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}