angular-crud-kit

AngularJS module to structure your view-models with JSON schemas, build forms, and interact with RESTful API services

Features

• ck-form and ck-field tags help you structure and reuse form controls.
• (Coming soon) ck-field will automatically choose the correct form control template using swagger-spec.

• JsonApi service manages your api calls, currently supports the Swagger Specification. No need to write your own HTTP requests. SDK for your server's API is generated using swagger-js. Just configure these settings in your app module config:

  crudKitConfigProvider.set('schemaType', 'swagger');
  crudKitConfigProvider.set('schemaUrl', 'http://api.yourserver.com/explorer/resources');
  

Quick Start

• Install via bower:

  bower install crud-kit
  

• Include the scripts:

  <script src="bower_components/crud-kit/dist/scripts/crudKit.js"></script>
  

• Add to crudKit your angular module's dependencies:

  var myApp = angular.module('crudKit.demo', ['crudKit']);
  

• Configure the schema to use for the api. Also shown is an example of how to wait for api to be ready.

  myApp.config(['crudKitConfigProvider', function ($routeProvider, crudKitConfigProvider) {
      $routeProvider
          .when('/', {
              templateUrl: 'views/main.html',
              controller: 'MainCtrl',
              resolve: {
                  JsonApi: function(JsonApi){
                      return JsonApi.ready;
                  }
              }
          });
  
      crudKitConfigProvider.set('schemaType', 'swagger');
      crudKitConfigProvider.set('schemaUrl', 'http://api.yourserver.com/explorer/resources');
  });
  

• Start building forms:

  <!--controller example -->
  <script>
      angular.module('crudKit.demo')
          .controller('AboutCtrl', function ($scope, $rootScope, $filter, JsonApi, JSONValidator, crudKitConfig) {
              $scope.api = JsonApi;
              $scope.widgetSchema = crudKitConfig.schemas.Widget;
  
              $scope.widgetInstance = {
                title: "TEST TITLE"
              };
  
              $scope.saveWidget =function(model, next){
                  console.debug(model);
                  next(null, model);
              };
          });
  </script>
  <!--ckForm Directive Example-->
  <ck-form name="widgetForm" schema="widgetSchema" model="widgetInstance" on-save="saveWidget($model, $next)" debug="true">
      <div class="col-sm-6">
          <ck-field field-name="title"></ck-field>
          <ck-field field-name="summary" options="{ template: 'textarea', label: 'Summary' }"></ck-field>
      </div>
  </ck-form>
  

• Interacting with RESTful resources:

  // some_controller.js
  angular.module('yourApp')
      .controller('SomeCtrl', ['$scope', 'JsonApi', function($scope, JsonApi){
          $scope.save = function(model, cb){
              JsonApi.ResourceName.upsert(model, cb);
          };
      }]);
  

Demo

After installing with bower, browse to bower_components/crud-kit/dist/index.html

TO DOs

• Update example code
• Cleanup docs with real example code
• ckField auto-detect form control type from swagger-spec.
• Default CRUD actions for ckForms using JsonApi service.
• ckGrid directive.
• Implement more default input templates.
• Tests (i know i know...)