loopback-angular-ui-router

loopback-angular-ui-router is a starter pack for creating websites hosting a LoopBack REST API presented using an AngularJS and Bootstrap (CSS) frontend. It aims to scaffold the construction of a full-stack website and aid the developer by offering a simple user experience to do that. All the hard stuff is already taken care of for you by a toolchain of robust, popular and conceptually similar libraries and tools.

This module relies heavily on the Yeoman project scaffolding tool, so if you like Yeoman you'll enjoy this!

If you're looking for the Yeoman generator of this module, check out generator-loopback-angular-ui-router.

Install

Make sure you have strongloop, yeoman, generator-ui-router and generator-loopback-angular-ui-router installed globally, then use the yo command to generate your module.

npm install -g strongloop
npm install -g yeoman
npm install -g generator-angular-ui-router
npm install -g generator-loopback-angular-ui-router

yo loopback-angular-ui-router

Don't skip any of these global installs! This module relies upon them to provide access to GUI and command line operations described in the features below.

Features

Bootstrap, AngularJS and UI Router

Take advantage of AngularJS v1.4.x, one of the most popular JavaScript SPA frameworks out there. Use two-way data-binding, heirarchical routing, and the excellent REST API interface provided by this module to create a great user experience.

Bootstrap CSS v3.3.x gives you a familiar toolkit to begin laying our your site, and you don't have to know SASS to work with it. Want to include Bootstrap's JS features?

npm install --save jquery

and add the jQuery and Bootstrap JS scripts into index.html. Want to replace bootstrap all together?

npm uninstall --save bootstrap

then remove the script tag from index.html. Use whatever tools suit you best, without a fight.

Includes html5-boilerplate and es5-shim to polyfill older browsers' JS features while building toward web standards. Apply further polyfill as necessary.

Grunt build process

Keep your production website's footprint small without a ton of work by letting build automation do that for you. The grunt command line build tool makes development, testing, and preparation for deployment all fairly straightforward.

The AngularJS frontend was generated by Yeoman using generator-angular-ui-router, which provides an easy-to-use by extremely mature build process that runs jshint and karma/jasmine tests each time grunt is called. It concatenates, minifies, and respects the script include order as defined in index.html.

grunt is widely accepted, written with CommonJS and has a huge task ecosystem. There are many package managers, but this one is here to stay, so stop worrying about your build tool becoming obselete and just do something for once!

Use Strongloop Arc and the command line

Run slc arc to launch Strongloop Arc -- a GUI editor for your LoopBack model relationships, datasources, middleware and REST API. Building an API has never been simpler.

Use slc loopback:<command> at the command line to create LoopBack models, datasources, boot-scripts and more. Read the slc loopback manual.

Use yo angular:<command> at the command line to create AngularJS views, controllers, services and more. Read the yo angular manual.

Automates LoopBack REST API glue code

Automatically generate injectable services in AngularJS for any model exposed by the LoopBack REST API each time you run grunt. The task manager runs grunt-loopback-sdk-angular to update a set of ngResource services from the REST API configuration in LoopBack so you don't have to.

Test with Karma and Jasmine

This module comes configured for testing and is preconfigured and there is an example test created as a template for you to begin testing for youself if you're new to that kind of thing. If you prefer another testing framework, just run

npm uninstall --save karma-ng-html2js-preprocessor
npm uninstall --save karma-ng-scenario
npm uninstall --save karma-jasmine
npm uninstall --save karma
rm -rf test
rm karma*

and the testing framework will be completely removed. Replace as you see fit.

Manuals, Guides and Tutorials

• LoopBack AngularJS SDK getting started guide
• Using Strongloop Arc
• slc loopback command manual
• yo angular command manual

Contrbutors

Jeff Rose, @DigiMachinist

Copyright and License

Code and documentation copyright 2015 Jeff Rose. Code released under the MIT license.