readme

Author: msarsha

README.md

@@ -1,13 +1,29 @@
 # angular-loading-spinner
 Loading spinner for AngularJS
 
-__DEMO:__ https://sarsha17.github.io/angular-spinner/
+__DEMO:__ https://msarsha.github.io/angular-spinner/
 
 ### Build
 Clone the repo and run `npm install` to install dependencies and then `gulp` to build;
 
+### Dependencies:
+`angular-animate`
+
+### Setup:
+
+add spinner module as dependency
+````javascript
+angular.module('app', ['sarsha.spinner'])
+````
+load angular-animate in your html
+````html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
+````
+
+
 ### How to use:
-(default spinner template)
+
+Use the default spinner template
 
 ````html
 <div>
@@ -16,7 +32,20 @@ Clone the repo and run `npm install` to install dependencies and then `gulp` to
 </div>
 ````
 
-You can place as many spinners as you like
+Use your own template:
+
+````html
+<div>
+  Your content here
+  <sarsha-spinner name="spinner1">
+    <div>
+      <span>MY OWN TEMPLATE !!</span>
+    </div>
+  </sarsha-spinner>
+</div>
+````
+
+Place as many spinners as you like
 ````html
 <div>
   Your content here
@@ -28,8 +57,9 @@ You can place as many spinners as you like
 </div>
 ````
 
+### Controlling the Spinners
 
-Control the spinner using the `spinnerService`
+#### Manualy control the spinners using the `spinnerService`
 
 ````javascript
   angular.controller('ctrl', function(spinnerService){
@@ -47,15 +77,35 @@ Control the spinner using the `spinnerService`
   })
 ````
 
-You can use your own template:
+#### Let the `spinnerHttpInterceptor` control the spinners
 
-````html
-<div>
-  Your content here
-  <sarsha-spinner name="spinner1">
-    <div>
-      <span>MY OWN TEMPLATE !!</span>
-    </div>
-  </sarsha-spinner>
-</div>
+Add the `spinnerHttpInterceptor` to your module config
+````javascipt
+  angular
+    .module('app', [])
+    .config(function($httpProvider){
+      $httpProvider.interceptors.push('spinnerHttpInterceptor');
+    })
+````
+
+The default behavior of the `spinnerHttpInterceptor` is to show and close all existing spinners.
+
+You can tell it which spinner is related to the http request by adding the `spinner` object to the `$http` config.
+
+The `spinner` object can be either a `string` for a single spinner or an `Array` for number of spinners.
+
+````javascript
+  angular.controller('ctrl', function($http){
+    this.doSomething = function(){
+      $http.get('http://url.com', {
+        spinner: 'spinner1'
+      }) 
+    }
+    
+    this.doSomething = function(){
+      $http.get('http://url.com', {
+        spinner: ['spinner1', 'spinner2']
+      }) 
+    }
+  })
 ````