Skip to content
AngularJS service for communicating with endpoints described by swagger.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
dist
example
src
.gitignore
.travis.yml
LICENSE-APACHE2
README.md
bower.json
gulpfile.js
package.json

README.md

swagger-angular-client

AngularJS service for communicating with endpoints described by swagger v1.2.

Usage

To use, include one of these files in your application:

You may also bower install swagger-angular-client to install using bower. Once you've included the script, you can include the swagger-client module as a dependency to your existing application and use the swaggerClient service to generate api clients.

Schemas can be generated using fetch-swagger-schema.

Simple Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <script src="angular.js"></script>
</head>
<body ng-app="myApp" ng-cloak>
    Pet: {{ pet.name || 'Loading...' }}

  <script src="swagger-client.js"></script>

  <!-- `petStoreSchema.js` exposes the JSON object generated by [fetch-swagger-schema] when run against http://petstore.swagger.wordnik.com/api/api-docs to the window as `PetStoreSchema` (see `examples/petStoreSchema.js`). -->
  <script src="petStoreSchema.js"></script>

  <script>
  angular.module('myApp', ['swagger-client'])
    .run(function($rootScope, swaggerClient){
      var api = swaggerClient(PetStoreSchema);

      api.auth('secret-key');
      api.pet.addPet({id: 1, name: 'Bob'}).then(function(){
        return api.pet.getPetById(1);
      }).then(function(pet){
        $rootScope.pet = pet;
      });
    });
  </script>
</body>
</html>

Real-world Example

'use strict';

// First, we need to define a provider for the api client, we'll call it 'myAPI'
angular.module('data').provider('myAPI',
['window', function(window){
  var schema = window.API_SCHEMA,
    auth;

  // Override the base path to enable pointing to different backends
  this.basePath = function(basePath){
    schema.apis.forEach(function(api){
      api.apiDeclaration.basePath = basePath;
    });
  };

  // Allows for setting the auth token during .config() phase of app start up.
  this.auth = function(authToken){
    auth = authToken;
  };

  // Instantiates the swagger-angular-client
  this.$get = ['$rootScope', 'swaggerClient', function($rootScope, swaggerClient){
    var api = swaggerClient(schema);
    api.authorization(auth);

    // Handle any future api token changes
    $rootScope.$on('api token changed', function($event, authToken){
      api.authorization(authToken);
    });

    return api;
  }];
}])

// Now we'll configure myAPI during app start up by setting the auth token.
// You would decide where this token comes from. Maybe it's ok to embed directly
// in the code. Maybe it comes from a cookie. Maybe you don't even need auth.
// This all depends on your auth scheme.
.config(['myAPIProvider', function(myAPIProvider){
  myAPIProvider.auth(THE_TOKEN);
}])

// Finally, we can start using myAPI in the application
.run(['myAPI', function(myAPI){
  // This would be an application-specific call. In this example, we make an
  // http request to a api endpoint to notify the metrics resource that the
  // application has loaded.
  myAPI.metrics.appLoaded({
    time: Date.now()
  });
}]);
You can’t perform that action at this time.