2017-09-05 122 views
0

我想在我的Angularjs项目扬鞭在Angularjs

目的添加招摇

我想通过发送有效载荷,作为回报,我会得到响应码200测试通过招摇我的API 。

我下面的教程:

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

http://orange-opensource.github.io/angular-swagger-ui/(教程的工作演示)

我迄今所做的:

  1. 在我的项目增加了这两个库

    <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> 

控制器

$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'; 
}; 

但是当我点击浏览,我得到405错误的方法是不允许的。我的方法是但浏览器以某种方式发送GET。我的代币也没有发送请求。我该如何解决这个问题?

enter image description here

而且,我很困惑,因为与招摇的工作,我的API公布在WSO2 API Store其中包含了默认招摇而我API招摇看起来是这样的:

enter image description here

如果我通过点击探索按钮来调用我的API,它会显示/返回一个选项,如API Store i展示? - >/eventpublicationmanagement_01/events

我该如何设置我的JSON?

我很困惑。一些指导和帮助将非常感谢。

+0

你有你自己的“swagger.json”文件吗?你的目标是什么?你想达到什么目的? –

+0

不,我没有任何swagger.json文件。我只是想通过向它发送一个有效载荷来测试我的API。我想添加像WSO2 API商店经理一样的deafult。 –

+0

我在我的项目中使用了一个招摇,但我有后端(Java)和前端(AngularJS),并且要做到这一点,在后端网站上需要配置Swagger以获得一个招摇。json告诉SwaggerUI服务的外观如何。 –

回答

1

使用Swagger您需要一个swagger.json文件。更多信息你可以在链接中找到:How to generate swagger.json

+0

完成并能够获得流浪的GUI。 Thankyou这么多,但我仍然需要一些关于令牌的帮助,因为现在我必须在铬中启用我的CORS扩展来调用我的API,我怎样才能在角js中传递令牌。 –

+0

这就是我现在正在做的 $ scope.url = $ scope.swaggerUrl ='https://my/api/json/url/EventPublicationManagement/1.0'; //的console.log($ scope.url) //错误管理 $ scope.myErrorHandler =函数(消息,代码){ 警报(swaggerTranslator.translate( '错误',{ 代码:代码, 消息:消息 })); }; –

+0

@MikiJay它工作吗? –