🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

angular-sf-load

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-sf-load

> Manage AngularJS scope load.

1.0.0
latest
npm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

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.

FAQs

Package last updated on 18 May 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts