Swagger 2 UI made with Angular 2 and MaterializeCSS
Feel free to try it here: Swagger 2 UI Demo You can try with your Swagger 2 api by setting the url under the "Settings" menu
- Responsive application
- Toolbar menu
- Api list
- Api detail
- Api execution
- Possibility to switch between request types (Accept header): for now only application/json and application/xml are supported
- Possibility to switch between response types (Content-Type header): for now only application/json and application/xml are supported
- Dynamic url construction when specifying parameters
- Responses messages listed in table
- Detailed model and sub models information: fields name, types, etc...
- Charts displaying requests time
- Possibility to compare statistics from one api to another
- Possibility to switch between two css themes (settings page)
Tested on the following browsers:
- Chrome
- Firefox
- Internet Explorer 11
- Angular 2.2.1
- MaterializeCSS
- ChartJS
- Webpack
- Karma
- Jasmine
- PhantomJS
- src: Sources folder
-- app: Application files (TypeScript)
-- boot.ts: Angular2 entry point
-- app.component.ts: Booststrap component
-- app.html: Bootsrap html
-- modules: Angular 2 modules
-- app: application components (home, header and settings page)
-- main: Api List and api detail page, left menu
-- materialize: MaterializeCSS components (modals, inputs, etc..)
-- services: Angular 2 services
-- model: Swagger api typescript definition
-- pipes: Angular2 @Pipe components
-- utils: Utility classes
-- assets: Assets folder
-- icons
-- styles
- typings: TypeScript interfaces for libraries
- node_modules (not in git repository): NPM dependencies
- karma.conf.js: Karma configuration file for unit tests (not yet)
- webpack.test.config.js: Build configuration file used for unit tests (not yet)
- webpack.config.old.js: Build configuration file
- tsconfig.json: TypeScript configuration file
- tslint.json: TSLint configuration file
- typings.json: Typings configuration file
- package.json: For managing npm dependencies and running scripts
- dist: production folder
Install the node dependencies:
$ npm install
To start the server:
$ npm run start
Then go to http://localhost:3000
To build the project:
$ npm run build
- Maximilian Hengelein (@mhengelein)
- Francesco Soncina (@phra)
- Sahlikhouloud (@Sahlikhouloud)
- Wiem Zine El Abidine (@wi101)