Month: February 2014

Asynchronous Loading Google Map API

sunny

I created an Angular Service Provider that asynchronous loading Google Map API.

Here is an source code and example how to configure the language setting for the map.  It is easy to add other options to it as you wish in the source code.

angular.module('googleMapAPI', [])
.config(function(googleMapServiceProvider) {
googeMapServiceProvider.setLang('zh-HK'); // Configuration that loading Google Map API in Traditional Chinese
})
.provider('googleMapService', function () {
var language = 'en-US';
function loadScript($document, callback, success) {
var scriptTag = $document.createElement('script');
scriptTag.id = "google-map-script";
scriptTag.type = "text/javascript";
scriptTag.src = 'https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&callback=mapReady&region=HK&language=' + language;
$document.getElementsByTagName('body')[0].appendChild(scriptTag);
}
this.setLang = function(lang) {
language = lang;
}
this.$get = ['$document', '$q', '$window', function($document, $q, $window) {
var deferred = $q.defer();
loadScript($document[0]);
$window.mapReady = (function(deferred) {
return function() {
deferred.resolve(google);
delete $window.mapReady
}
})(deferred);
return deferred.promise;
}];
})
view raw googlemap.js hosted with ❤ by GitHub

Read More

Ionic Framework Infinite Scrolling

sunny 1 Comment

Ionic Framework is very friendly to use and implement, but when dealing with large dataset with ng-repeat in list item in the view, the performance becomes very poor.

To handle this problem, by appending subset of data each time to the view such as infinite scrolling will be helpful to enhance the user experience and performance.  Although I could not find any documentation in Ionic Framework Doc about infinite scrolling, there is an setting on-infinite-scroll on content directive.

If your data array is already filled in with data, one way to play with your data array in ng-repeat is combine it with filter limitTo.  By limiting your data to display, loading list on the page will be smooth.  So when scrolling down, you can change the parameter in your on-infinite-scroll function for limitTo .   

Here is an example:

<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
</head>
<body>
<pane ng-controller="MainCtrl">
<header-bar title="'Infinite Scroll Example'">
</header-bar>
<content has-header="true" padding="true" on-infinite-scroll="addMoreItem">
<div class=" list padding">
<div ng-repeat="item in items | limitTo:numberOfItemsToDisplay" class="item" type="item-text-wrap">
<h3>{{item}}</h3>
</div>
</div>
</content>
</pane>
</body>
</html>
view raw example.html hosted with ❤ by GitHub
angular.module('myApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.numberOfItemsToDisplay = 20; // number of item to load each time
$scope.items = getData();
function getData() {
var a = [];
for (var i=1; i< 1000; i++) {
a.push(i);
}
return a;
}
$scope.addMoreItem = function(done) {
if ($scope.items.length > $scope.numberOfItemsToDisplay)
$scope.numberOfItemsToDisplay += 20; // load 20 more items
done(); // need to call this when finish loading more data
}
});
view raw infinitescroll.js hosted with ❤ by GitHub

 

Read More

Ionic Framework Tab Solution

sunny

Today I was playing with Ionic Framework, and found there is small problem when using Tabs and reload the tab page that is not on the first page in the web browser.  The history stack is lost and so that the back button is disappeared.  (For example, I have a home tab, and home tab have multiple pages.  if a link on first page is clicked, then second page will appear, and back arrow button that link to the first page will appear on the header.  The history stack is keeping track by Angular. However, if refresh the browser on second page, the back arrow will not show up because all state will be gone as Angular restarted.)

Furthermore, even if I click on the Tab again, it will not bring me back to the first page and throw an error (Cannot call method querySelectorAll).

In order to avoid this happen, a small trick can be done by using Angular’s $location service in module.run() .  When the angular app is reload on your browser, $location service just make a redirection to your App’s first page.  and that’s it, so that your webapp will always start from the first page when reloaded!

For example,

angular.module(‘ionicApp’, [‘ionic’]).run(function($location) {$location.path(‘#/tab/firstpage’);});

P.S.  I think this only need to apply to Web app on web browser.  For PhoneGap App, I don’t think there is issue for this since your app will not reload from other page.

Read More