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
Name | Type | Default | Description |
---|---|---|---|
input | String | Path to the main file of your LoopBack server (usually | |
output | String | Path to the services file you want to generate, e.g. | |
ngModuleName | String | lbServices | Name for the generated AngularJS module. |
apiUrl | String | The value configured in the LoopBack application via | 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:
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.
Register sub-tasks:
grunt.registerTask('default', [ 'jshint', 'loopback_sdk_angular', 'docular', // newly added 'qunit', 'concat', 'uglify']);
Run Grunt to (re)generate files:
$ grunt
Include the generated file in your web application.
<script src="js/lb-services.js"></script>
Start the docular server to view the documentation:
$ grunt docular-server
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.å