posted by jwerner on Friday, August 8, 2014 1:18 PM

This tutorial explains using angular-florm, an object-relational mapper with Angular.js.


We will create a small angular.js app which shows a list of users.

A user has the properties firstName, lastName and password.

We want to add new users as well as modify existing users and also delete users.


Bootstrapping the Project

Install angular-seed:

git clone angular-florm
cd angular-florm

angular-seed has preconfigured npm to automatically run bower so we can simply install the required components:

npm install

Install angular-florm:

bower install --save angular-florm

The --save option will add angular-florm to the bower.jsonfile.

Adding Routes

Edit the file js/app.js:

'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
  // add angular-florm:
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  // add routes for users
  // list view
  $routeProvider.when('/users', {templateUrl: 'partials/users/list.html', controller: 'UsersCtrl'});
  // add new user:
  $routeProvider.when('/users/add', {templateUrl: 'partials/users/form.html', controller: 'UsersCtrl'});
  // edit existing user:
  $routeProvider.when('/users/:id', {templateUrl: 'partials/users/form.html', controller: 'UsersCtrl'});
  $routeProvider.otherwise({redirectTo: '/view1'});

Creating the Controller

Edit app/js/controllers.js:

angular.module('myApp.controllers', [])
  .controller('MyCtrl1', ['$scope', function($scope) {
  .controller('MyCtrl2', ['$scope', function($scope) {
  // Users controller:
  .controller('UsersCtrl', ['$scope', '$routeParams', '$location', function($scope, $routeParams, $location) {
    // Initiate florm
    var $florm = angular.injector(['myApp']).get('$florm');
    // Get Users ORM
    var Users  = $florm('users');
    // Set default title and button tag
    $scope.title="Add User";
    // Edit an existing user?
    if ($ {
        // Get user object
        $scope.user = Users.find($;
        // Change title and button tag
        $scope.title="Edit User";
    // Add new user?
    } else if($location.path() === '/users/add') {
        $scope.user ={name: '', password : ''});
    // Get all users objects
    $scope.users = Users.all();
    // sort by firstName
    // [Add User] button clicked
    $scope.addUser = function () {
    // [Create/Update] button clicked
    $ = function () {
    // [Cancel] button clicked
    $scope.cancel = function () {
    // _Delete_ link clicked
    $scope.delete = function (id) {
        if (!confirm('Confirm delete')) {
            return false;
        // delete user
        // get all users
        $scope.users = Users.all();
// Sort object s dynamically by a property
function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;

Creating the Page Layout

Edit the file app/index.html:

  <div class="header">
  <h1>FLORM Example</h1>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
    <!-- Add a new 'tab': -->
    <li><a href="#/users">Users</a></li>
  <!--[if lt IE 7]>
  <!-- add a class and ng-animate: -->
  <div class="myview" ng-view ng-animate="{enter: 'fade-enter'}"></div>
    <hr />
    <div>Angular seed app: v<span app-version></span></div>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <!-- Add angular-florm: -->
  <script src="bower_components/angular-florm/lib/angular-florm.js"></script>

Creating the List View

Create the file app/partials/users/list.html:

<h2>Users List</h2>
<div class="actionBar">
    <button type="button" ng-click="addUser()">Add User</button>
    <form><input id="textinput" name="textinput" placeholder="Search" class="input-xlarge" type="text" ng-model="searchText" autoFocus /></form>
<table class="mytable">
            <th>First Name</th>
            <th>Last Name</th>
    <tr ng-repeat="user in users | filter:searchText">
            <a href="#/users/{{}}">Edit</a>
            <a href="#/users" ng-click="delete(">Delete</a>

Creating the Form View

Create the file app/partials/users/form.html:

<form ng-submit="save()">
    <label for="firstName">First Name:</label>&nbsp;
    <input type="text" name="firstName" placeholder="First Name" size="20" ng-model="user.firstName" required autoFocus /><br />
    <label for="lastName">Last Name:</label>&nbsp;
    <input type="text" name="lastName" placeholder="Last Name" size="20" ng-model="user.lastName" required /><br />
    <label for="password">Password:</label>&nbsp;
    <input type="password" name="password" size="20" ng-model="user.password" required /><br />
    <hr />
    <button type="submit">{{submitButton}}</button>
    <button type="button" ng-click="cancel()">Cancel</button>

Adding an autoFocus Directive

Edit the file app/js/directives.js:

angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
  .directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            }, 0);

Running the Application

Open a console window and enter

npm start

Open http://localhost:8000/app in your browser - enjoy!




No comments

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.

Add comment

Change Log

Created OnAug 8, 2014 1:18:14 PM CEST
Created ByJoachim Werner (jwerner)
Updated OnAug 13, 2014 1:54:04 PM CEST
Updated ByJoachim Werner (jwerner)