The goal is to have a starter project which can be used to quickly build an API with a frontend that are easily extended.
Features and implemented projects
- A Loopback REST API with authentication enabled built on the Loopback Generator
- A GUI built with AngularJS based on the Angular Generator
- Angular UI-Router
- JSON-based based forms by angular-formly
- Notifications by angular-toasty
- File upload with Loopback storage services
- Admin template powered by SB-Admin
- Markdown Editor with live preview with angular-markdown-editor
- Bunch of useful filters for AngularJS: a8m/angular-filter
- t4t5/sweetalert provided by oitozero/ngSweetAlert
Permissions on user actions (non-admins cannot access advanced functions)
permissions on content items (non-admins can only edit own content, etc)
Social authentication based on Passport.
Detect if API is online HubSpot/offline?
Loading indicators Urigo/angular-spinkit?
Installation depends on
bower installed globally.
Checkout this project:
git clone https://github.com/beeman/loopback-angular-admin.git
Install the Node packages:
Install the Bower packages:
Run a test to see if all is well:
Clone, install and run in a oneliner
git clone https://github.com/beeman/loopback-angular-admin.git && cd loopback-angular-admin && npm install && bower install && grunt && npm start & grunt serve
The project is separated in a server and a client.
To run the server you issue the command:
Or to run it with nodemon (needs
nodemon installed globally). This will
automatically restart the server when you change its code:
npm run dev
Rebuild the lb-services.js file with the correct
API_URL for development.
To run the client you issue the command:
It will open the project in your default browser with livereload enabled. This will take care of reloading the page when you change your code.
Connect to a database
You can specify the URL to the MongoDB database you want to use with the
MONGODB_URL environment variable.
MONGODB_URL="mongodb://localhost:27017/loopback-angular-admin" npm start
INITDB to true if you want to load the initial dataset, which creates the admin user. The memory database (default) does this automatically.
INITDB=true MONGODB_URL="mongodb://localhost:27017/loopback-angular-admin" npm start
For development you'd want to look into yeoman.
The API is built with generator-loopback.
The GUI is built with generator-angular.
These should help you quickly add code to your project. Further details tailored to this project might follow in the future.
These commits might be useful when extending the functionality.
- Add support for MongoDB databases
- Add custom method to the API
- Add a complete model in the API and client
- Rename a model
If you have any problems please contact me.