Skip to content

Latest commit

 

History

History
123 lines (101 loc) · 4.64 KB

README.md

File metadata and controls

123 lines (101 loc) · 4.64 KB

API Designer

![Gitter](https://badges.gitter.im/Join Chat.svg)

Build Status Dependency Status DevDependency Status npm version Bower version

API Designer is a standalone/embeddable editor for RAML (RESTful API Modeling Language) written in JavaScript using Angular.JS. By default, the editor uses an in-browser filesystem stored in HTML5 Localstorage.

Examples of designing RAML with API Designer in the Wild

Running Locally

npm install -g api-designer

api-designer

This will start a local designer instance using the in-browser filesystem.

Embedding

The following example details how to embed the API Designer:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link rel="stylesheet" href="dist/styles/api-designer-vendor.css">
    <link rel="stylesheet" href="dist/styles/api-designer.css">
  </head>
  <body ng-app="ramlEditorApp">
    <raml-editor></raml-editor>
    <script src="dist/scripts/api-designer-vendor.js"></script>
    <script src="dist/scripts/api-designer.js"></script>
    <script>
      // This part is needed only if you want to provide your own Persistance Implementation
      // Angular Module must match "ramlEditorApp"
      angular.module('ramlEditorApp')
      .factory('MyFileSystem', function ($q, config, $rootScope) {
        var service = {};

        service.directory = function (path) {
          var deferred = $q.defer();
        
          // Your magic goes here:
           // Do deferred.resolve(data); to fulfull the promise or
           // deferred.reject(error); to reject it.
        
           return deferred.promise;
        };

        service.load = function (path, name) {
          var deferred = $q.defer();
        
          // Your magic goes here:
           // Do deferred.resolve(data); to fulfull the promise or
           // deferred.reject(error); to reject it.
        
           return deferred.promise;
        };

        service.remove = function (path, name) {
          var deferred = $q.defer();
        
          // Your magic goes here:
           // Do deferred.resolve(data); to fulfull the promise or
           // deferred.reject(error); to reject it.
        
           return deferred.promise;
        };

        service.save = function (path, name, contents) {
          var deferred = $q.defer();
        
          // Your magic goes here:
           // Do deferred.resolve(data); to fulfull the promise or
           // deferred.reject(error); to reject it.
        
           return deferred.promise;
        };

        return service;
      })
      .run(function (MyFileSystem, config, $rootScope) {
        // Set MyFileSystem as the filesystem to use
        config.set('fsFactory', 'MyFileSystem');
        
        // In case you want to send notifications to the user
        // (for instance, that he must login to save).
        // The expires flags means whether
        // it should be hidden after a period of time or the
        // user should dismiss it manually.
        $rootScope.$broadcast('event:notification',
          {message: 'File saved.', expires: true});

      });
    </script>
    <style>
      html,
      body {
        height: 100%;
      }
    </style>
  </body>
</html>

Contribution

If you want to contribute to this project, please read our contribution guide first.

License

Copyright 2013 MuleSoft, Inc. Licensed under the Common Public Attribution License (CPAL), Version 1.0