TopGit tracks Orange-OpenSource/angular-swagger-ui on GitHub as part of the API family. The project has 136 stars. An angularJS implementation of Swagger UI
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
angular-swagger-ui is an angularJS implementation of OpenAPI UI
OpenAPI (aka Swagger) helps you documenting your RESTful API.
OpenAPI UI helps developers discovering your RESTful API by providing an online documentation with an integrated API explorer.
Warning
By default, only OpenAPI 2.0 is supported.
To handle OpenAPI 3.0.0 please add module openapi3-converter see Enable OpenAPI 3.0.0.
To handle OpenAPI 1.2 please add module swagger1-converter see Enable OpenAPI 1.2.
To handle authorization please add module swagger-auth see Enable authorization
To handle YAML please add module swagger-yaml-parser see Enable YAML
Demo
A sample app using angular-swagger-ui is available here:
angular-ui-bootstrap (required only if using Authorization)
License
All code in this repository is covered by the MIT license.
See LICENSE file for copyright details.
Getting Started
Include angular-swagger-ui as a dependency into your application
As some properties of OpenAPI specifications can be formatted as HTML:
You SHOULD include ngSanitize as a dependency into your application (avoids JS injection) if OpenAPI specifications are loaded from untrusted sources (see dist/index.html as an example)
You CAN add trusted-sources="true" as directive parameter (avoids embedding ngSanitize) if OpenAPI specifications are loaded from trusted sources (see src/index.html as an example)
You MUST at least choose one of the two previous solutions
<script type="text/javascript">
// If directive has parameter trusted-sources="true"
angular.module('yourApp', ['swaggerUi']);
...
// OR if you choosed to use "ngSanitize"
angular.module('yourApp', ['ngSanitize', 'swaggerUi']);
...
</script>
Create an HTML element in your angularJS application's template or in your HTML page
Add swagger-ui.min.js and angular.min.js at the end of the body
<body>
...
<script src="yourPathToAngularJS/angular.min.js"></script>
<script src="yourPathToAngularSwaggerUI/dist/scripts/swagger-ui.min.js"></script>
<!-- if you choosed to use "ngSanitize" -->
<script src="yourPathToAngularSanitize/angular-sanitize.min.js"></script>
</body>
Add swagger-ui.min.css and bootstrap.min.css to the head of the HTML page.
<!-- display link with url label -->
<div swagger-ui url="URLToYourOpenAPISpecification" download></div>
<!-- display link with specific key enter in swaggerTranslatorProvider -->
<div swagger-ui url="URLToYourOpenAPISpecification" download="downloadLabel"></div>
OpenAPI validator
Disable OpenAPI validator or define a custom OpenAPI validator.
If parameter not defined, the validator will be 'http://online.swagger.io/validator'
<div swagger-ui url="URLToYourOpenAPISpecification" validator-url="false or URL"></div>
Parser type
OpenAPI specification parser is chosen depending on the Content-Type of the specification response. If host serving your OpenAPI specification does not send Content-Type: application/json then you can force the parser to JSON:
oauth is not implemented, only basic and API key authorizations are implemented.
Add swagger-auth.min.js at the end of the body
<body>
...
<script src="yourPathToAngularJS/angular.min.js"></script>
<script src="yourPathToAngularSwaggerUI/dist/scripts/swagger-ui.min.js"></script>
<script src="yourPathToAngularSwaggerUI/dist/scripts/modules/swagger-auth.min.js"></script><!-- without angular-ui-bootstrap modal embedded -->
OR
<script src="yourPathToAngularSwaggerUI/dist/scripts/modules/swagger-auth-ui-boostrap-modal.min.js"></script><!-- angular-ui-bootstrap modal embedded -->
...
<script type="text/javascript">
angular
.module('yourApp', ['swaggerUi', 'swaggerUiAuthorization'])
// what is below is required for oauth2 flows 'implicit' and 'accessCode' (ie. authorizationCode)
// what is below can also be used to initialize apiKey or Basic authorizations
.config(function(swaggerUiAuthProvider) {
swaggerUiAuthProvider.configuration({
// required for oauth2 flow 'implicit' and 'accessCode' (ie. authorizationCode)
redirectUrl: 'yourPathToAngularSwaggerUI/oauth2-redirect.html'
// optional
yourSecurityName: {
apiKey: 'yourApiKeyValue' // optional, can be used to initialize api key value
},
// optional
yourSecurityName: {
login: 'yourLogin', // optional, can be used to initialize basic login
password: 'yourPassword' // optional, can be used to initialize basic password
},
// optional
yourSecurityName: {
clientId: 'yourClientId', // optional, can be used to initialize oauth2 credentials
clientSecret: 'yourClientSecret', // optional, can be used to initialize oauth2 credentials
login: 'yourLogin', // optional, can be used to initialize oauth2 credentials
password: 'yourPassword', // optional, can be used to initialize oauth2 credentials
scopeSeparator: 'scopeSeparator', // optional, can be used to configure oauth2 scopes separator, default value is space
// optional, can be used to configure oauth2 additional query params to tokenUrl and authorizationUrl
queryParams: {
'yourQueryParamName': 'yourQueryParamValue'
...
},
},
});
})
...
</script>
</body>
Enable OpenAPI [aka Swagger] 1.2
See OpenAPI 1.2 spec.
Add swagger1-converter.min.js at the end of the body
Modifying angular-swagger-ui can be achieved by writing your own modules. As an example your can have a look at the ones in src/scripts/modules.
A module is an object (can be a service) having a function execute which must return a promise.
You can make your module modifying behaviours at different phases:
BEFORE_LOAD: allows modifying OpenAPI specification request before it is sent
BEFORE_PARSE: allows modifying OpenAPI specification after it has been loaded
PARSE: allows adding an OpenAPI parser for content types other than JSON
BEFORE_DISPLAY: allows modifying internal parsed OpenAPI specification before it is displayed
BEFORE_EXPLORER_LOAD: allows modifying API explorer request before it is sent
AFTER_EXPLORER_LOAD: allows modifying API explorer response before it is displayed
angular
.module('myApp', ['swaggerUi'])
.service('myModule', function($q) {
this.execute = function(data) {
var deferred = $q.defer();
// if nothing done: call deferred.resolve(false);
// if success: call deferred.resolve(true);
// if error: call deferred.reject({message: 'error message', code: 'error_code'});
return deferred.promise;
}
})
.run(function(swaggerModules, myModule){
// default priority is 1
// higher is the priority, sooner the module is executed at the specified phase
swaggerModules.add(swaggerModules.BEFORE_LOAD, myModule, priority);
})
...
How active is development on Orange-OpenSource/angular-swagger-ui?
The most recent commit recorded on Orange-OpenSource/angular-swagger-ui was 5.6 years ago, based on the GitHub push timestamp. The repository has 70 forks — one of the better signals of community interest.
How many stars does Orange-OpenSource/angular-swagger-ui have?
Orange-OpenSource/angular-swagger-ui has 136 GitHub stars — refresh the page for the live number, or check github.com/Orange-OpenSource/angular-swagger-ui. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
What language is Orange-OpenSource/angular-swagger-ui written in?
Orange-OpenSource/angular-swagger-ui is written primarily in JavaScript. GitHub's language field is based on the largest share of bytes in the default branch.
What license does Orange-OpenSource/angular-swagger-ui use?
Orange-OpenSource/angular-swagger-ui is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
What topics is Orange-OpenSource/angular-swagger-ui associated with?
GitHub's repository topics for Orange-OpenSource/angular-swagger-ui: "angular", "api", "api-documentation", "api-rest", "openapi", "openapi3", "swagger", "swagger-ui", "swagger1", "swagger2". TopGit's editorial category is API.
Where can I see Orange-OpenSource/angular-swagger-ui in action?
The project maintains a homepage at http://orange-opensource.github.io/angular-swagger-ui/. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about Orange-OpenSource/angular-swagger-ui?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/Orange-OpenSource/angular-swagger-ui is the definitive source.
Read full README in the tab above.
Is angular-swagger-ui worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of angular-swagger-ui.
/angular-swagger-ui