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





Stars: 6

Watchers: 6

Forks: 0


Ronald Ng
Ronald Ng

Module Description


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


  • 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', '');

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) {
              .when('/', {
                  templateUrl: 'views/main.html',
                  controller: 'MainCtrl',
                  resolve: {
                      JsonApi: function(JsonApi){
                          return JsonApi.ready;
          crudKitConfigProvider.set('schemaType', 'swagger');
          crudKitConfigProvider.set('schemaUrl', '');
  • Start building forms:

      <!--controller example -->
              .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){
                      next(null, model);
      <!--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>
  • Interacting with RESTful resources:

      // some_controller.js
          .controller('SomeCtrl', ['$scope', 'JsonApi', function($scope, JsonApi){
              $ = function(model, cb){
                  JsonApi.ResourceName.upsert(model, cb);


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


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