angular-sf-load

angular-sf-load

Manage AngularJS scope load.

When it comes to load resources in an AngularJS scope, things are very repetitive. Indeed, you have to manage with loading/failed/loaded etc... states all the time.

angular-sf-load allows to do it by simply adding a promise state in your controller/components state load/actions handling. Here is a simple example of how to use it in a simple component:

<h1>Heroes</h1>

<!-- Handle all states first load wait -->
<p ng-if="$ctrl.states._all.activating">
  Loading...
</p>
<!-- Handle all states first load failure -->
<p ng-if="$ctrl.states._all.failed && !$ctrl.states._all.activated">
  Unrecoverable error: {{ $ctrl.states._all.failed.code }}
</p>

<!-- States were loaded once -->
<div ng-if="$ctrl.states._all.activated" ng-repeat="hero in $ctrl.list">
  <h2>{{ hero.name }}</h2>
  <!-- Cannot delete an hero twice + giving feedback ;) -->
  <button ng-click="$ctrl.deleteHero(hero)"
    ng-disabled="$ctrl.actions['delete:' + hero._id].loading">
    {{ $ctrl.actions['delete:' + hero._id].loading ? 'Delete' : 'Deleting' }}
  </button>
</div>
<!-- Handle hero list reload wait -->
<p ng-if="$ctrl.states.heros.reloading">
  Refreshing...
</p>

// Example stolen from the AngularJS documentation
angular
  .module('myUserListComponent', ['sf.load'])
  .component('heroList', {
    template: `path/to/template.html`,
    controller: HeroListController
  });

function HeroListController(sfLoadService, herosService) {
  var ctrl = this;

  ctrl.deleteHero = deleteHero;

  activate();

  function activate() {
    sfLoadService.loadState($scope, {
      heros: herosService.list(),
      categories: herosService.getCategories(),
    }).then(({ heros, categories }) => {
      ctrl.heros = heros;
      ctrl.categories = categories;
    });
  }

  function deleteHero(hero) {
    sfLoadService.runState(
      $scope,
      'delete:' + hero._id,
      herosService.delete(hero._id)
    );
  }
}

You can also see real world usage here.