CODEWITHSUNDEEP
angularjsswaggerswagger-ui
Mishi
Mishi

Reputation: 676

Swagger in Angularjs

I am trying to add swagger in my Angularjs project

OBJECTIVE

I want to test my API via swagger by sending a payload and in return I will get response code 200.

I am following tutorials:

https://www.phpflow.com/jquery-plugin-2/how-to-integrate-swagger-with-angular/

http://orange-opensource.github.io/angular-swagger-ui/ (WORKING DEMO of TUTORIAL)

What I have done so far:

  1. Added these two libraries in my project 

    <script src="bower_components/angular-swagger-ui/dist/scripts/swagger-ui.js"></script>

<link rel="stylesheet" href="bower_components/angular-swagger-ui/dist/css/swagger-ui.min.css">

HTML

<div >
        <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" method="post" 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>

CONTROLLER

$scope.url = 'https://server.event.com/alert/event/1.0/eventpublicationmanagement_01/events';
// error management
$scope.myErrorHandler = function(data, status){
    alert('failed to load swagger: '+status);
    console.log(data);
};
// transform try it request
$scope.myTransform = function(request){
    request.headers['Authorization'] = 'Bearer 123123123-1231-123-134313313c';
};

But when I click on explore, I get 405 error that method is not allowed. My method is post but browser is somehow sending GET. My token is also not sending in request. How can I solve that?

enter image description here

Also, I am confused because with working of swagger, My API is published on WSO2 API Store which contains a default swagger and my API swagger looks something like this:

enter image description here

If I shall call my API by clicking on explore button, will it show/return an option like API Store is showing? -> /eventpublicationmanagement_01/events

How will I set my JSON as well?

I am very confused. Some guidance and help will be very much appreciated.

Upvotes: 0

Views: 3367

Answers (1)

Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3139

To use Swagger You need a swagger.json file. More info You can find in the link: How to generate swagger.json

Upvotes: 1

Related Questions