How To Use Ionic & Angular q Promises?

The Deferred API

A new instance of deferred is constructed by calling $q.defer().

The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion, as well as the status of the task.

Methods

resolve(value) – resolves the derived promise with the value. If the value is a rejection constructed via $q.reject, the promise will be rejected instead.

reject(reason) – rejects the derived promise with the reason. This is equivalent to resolving it with a rejection constructed via $q.reject.

notify(value) – provides updates on the status of the promise’s execution. This may be called multiple times before the promise is either resolved or rejected.
Properties

promise – {Promise} – promise object associated with this deferred.

// for the purpose of this example let's assume that variables `$q` and `okToGreet`
// are available in the current lexical scope (they could have been injected or passed in).

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('About to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
    }
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

This code example was taken from Angular Documentation page: https://docs.angularjs.org/api/ng/service/$q

Deferred item content shows up blank on iOS and Safari in Ionic/Angular

Deferred item content shows up blank on iOS and Safari in Ionic/Angular. The item eventually shows up after you interact with it (click or drag).

There seems to be some kind of mystery issue of items not rendering until the user clicks on it. This is only broken in Safari and iOS devices.

The solution I found was to set my div item class to this:

.myItem{
   -webkit-transform: translate3d(0,0,0);
}

I don’t know yet why this fixes it, but it does for me. I originally found the solution thanks to this github issue:

https://github.com/driftyco/ionic/issues/1110

Ionic Issue With ng-click On iOS Firing Twice

There is an issue with ng-click on iOS firing twice in my app testing. After trying all sorts of event.stopPropagation it still didn’t work correctly. The issue might be related to using angular material library in your project.

I finally solved it by adding this to my app.js file

.config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
  })

How To Force Ionic/Angular Project To Use Https

This was a thing I had to look up on stack-overflow.

 this.forceSSL = function () {
    if ($location.protocol() !== 'https') {
        $window.location.href = $location.absUrl().replace('http', 'https');
     }
    };

 this.forceSSL();

You can put this function in your service file and then call it every time a page loads.