angular-sf-load
v1.0.0
Published
> Manage AngularJS scope load.
Downloads
4
Readme
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.