Miss any of our Open RFC calls?Watch the recordings here! »


1.3.0 • Public • Published


Angular Admin CRUD Tools


At Vokal we often build CRUD UI for the administration of our API services with Angular. There are certain patterns those show up pretty universally for these admin sites. Roadhouse is a set of patterns encapsulated in Angular directives and services that remove all repetitive HTML for these admin sites.

Roadhouse relies heavily on JavaScript objects for data definitions, but provides the flexibility needed to build most practical CRUD interfaces.


The HTML that Roadhouse creates is designed to be used with Bootstrap CSS, but doesn't assume the use of any of the Bootstrap JavaScript components. The subset of CSS from bootstrap that Roadhouse uses is actually quite small and would be reasonably easy for someone to optimize.

There are a few relatively light npm dependencies:

  • alertify.js
  • angular-datetime
  • angular-slugify
  • ng-dialog



Binds models to appropriate field types.


Wraps a number of rh-fields to display an editable record with some buttons to potentially create, update, and delete records.


Attach validation functions to fields, used by rh-field in particular.


The table list view for record sets. Essentially creates the required columns, column headings, and binds cell contents for loaded records.


A simple paginator that displays a list of numbers corresponding to pages to show in an rh-table and when needed left and right overflow arrows indicating additional pages exist.

Record Definition Object

In Roadhouse, the relationship between the records returned from the database and displayed in the UI is in a definition object.

The simplest possible definition would look like this and allow create, update, and delete for a record with just one field named field1:

    field1: {}

But all these options are available:

    meta: { // meta is a specially named key
        title: String,
        refreshOnSave: Boolean,
        canCreate: Boolean | Function that returns Boolean | Object { max: Number },
        canEdit: Boolean | Function that returns Boolean,
        canDelete: Boolean | Function that returns Boolean,
        editHeading: String,
        deleteHeading: String
    field1: { // all other key names match the field name from the API
        name: String,
        canView: Boolean | Function that returns Boolean,
        canEdit: "initial" | "not-initial" | "empty" | Boolean | Function that returns Boolean,
        canViewList: Boolean,
        required: Boolean,
        type: String, any valid HTML input type,
        "default": String | Boolean | Number,
        options: Array of Objects { value: String | Boolean, name: String },
        validate: Promise,
        href: String | Function that returns String,
        pattern: String of regular expression,
        placeholder: String,
        fieldDirective: String,
        fieldAttrs: Object, additional attributes and values to add to `rh-field`
    fieldN: { ... },

Meta Definition


String | Default: ""

Title is displayed as a header in rh-form and on the button to add a record.


Boolean | Default: true

Whether the value returned on POST or PUT will be used to refresh the record on the web. This is particularly useful for fields generated on the API.


Boolean, Function that returns Boolean, Object { max: Number } | Default: true

Whether a record can be added.


Boolean, Function that returns Boolean | Default: true

Whether a record can be edited.


Boolean, Function that returns Boolean | Default: true

Whether a record can be deleted.


String | Default: ""

The heading of the edit column in rh-table when it is visible.


String | Default: ""

The heading of the delete column in rh-table when it is visible.

Field Definition


String | Default: Name of key

The name is used for rh-table column headings and rh-field labels.


Boolean, "edit", Function that returns Boolean | Default: true

Whether the field can be viewed. The most common reason this would be set to false is to hide ID fields. When "edit" the field is only visible when editing, so not during creation.


"initial", "empty", Boolean, Function that returns Boolean | Default: true

Whether the field can be edited. When set to false an rh-field will be disabled. When "initial" the field is only editable during rh-form record creation, and the opposite for "not-initial". When "empty" the field is only editable if it starts out empty when editing.


Boolean | Default: true

Whether the field is displayed in rh-table.


Boolean | Default: false

Whether the field is required by rh-field validation.


String | Default: "text"

The field type for the rh-field. Options include any valid value for the type of an HTML input element, and "select". Certain values will trigger custom pattern values or different input controls. A checkbox will be rendered as a "yes" and "no" button, while a "date" type will use the angular-datetime directive.


String, Boolean, Number | Default: null

The default value for an empty field.


Array of Objects { value: String | Boolean, name: String } | Default: null

rh-field can display a list of discrete options instead of a text input using a list of buttons. To use a select field instead, type should be set to "select". If you have more than five options, you likely want to use type: "select" for design reasons, but there is no enforced limit.


Promise | Default: null

rh-field can delegate complex validations to rh-valid using a supplied promise. A promise is used to allow for validations that might require network calls to complete, but can also be used to do any field comparison, or whatever else is needed.


String, Function that returns String | Default: null

rh-table will display a link if href is provided. To include values from the current row, the property name is item, so a link to a page with the id of the current widget might be href: "widget/{{ item.id }}".


String or a regular expression | Default: null

rh-field can use custom patterns for field validation.


String | Default: null

rh-field can display a placeholder.


String | Default: null

Add a directive to the rh-field by injecting this value directly into a <div>. For example, if you'd like to use the directive angular-years-and-days to edit the field value instead of a standard HTML input type and the data type should be seconds, use fieldDirective: 'years-and-days data-as-seconds="true"'. This will cause rh-field to be a <div> instead of an input type and will write that text directly into the tag.


Object | Default: null

Additional attributes to be added to rh-field

Basic HTML

Each of the directives in Roadhouse can be used individually, but to create a typical paged table, create HTML like this.

<div rh-table
<div rh-paginator

In the above:

  • rh-definition is the definition object, explained above
  • rh-list is an array of records
  • rh-on-create is a callback function
  • rh-on-update is a callback function
  • rh-on-delete is a callback function
  • rh-loading is a boolean to tell the table whether loading is in progress, this is important so the table knows whether records are loading or the list is loaded with no records as both statuses are displayed for the user
  • rh-paginator-page-count is the total number of pages
  • rh-paginator-current-page is the current page number
  • rh-paginator-on-page-selected is a callback function

The controllers should generally be as simple as:

  • Set rh-loading to true, request the list from the API, assign results to rh-list, assign page count results rh-paginator-page-count, and set rh-loading to false
  • Use rh-on-create to POST the item to the API
  • Use rh-on-update to PUT the item to the API
  • Use rh-on-delete to DELETE the item from the API

For example:

ctrl.list = [];
ctrl.definition = {...};
ctrl.getList = function ()
    ctrl.loading = true;
    return API.getList()
        .then( function ( response )
            ctrl.list = response.data.results;
            ctrl.loading = false;
        function ()
            alertify.error( "The list could not be loaded" );
            ctrl.loading = false;
        } );
ctrl.create = function ( item ) { /* POST item to API */ };
ctrl.update = function ( item ) { /* PUT item to API */ };
ctrl.delete = function ( item ) { /* DELETE item from API */ };
ctrl.getList(); // on load




npm i roadhouse

DownloadsWeekly Downloads






Last publish


  • avatar
  • avatar