angular-swagger-ui
Version:
AngularJS implementation of OpenAPI (aka Swagger) UI
100 lines • 5.17 kB
HTML
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<title swagger-translate="appTitle"></title>
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/swagger-ui.min.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div ng-controller="MyCtrl" class="container my-ctrl">
<h1><span swagger-translate="appTitle"></span> <span class="version">v0.6.5</span></h1>
<form name="urlForm" ng-submit="swaggerUrl=url" class="form-inline">
<input type="text" placeholder="swagger URL" class="form-control" id="url" name="url" ng-model="url" required>
<button type="submit" class="btn btn-primary" swagger-translate="explore"></button>
<button type="button" ng-click="setFr()" class="btn btn-link pull-right" ng-disabled="getLang()=='fr'">
<span class="country fr"></span>
<span swagger-translate="french"></span>
</button>
<button type="button" ng-click="setEn()" class="btn btn-link pull-right" ng-disabled="getLang()=='en'">
<span class="country en"></span>
<span swagger-translate="english"></span>
</button>
</form>
<h3 ng-show="isLoading" swagger-translate="loading"></h3>
<div swagger-ui url="swaggerUrl" loading="isLoading" api-explorer="true" trusted-sources="true" error-handler="myErrorHandler" permalinks="true"></div>
</div>
<!-- dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.13.1/js-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.7.0/marked.min.js"></script>
<!-- angular-swagger-ui -->
<script src="scripts/swagger-ui.min.js"></script>
<script src="scripts/modules/swagger-external-references.min.js"></script>
<script src="scripts/modules/openapi3-converter.min.js"></script>
<script src="scripts/modules/swagger1-converter.min.js"></script>
<script src="scripts/modules/swagger-xml-formatter.min.js"></script>
<script src="scripts/modules/swagger-yaml-parser.min.js"></script>
<script src="scripts/modules/swagger-markdown.min.js"></script>
<script src="scripts/modules/swagger-auth-ui-bootstrap-modal.min.js"></script>
<script type="text/javascript">
angular
.module('myApp', ['ngSanitize', 'swaggerUi', 'swaggerUiAuthorization'])
.config(function($anchorScrollProvider) {
$anchorScrollProvider.disableAutoScrolling();
})
.config(function(swaggerTranslatorProvider) {
swaggerTranslatorProvider
.setLanguage('en')
.addTranslations('en', {
appTitle: 'angular-swagger-ui',
explore: 'Explore',
loading: 'loading...',
error: 'Failed to generate Swagger-UI: {{code}} {{message}}',
french: 'french',
english: 'english',
japanese: 'japanese'
})
.addTranslations('fr', {
appTitle: 'angular-swagger-ui',
explore: 'Explorer',
loading: 'Chargement ...',
error: 'Impossible de générer Swagger-UI: {{code}} {{message}}',
french: 'français',
english: 'anglais',
japanese: 'japanese'
});
})
.config(function(swaggerUiAuthProvider) {
swaggerUiAuthProvider.configuration({
redirectUrl: 'http://orange-opensource.github.io/angular-swagger-ui/oauth2-redirect.html'
});
})
.controller('MyCtrl', function($scope, swaggerTranslator, swaggerUiAuth) {
// init form
$scope.isLoading = false;
$scope.url = $scope.swaggerUrl = 'http://petstore.swagger.io/v2/swagger.json';
// error management
$scope.myErrorHandler = function(message, code){
alert(swaggerTranslator.translate('error', {
code: code,
message: message
}));
};
$scope.setFr = function() {
swaggerTranslator.useLanguage('fr');
};
$scope.setEn = function() {
swaggerTranslator.useLanguage('en');
};
$scope.getLang = function() {
return swaggerTranslator.language();
};
});
</script>
</body>
</html>