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.
Make sure you have strongloop, yo, generator-ui-router and generator-loopback-angular-ui-router installed globally, then use the yo command to generate your module.
npm install -g bower
npm install -g grunt
npm install -g grunt-cli
npm install -g strongloop
npm install -g yo
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 unless you really know what you're doing! This module relies upon them to provide access to GUI and command line operations described in the features below.
I know it's a lot of stuff, but you need most of these modules to develop in the node world on a daily basis anyway, so trust me. Okay? Okay.
Make sure that npm and bower have both installed all necessary packages:
cd <your project folder>
npm install & bower install
Once these are done, you might want to see your project running, like so...
grunt serve
If you just want to build the client files (but not watch/serve them):
grunt
And if you want to make use of loopback's built-in /explorer and /api routes, run:
node .
Open your browser to http://localhost:9000/ and enjoy. Have fun tinkering!
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.
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.
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-dev karma-chrome-launcher
npm uninstall --save-dev karma-ng-html2js-preprocessor
npm uninstall --save-dev karma-ng-scenario
npm uninstall --save-dev karma-jasmine
npm uninstall --save-dev karma
rm -rf test
rm karma*
and the testing framework will be completely removed. Replace as you see fit.
- LoopBack AngularJS SDK getting started guide
- Using Strongloop Arc
- slc loopback command manual
- yo angular command manual
Jeff Rose, @DigiMachinist
Code and documentation copyright 2015 Jeff Rose. Code released under the MIT license.