Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

angular-sf-load

1.0.0 • Public • Published

angular-sf-load

Manage AngularJS scope load.

NPM version Build status Dependency Status devDependency Status Coverage Status Code Climate

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.

Keywords

none

install

npm i angular-sf-load

Downloadsweekly downloads

11

version

1.0.0

license

MIT

last publish

collaborators

  • avatar