/swagger2-angular2-materialize

Swagger 2 ui made with Angular 2 and MaterializeCSS

Primary LanguageTypeScript

Swagger 2 Angular 2 MaterializeCSS Build Status

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

image image image image image image

Supported browsers

Tested on the following browsers:

  • Chrome
  • Firefox
  • Internet Explorer 11

Stack

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