Ionic Framework Infinite Scrolling

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:

See the Pen gnFyj by Sunny (@sunnycyk) on CodePen.

 

Read More

Using d3 with dependency injection in AngularJS

Today I will show that how to use d3 with Angular JS.

Usually, what you can do is add d3.js to your index.html file.  However, in order to keep global namespace clean in your angular module, it is better by using dependency injection like how Angular JS normally does.

To start, just create a d3 provider for the d3Service.

We use promise here to assure that d3 will be loaded in our browser.

To use d3 Service, just inject d3Service like other in AngularJs. For instance,

 

Read More