angular-async-await

Overview

This module provides a service that wraps user defined async functions, and allows them to await operations that update the view model without needing to manually trigger a $digest cycle.

The problem

Consider the following controller logic, where UserService.getUser() returns a promise:

  let vm = this;
  vm.user = {name: ""};
  
  vm.getUser = async function(userName) {
    vm.user = await UserService.getUser(userName);
    console.log(vm.user.name); // --> "foo";
  }
  
  vm.getUser("foo");

This code appears to function correctly, but the changes will not be reflected in the view until a $digest cycle occurs. Invoking $scope.$apply() will fix that problem, but then you end up with stuff like this everywhere:

vm.getUser = async function(userName) {
  vm.user = await UserService.getUser(userName);
  $scope.$apply();  // don't forget this!
}

The solution.

Let $async take care of it for you.

"use strict";

let SampleViewCtrl = ['DummyService', '$async', function (DummyService, $async) {
  let vm = this;
  vm.user = {};

  vm.getUser = $async(async function (userName) {
    vm.user = await DummyService.getUser(userName);
    // vm.user is now updated in the view
  });
  
  vm.getUser("Ben Hansen");
}];

export default SampleViewCtrl;

Getting started

NOTE: This module assumes you already have babel configured properly for async/await support. Take a look at this projects .babelrc file for a list of the required plugins.

1.) Install the package

npm install angular-async-await

2.) Import the module

import "angular-async-await";

3.) Add the module to your apps dependency list

angular.module('myApp', [
  'angular-async-await'
])

4.) Inject the $async service when required (typically in a controller and/or directive).