setup your full stack web application seed with loopback and angular

srinivas — Thu, 31 Aug 2017 04:51:38 +0000

Angular 1 Setup:

One day i had a situation to develop a web application from scratch. The next thing every one of us search for will be a seed file or a standard scaffolding. I started searching for yomen angular generator and got it. Well, I installed the yomen generator and generated the scaffolding. I got angular2 scaffolding but i need angular 1.4. I tried the old angular yomen generators available ingithub. But some many are unmaintained and have some issues with installation. So i gave up searching for generators and started searching for seeds. Seeds are like scaffoldings, which can be used on the fly. I mean we can just download it and run some commands (like npm install and bower install) to use it immediately. Many seeds are available with jade templating(without htmls in angular views). I prefer htmls and js in front end. Then i searched for angular with gulp seed and got a very good repo. Here is the repo angular-gulp-seed . Download the repo and setup your front end with angular. start running your angular app with gulp serve

Note: please note that these are issues with only angular1 but not with angular2. Angular2 came with powerful angular-cli. Which completely automates your development work flow. Please google for the cli documentation

Loopback 2 Setup:

Loopback is an opensource nodejs APIs development framework built on express. Here is the documentation about it. Please go through this link for loopback 2 installation. Loopback provides a strong scaffolding tool slc. We can generate APIs on the fly with loopback. Use slc commands to generate loopback(server side) scaffolding, which contains models and properties. Now your loopback(server side) app is ready.Once your setup is ready start your loopback application withnode . which immediately kicks npm start to start your app. That’s it, your full stack application is up and running .

Loopback’s extrordinary features:

The great feature provided by loopback framework is Angular loopback sdks. Which are angular http services for all loopback models/endpoints. Means that we need not write our http services for each and every end point. That saves a hell lot of time.Here is the link for angular loopback SDK documentation. One more best feature is the inbuilt sexy swaggerUI provided by loopback. Which is amazing and provides Swagger views for all your endpoints. Loopback provides a database independent query system. Using which database migrations are matter of seconds. Yes, you heard me right!. Loopback model queries are database independent and we can change our database connectors at any time. You can read about loopback db connectors here. Threre are lot more features in loopback like inbuilt authtoken provider and $resource for angular sdks etc. Its okay, time to start our application. Point your angular app to loopback app and start running both the apps.

I am not promoting loopback or angular. I am a frequent user and developer uses these frameworks. I wrote this post to just share my knowledge and to share my love for both angular and loopback.

Happy coding friends

angular-loopback – Learning is Awsome

setup your full stack web application seed with loopback and angular

Angular 1 Setup:

Loopback 2 Setup:

Loopback’s extrordinary features: