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
– Tomasz Waszczyk, Commented Sep 5, 2017 at 8: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. — Maheen Nasir
– Maheen Nasir, Commented Sep 5, 2017 at 8: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
– Tomasz Waszczyk, Commented Sep 5, 2017 at 8:48
In my case I am using wso2 ESB. Is it necessary to configure it via backend? — Maheen Nasir
– Maheen Nasir, Commented Sep 5, 2017 at 8:50
Yes. From client side You can import the file. But previously You need to have the file. — Tomasz Waszczyk
– Tomasz Waszczyk, Commented Sep 5, 2017 at 8:57

Tomasz Waszczyk · Accepted Answer · 2017-09-05 08:57:01Z

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 5, 2017 at 8:57

Tomasz Waszczyk

3,2196 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maheen Nasir Over a year ago

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

Maheen Nasir Over a year ago

This is what I am doing right now $scope.url = $scope.swaggerUrl = '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 })); };

Maheen Nasir Over a year ago

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?

Maheen Nasir Over a year ago

Thanks alot... :)

Collectives™ on Stack Overflow

Swagger in Angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related