"No spinner named 'xyz' is registered."

[chevcast]

For the most part the spinner library is pretty intuitive, but there's one little hiccup that is very common. Let's use the following code as an example:

<div ng-app="myApp" ng-controller="myController">
  <spinner name="mySpinner">
    <h1>Loading...</h1>
  </spinner>
</div>

var myApp = angular.module('myApp', ['angularSpinners']);
myApp.controller('myController', function (spinnerService, $http) {
  spinnerService.show('mySpinner');
  $http.get('/api/some/resource')
    .success(function (result) {
      // do stuff
    })
    .catch(function (err) {
      // handle error
    })
    .finally(function () {
      spinnerService.hide('mySpinner');
    });
});

Here's a demo of the above code: http://codepen.io/Chevex/pen/zGRZxV?editors=101

If you open the above demo and pop open the developer console, you'll notice that there is an error:

Error: No spinner named 'mySpinner' is registered.

If you're wondering why this happens, the answer is simple. Angular travels down the DOM hierarchy parsing directives. When it gets to our <div> with an ng-controller directive, it will look for the controller function specified and run the controller logic. At this point it has _not_ gotten to the <spinner> directive yet, which means the spinner directive logic has not run and the spinner has not registered with the spinnerService yet.

This is simply a problem with the order that Angular does things. To get around this I've provided you with the onLoaded option. With that option you can fire logic in your controller once the spinner has registered itself with the service. Here's an example:

<div ng-app="myApp" ng-controller="myController">
  <spinner name="mySpinner" on-loaded="getResource()">
    <h1>Loading...</h1>
  </spinner>
</div>

var myApp = angular.module('myApp', ['angularSpinners']);
myApp.controller('myController', function ($scope, spinnerService, $http) {
  $scope.getResource = function () {
    spinnerService.show('mySpinner');
    $http.get('/api/some/resource')
      .success(function (result) {
        // do stuff
      })
      .catch(function (err) {
        // handle error
      })
      .finally(function () {
        spinnerService.hide('mySpinner');
     });
  };
});

Demo: http://codepen.io/Chevex/pen/JdpWXd

You can see in the demo that the code now works properly and shows the spinner right away with no errors. However, in this simple case there is an even easier solution. If all you need to do is show the spinner immediately then you can tell the spinner to show itself by default, even before it has registered itself with the spinnerService.

<spinner name="mySpinner" show="true">
  <h1>Loading...</h1>
</spinner>

Now the spinner will show itself immediately. By the time you need to hide the spinner it is likely that it will be registered by then. This solution is very simple and doesn't offer as much flexibility as using the onLoaded option does, but it works for the simple cases where you just want the spinner to show by default.

---

Hopefully this helps clear up some confusion with this common issue :)

[darthmolen]

How would I use vm ControllerAs syntax instead of $scope, as I try to stay away from that black hole?