Swagger 2 Angular 2 MaterializeCSS

Presentation

Swagger 2 UI made with Angular 2 and MaterializeCSS

Demo

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

Features

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

Screenshots

Supported browsers

Tested on the following browsers:

• Chrome
• Firefox
• Internet Explorer 11

Stack

• Angular 2.2.1
• MaterializeCSS
• ChartJS
• Webpack
• Karma
• Jasmine
• PhantomJS

Project Structure

- 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

Installation

Install the node dependencies:

$ npm install

Execution

To start the server:

$ npm run start

Then go to http://localhost:3000

To build the project:

$ npm run build

Contributors

• Maximilian Hengelein (@mhengelein)
• Francesco Soncina (@phra)
• Sahlikhouloud (@Sahlikhouloud)
• Wiem Zine El Abidine (@wi101)