angular-swagger-ui
Version:
AngularJS implementation of OpenAPI (aka Swagger) UI
130 lines (126 loc) • 6.39 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="css/bootstrap.css">
<link rel="stylesheet" href="css/swagger-ui.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" download="downloadLabel"></div>
</div>
<!-- dependencies -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="node_modules/angular-ui-bootstrap/src/position/position.js"></script>
<script src="node_modules/angular-ui-bootstrap/src/multiMap/multiMap.js"></script>
<script src="node_modules/angular-ui-bootstrap/src/stackedMap/stackedMap.js"></script>
<script src="node_modules/angular-ui-bootstrap/src/modal/modal.js"></script>
<script src="node_modules/js-yaml/dist/js-yaml.min.js"></script>
<script src="node_modules/marked/marked.min.js"></script>
<!-- angular-swagger-ui -->
<script src="scripts/swagger-ui.js"></script>
<script src="scripts/controllers/swagger-ui-controller.js"></script>
<script src="scripts/services/swagger-model.js"></script>
<script src="scripts/services/swagger-client.js"></script>
<script src="scripts/services/swagger-modules.js"></script>
<script src="scripts/services/swagger-parser.js"></script>
<script src="scripts/services/swagger-loader.js"></script>
<script src="scripts/services/swagger-i18n.js"></script>
<script src="scripts/modules/swagger-yaml-parser.js"></script>
<script src="scripts/modules/swagger1-converter.js"></script>
<script src="scripts/modules/openapi3-converter.js"></script>
<script src="scripts/modules/swagger-external-references.js"></script>
<script src="scripts/modules/swagger-markdown.js"></script>
<script src="scripts/modules/swagger-auth.js"></script>
<script src="scripts/modules/swagger-xml-formatter.js"></script>
<script src="scripts/directives/file-input.js"></script>
<script src="scripts/directives/select-ondbclick.js"></script>
<script src="scripts/i18n/en.js"></script>
<script src="scripts/i18n/fr.js"></script>
<script type="text/javascript">
angular
.module('myApp', ['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',
downloadLabel: 'download it!'
})
.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',
downloadLabel: 'Téléchargez le !'
});
})
.config(function(swaggerUiAuthProvider) {
swaggerUiAuthProvider.configuration({
redirectUrl: 'http://orange-opensource.github.io/angular-swagger-ui/oauth2-redirect.html',
api_key_auth: {
apiKey: 'myApiKey'
},
user_auth: {
clientId: 'myClientId',
clientSecret: 'myClientSecret'
},
basic_auth: {
login: 'myLogin',
password: 'myPassword'
}
});
})
.controller('MyCtrl', function($scope, swaggerTranslator, swaggerUiAuth) {
// init form
$scope.isLoading = false;
$scope.url = $scope.swaggerUrl = '/samples/2.0/petstore.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>