How to integrate swagger with angular

Swagger is awesome api for your RESTful API.Swagger helps to powerful representation of your RESTful API.The Swagger api available in almost every modern programming language and deployment environment.The Swagger-enabled API can be used to create interactive documentation, client SDK generation and discover ability.

Swagger is supporting to almost every modern programming language and deployment environment.Swagger helps companies like Apigee, Getty Images, Intuit, LivingSocial, McKesson, Microsoft, Morningstar, and PayPal build the best possible services with RESTful APIs.

Swagger UI helps developers discovering your RESTful API by providing an online documentation with an integrated API explorer.

You can also check other tutorial of angular,

• Angular Loading spinner or Preloading image with finally
• How to integrate swagger with angular

In this quick tutorial i will let you know how to integrate swagger on your angular application.

You can download swagger angular from https://libraries.io/bower/angular-swagger-ui.There are following stesp to need to integrate swagger on your angular project.

How to integrate swagger on your angular application

Step 1: Download angular swagger api from here

Step 2: Include below js and css file in your application.

 <!--Angular Swagger-->
   <script src="yourPathToAngularSwaggerUI/swagger-ui.js"></script>
   <script src="yourPathToAngularSwaggerUI/swagger-ui-templates.js"></script>
   <script src="yourPathToAngularSwaggerUI/swagger-model.js"></script>
   <script src="yourPathToAngularSwaggerUI/swagger-client.js"></script>
           <link rel="stylesheet" href="yourPathToBootstrapCSS/bootstrap.min.css">
              <link rel="stylesheet" href="yourPathToAngularSwaggerUI/dist/css/swagger-ui.min.css">

Step 3: Inject Swagger UI into your module.
var module1 = angular.module("testApp",['swaggerUi']);

Step 4: Define error handler and call rest json file for sample REST service.You can call below code on controller or in method.

//sample json file 
$scope.url = 'http://petstore.swagger.io/v2/swagger.json';
// error management
$scope.myErrorHandler = function(data, status){
 alert('failed to load swagger: '+status);
};
// transform try it request
$scope.myTransform = function(request){
    request.headers['api_key'] = 's5hredf5hy41er8yhee58';
};

Step 5: Need to define html layout for swagger file upload and access.

<div ng-controller="YourCtrl">




<h3 class="dispInline">Rest Json file:</h3>




        <form name="urlForm" ng-submit="urlForm.$valid&&(swaggerUrl=url)" class="form-inline dispInline">
            <input type="url" placeholder="swagger URL" class="form-control" id="url" name="url" ng-model="url" required="" style="width:400px">
            <button type="submit" class="btn btn-primary">explore</button>
        </form>




<div swagger-ui="" url="swaggerUrl" try-it="true" error-handler="myErrorHandler" transform-try-it="myTransform"></div>




</div>

Step 6: Put swagger-ui.html(This file will exist in downloaded folder of swagger api which was downloaded in step 1) file into your view folder where you are calling swagger api.

I hope it help you, if you have any questions please comment on this post.