angular-crud-kit

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

Angular Core Dependency: 1.2.16

Module License: MIT

Added by: Sam Deering

GitHub

Repository

ronalddddd/angular-crud-kit

Stats

Stars: 6

Watchers: 6

Forks: 0

Author

Ronald Ng
Ronald Ng

Module Description

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

Module stats last updated: 2015-06-04 11:08:45

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!