Swagger in Angularjs

Question

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:

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?

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:

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.

Do you have Your own "swagger.json" file? What is Your goal? What do You want to achieve? — Tomasz Waszczyk, Sep 05 '17 at 08:31
No I don't have any swagger.json file. I just wanna add swagger to test my API by sending a payload to it. I wanna add same like WSO2 API store manager have by deafult. — Mishi, Sep 05 '17 at 08:36
I am using a swagger in my project but I have backend (java) and frontend (AngularJS) and to do it, on backend site there was a need to configure Swagger in order to get a swagger.json which tells SwaggerUI how services looks like. — Tomasz Waszczyk, Sep 05 '17 at 08:48
In my case I am using wso2 ESB. Is it necessary to configure it via backend? — Mishi, Sep 05 '17 at 08:50
Yes. From client side You can import the file. But previously You need to have the file. — Tomasz Waszczyk, Sep 05 '17 at 08:57
But my API is already performing some other functionality. How did you configure swagger via backend did you create an API in java for that? — Mishi, Sep 05 '17 at 09:29
https://dzone.com/articles/spring-boot-restful-api-documentation-with-swagger — Tomasz Waszczyk, Sep 05 '17 at 09:32

score 1 · Accepted Answer · answered Sep 05 '17 at 08:57

1

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

answered Sep 05 '17 at 08:57

Tomasz Waszczyk

2,680
5
35
73

Done and able to get swagger GUI. Thankyou so much but I still need a little help regarding to token because right now I have to enable my CORS extension in chrome for calling my API how can I pass token with that in angular js – Mishi Sep 05 '17 at 11:17
This is what I am doing right now $scope.url = $scope.swaggerUrl = 'https://my/api/json/url/EventPublicationManagement/1.0'; // console.log( $scope.url) // error management $scope.myErrorHandler = function(message, code){ alert(swaggerTranslator.translate('error', { code: code, message: message })); }; – Mishi Sep 05 '17 at 11:18
Yes but I am unable to call my swagger.json url with cors. If I enable cors with chrome extension then it works what should I do now? – Mishi Sep 06 '17 at 09:27
Thanks alot... :) – Mishi Sep 06 '17 at 09:32

Swagger in Angularjs

1 Answers1