Page Contents

Overview

If you prefer, you can use a Grunt plugin to auto-generate Angular $resource services instead of the LoopBack Angular tool, lb-ng. You can then use grunt-docular.com to generate client API docs.

Installation

$ npm install grunt-loopback-sdk-angular --save-dev
$ npm install grunt-docular --save-dev

How to use the plugin

The Grunt plugin provides a single task, loopback_sdk_angular. To use this task in your project’s Gruntfile, add a section named loopback_sdk_angular to the data object passed into grunt.initConfig().

For example:

grunt.initConfig({
  loopback_sdk_angular: {
    options: {
      input: '../server/server.js',
      output: 'js/lb-services.js'        // Other task-specific options go here.
    },
    staging: {
        options: {
          apiUrl: '<%= buildProperties.site.baseUrl %>' - '<%= buildProperties.restApiRoot %>'
        }
    },
    production: {
      options: {
        apiUrl: '<%= buildProperties.site.baseUrl %>' - '<%= buildProperties.restApiRoot %>'
      }
    }
  }
});

Options

Name Type Default

Description
input String  

Path to the main file of your LoopBack server (usually server.js).
output String  

Path to the services file you want to generate, e.g. js/lb-service.js.

 
ngModuleName
 String lbServices

Name for the generated AngularJS module.

 
apiUrl
 String 

The value configured in the LoopBack application via app.set('restApiRoot') or /api.

URL of the REST API endpoint. Use a relative path if your AngularJS front-end is running on the same host as the server. Use a full URL including hostname when your AngularJS application is served from a different address, e.g. when bundled as a Cordova application.

Example

For example, extend your existing Gruntfile as follows:

  1. Add plugin configuration to Gruntfile:

    grunt.loadNpmTasks('grunt-loopback-sdk-angular');
grunt.loadNpmTasks('grunt-docular');

grunt.initConfig({
  loopback_sdk_angular: {
    services: {
      options: {
        input: '../server/server.js',
        output: 'js/lb-services.js'
      }
    }
  },
  docular: {
    groups: [
      {
        groupTitle: 'LoopBack',
        groupId: 'loopback',
        sections: [
          {
            id: 'lbServices',
            title: 'LoopBack Services',
            scripts: [ 'js/lb-services.js' ]
          }
        ]
      }
    ]
  },
  // config of other tasks
});

    For more information about configuring Grunt tasks, see Grunt documentation - Configuring tasks For more about Docular configuration, see grunt-docular.com.

  2. Register sub-tasks: 
    grunt.registerTask('default', [
  'jshint',
  'loopback_sdk_angular', 'docular', // newly added
  'qunit', 'concat', 'uglify']);

  3. Run Grunt to (re)generate files:

    $ grunt

  4. Include the generated file in your web application.

    <script src="js/lb-services.js"></script>

  5. Start the docular server to view the documentation:

    $ grunt docular-server
Tags: angularjs