Loopback and AngularJS – First Tutorial

Reference from: https://www.codetutorial.io/loopback-and-angularjs-first-tutorial/

Loopback is one of the most promising Node Js framework based on Express and maintained fromStrongloop a nice startup based in San Mateo and recently acquired by IBM.  Strongloop andLoopback are enterprise grade framework for web and mobile application developed on NodeJS and based on Express. In this tutorial we will use Loopback to create a simple API backend to serve a Todo application. We will not use the visual tool, arc, provided by Strongloop but instead we will use simple command line tool to model all the needed component for the application.

For the frontend AngularJS will be used. We will see below in the tutorial how it will be easy to generate the service to interface AngularJS to our Loopback  backend app.

Setup Loopback application

For this tutorial we will assume NodeJs is already installed on your development machine, so we can start immediately with the installation of the Strongloop framework.

npm install -g strongloop

Once Strongloop is installed we can start using the slc command line to craft our application.

slc loopback todo

this command will start an app creator wizard like shown in the picture below. After providing the needed information the base application will be created.

loopback1

Now that the application is created we can start modeling  using the slc tool to create our Taskmodel. Type the following command

slc loopback model

This command will start a new wizard to create the model. To maintain this tutorial short and simple we will use a memory database, so all the first option will be the default. The wizard will ask also for the model name, in our case todo and the plural of it to use as url (todos).

loopback2

After providing basic information about the model, the wizard start ask about how our model is made. In our case two fields are needed. One will be the title, of type string, and the other will be a boolean , isDone to store the state of the todo. When both this property are crated just press enter two time to exit the wizard.

It’s time to start our application.

the application is now up and running. At the base url all the REST API are served. Loopback give us another URL, the API explorer. We can use this url to test our API before attaching it to a frontend application.

loopback3

We are almost ready to start coding our frontend. The REST backend is ready bu we need to instruct the ExpressJs backend on how to serve our static content. In the server folder locate themiddleware.json file and modify the file object in it like show below.

From now on all the files in the client folder will be served as static content. Looks strange but we are done with our REST backend API. We didn’t write a single line of code and the Loopback framework created all the needed endpoints to serve our todo application. We can start  crafting the application frontend.

The AngularJs Frontend

The first thing we need in order to create an AngulaJs application is install AngularJs. We will use bower to load all the needed dependency and package for the application. As for default bower will install all the component in a wrong directory. To avoid it create a .bowerrc file in the home folder of the project and paste the code below into it.

Now using bower we can install all.

bower install angular angular-resource bootstrap

After the installation of the packages is done it’s time to test the it. Create a index.html file into the client folder and paste the code below in it.

Now if you visit the URL http://localhost:3000/index.html you will get the usual sentence “AngularJS is working”. It mean all the import is done and we can continue with the tutorial.

As said at the begin  we will use the Loopback AngularJS client to create a service, compatible with theangular-resource module, to access the backend API. Create a js folder into the client folder and then type the command below in the console.

lb-ng server/server.js client/js/lb-services.js

check into the js folder if the lb-services.js file is created.

Now created another file called app.js into the same js folder. For the sake of simplicity all the AngularJs application code will be in the same file.

In the app file we injected the lbServices and defined three function for the basic CRUD operations. As you can see we used all the method exposed by the service crated with the lb-ngtool to interact with the backend. Most of this methods return a $promise that we used as callback to modify the client model.

The last thing in order to make this tutorial complete is to rewrite the index.html to suite our  application needs. Open the index.html previously created and paste the code below into it

The HTML is very simple to understand. We looped trough the $scope.todos to show the list of the todo and for each of this element we create a button to delete and a checkbox. The ng-changedirective on the checkbox will execute the update on the relative todo.

Then we have a little textbox with a button where new todo can be created.

loopback4

Conclusion

Loopback is a very powerfull and promising framework. With the power of NodeJs and all its module it can  be used for almost every application. We have seen just the basics and used only one of the available client SDK. On the Strongloop site you can find lot of documentation and also SDK to make the backend usable for native mobile application like iOS or Android. In the next  future we will see how to get the most from this beautiful framework.

420 total views, 1 views today

Trả lời