Day 1 of NG-CONF 2016 – Links!

I haven’t decide which I like more – Angular 2 or React – both amazing frameworks!  Here are the links I recorded down from the many sessions on Day 1.

Chrome tool

Style guide & Resources


Electron App

Material 2

Kiva – Micro Loans

Native Script

Lucid software chart

Angular Server Side Rendering

Microsoft Code

Angular CLI

Angular Style Guide

Dan Wahlin
Type script snippets:

Google says 250ms can make a big difference in user bounce rate

Horizon / Rethinkdb

Angular 1.5.x Components

Parsley Validation with AngularJS

This is a quick post on how I was able to get ParsleyJS validation working with AngularJS.  I used Parsley.js 2.x and Angular.js 1.3.x and 1.4.x.

How to use it

Then all you need is to add “parsley-validate” to your form element as an attribute and then parsley will be tied to that form.

For example:
<form parsley-validate>
  <!-- normal form elements here -->


  • Will load parsley when the form is loaded from angularjs.
  • This takes care of the dynamic inserting of forms into the page.


var angularParselyModule = angular.module('parsley', []);

angularParselyModule.parsleyOptions = {
  priorityEnabled: false,
  errorsWrapper: '<ul class="parsley-error-list"></ul>'

angularParselyModule.directive('parsleyValidate', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    require: '?form',
    link: function(scope, elm, attrs, formController) {
      elm.bind('$destroy', function() {

      if(!formController.parsley) {
        formController.parsley = new Parsley(elm[0], angularParselyModule.parsleyOptions);
        $timeout(function() {formController.parsley.validate()}, 100);

      scope.$on('feedReceived', function() {
        if(!formController.parsley) {
          formController.parsley = new Parsley(elm[0], angularParselyModule.parsleyOptions);

//We register our parsley logic for various element types.
angularParselyModule.directive('input', parsleyFieldDirective);
angularParselyModule.directive('textarea', parsleyFieldDirective);
angularParselyModule.directive('select', parsleyFieldDirective);

function parsleyFieldDirective($timeout) {
  return {
    restrict: 'E',
    require: '^?form',
    link: function (scope, elm, attrs, formController) {

      if(formController.parsley) {
        $timeout(function() {formController.parsley.validate()}, 150); // Need to validate after the data is in the dom.

Final Thoughts

Now with AngularJS 1.3+ we have much better form validation. The benefit of ParsleyJS is that it allows for messages to be reused much more easily then even in the new Angular 1.3. Since the Angular forms are much better integrated with HTML5, I ended up moving in that direction. In order to reuse the messages, ngMessage module can be used with Angular and is much better at reuse though, I made some slight changes to make it even more reusable. Hopefully I will share that in another post.

Using Genymotion with Ionic (Cordova, PhoneGap)

Just a quick tutorial here.  I have been using this great Ionic Framework for creating hybrid apps with AngularJS.

Genymotion is a piece of great software for Android developers. It has one of the fastest emulators out there, and now that I know about it, I can’t even imagine developing Android apps without using it. One of the things that make it stand out is that it uses Virtual Box under the hood.

Ionic has a command line for running the app on the emulator, iOS or Android. Just call ionic emulate android and it will fire up an emulator and install the app. Unfortunately, it couldn’t find the Genymotion emulator! Whhhhyyyyy?!

The issue is that it’s not Ionic or Cordova, the real thing that is called behind the scenes.  It’s because Genymotion doesn’t tell android-adb that it is an emulator. It tells that it is a device.  After realizing this – it makes sense.

We need to run as a “real device”. To do that we need to run:

ionic run android

Now it will find the Genymotion Virtual Android and everything will work.


Ionic Framework / AngularJS Problem Using Infinite Scroll & Refresher

I started using the Ionic Framework for an app that I am creating.  It uses Angular.JS and allows one to really get a simple app up and running fairly quickly.  Part of the app that I am working on needs to use the ion-refresher and the ion-infinite-scroll.

Unfortunately, adding the two together hasn’t proven to work out so well.  It might be because of the beta version of Ionic or it is the originally intention.  Whatever the case may be, I hope this helps others if they come across what I was originally seeing.

Once I added the ion-refresher div and the ion-infinite-scroll div with obvious controller code – I was seeing the following:

Ionic Infinite Scroll Issue

You may need to zoom into the picture but essentially what was happening is the infinite scroll would appear right away as it saw that it was “at the bottom” and needed to load more records.  Really what we want is to have the main “loading data” shown and then the infinite scroll to check to scroll after all data has been loaded and ready.

To fix this – I added a ng-show=’tweets.length’. This just checked to see if the tweets had been loaded yet or not. If they load then show this piece and thus show the loading.

Here is my new current code:

        <ion-refresher on-refresh="refresh()"></ion-refresher>

        <div style="text-align: center" class="padding" ng-show="!tweets.length">
            <i class="icon ion-looping" style="font-size:25px"></i><br />Loading data

            <ion-item class="item item-avatar" ng-repeat="tweet in tweets">
                <img ng-src="{{tweet.user.profile_image_url}}" />

        <ion-infinite-scroll ng-show="tweets.length"

Now my loading screen looks like the following:


Hope this helps someone else!