Chinese Documentation : AngularJS Grunt plugin

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

grunt.initConfig({
  loopback_sdk_angular: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      options: {
        // Target-specific options go here.
      }
    },
  },
});

Options

NameTypeDefault

Description

inputString 

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

outputString 

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

ngModuleName
StringlbServices

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
    });

    Visit grunt-docular.com to learn more about the Docular configuration.

  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
Non-public Information

The LoopBack Full Stack example application provides an example of using AngularJS SDK with Loopback.  Get the example application as follows:

$ git clone https://github.com/strongloop/loopback-example-full-stack.git
$ cd loopback-example-full-stack/server
$ npm install grunt-docular
$ npm install

Now run the gruntfile:

$ grunt

You'll see some output. In particular, note:

>> Generated Angular services file "../client/js/lb-services.js"

This is the client JavaScript file that has the AngularJS services.

Run the example as follows:

$ slc run

The app's home screen looks as shown below. it's a very simple banking app. You can also view the API explorer at http://0.0.0.0:3000/explorer.å