Budhana Tech, LLP

code

Connecting Client and Server: Todo list App with Loopback 4 and Angular 7 Part 2

In this 3 part tutorial series we are going to build a very simple Todo list app with the latest frameworks available for backend and frontend. For backend we will be using Loopback 4 and for frontend we will be using Angular 7. Please note you will require to have the following

  • Loopback 4 (click this to know how to get it).
  • Angular 7 (click this to know how to get it).

In this part we will connect the Angular Client with the Loopback server, without waiting anymore lets get our hands dirty. This tutorial might seem long but its because there are lots of terminal commands not much code so don’t worry you’ll finish it in no time.

Looback Part:

First, we will create a structure of our single todo instance, go into the folder todolist-app-webapp-backend and open the terminal/ console, then fire commands in following seqeunce.
Model class name: todoPlease select the model base class: Entity
Enter the property name: idProperty type: numberIs id the ID property?: YesIs it required?: YesDefault value [leave blank for none]: (blank)
Enter the property name: titleProperty type: stringIs it required?: YesDefault value [leave blank for none]: (blank)
Enter the property name: descriptionProperty type: stringIs it required?: NoDefault value [leave blank for none]: (blank)
Enter the property name: isDoneProperty type: booleanIs it required?: YesDefault value [leave blank for none]: (blank)
after this just press enter when asked for another property and if successfully done you will be given the following output, which means we are done creating our model

Second, we’ll add a datasource – “Loopback’s way of connecting to various sources of data” (from loopback’s official site: click here for more details), open the terminal/ console, then fire commands in following seqeunce.
Datasource name: dbSelect the connector for db: In-memory db (supported by StrongLoop)window.localStorage key to use for persistence (browser only): (blank)Full path to file for persistence (server only): ./db.json


If successfully done you will be given the following output.

After that the above process is finished inside the folder todolist-app-webapp-backend create a file db.json – this will store our in-memory data
Third, we’ll add Repositories – a specialized service interface responsible for providing basic data access i.e add, edit, view, delete for specified model (like todo model we created above, from loopback’s official site: click here for more details), open the terminal/ console, then fire commands in following seqeunce.
Please select the datasource: DbDatasourceSelect the model(s) you want to generate a repository: Todo


If successfully done you will be given the following output.

Now that we have our methods ready we will make it accessible from http, i.e mapping http GET, POST, PATCH, PUT, etc to the methods made available by Repository we created above. And for that..


Fourth, we’ll add a Controller – a class which handles request and provides response, here we’ll write most of our code. (from loopback’s official site: click here for more details), open the terminal/ console, then fire commands in following seqeunce.


Controller class name: todo
What kind of controller would you like to generate?: REST Controller with CRUD functions
What is the name of the model to use with this CRUD repository?: Todo
What is the name of your CRUD repository?: TodoRepository
What is the type of your ID?: number
What is the base HTTP path name of the CRUD operations?: (leave as is)


If successfully done you will be given the following output.
Congratulations, we are done creating a full server for our Todo List app and the fun part is we haven’t written a single line of code, That’s amazing !


We can run our server by issuing the command npm start in the terminal, after it starts it will show the following output.
You can go to the above mentioned url, and click on “/explorer” to do some CRUD operations. Keep this server running and don’t close the terminal.


Angular Part:


First, this will create a component – an element that controls a part of screen (from Angular’s official site: click here for more details), open the terminal/ console, inside the folder todolist-webapp-frontend, and fire a command: ng generate component todo


Second, we will remove all the code from app.component.html, except for the “router-outlet” html tag.
Third, we’ll add a single route object in the routes array inside the file app-routing.module.ts. Setting the path empty string will cause Todos component to be loaded when the app is stated which is also called base path.


Fourth, we will create a service which will handle all the communications with database. To create a service fire the command ng generate service todo. This will give the following output.
Fifth, we need to import “HttpClientModule” module in app.module.ts with the help of which we will communicate with the server and also add it to the imports array. Shown as follows.
Sixth, we need to change some code in the “todo.service.ts” file, as follows
Basically we created a method getPing() which will call a ping route “http://127.0.0.1:3000/ping” exposed by loopback server for testing.

Seventh, inside the “todos.component.ts” file we will inject the service created in the above step in the todo component i.e declare a private variable in constructor and call its method “getPing()” inside the ngOnInit hook – best place to write initialization logic, as given here ->

And inside the “todos.component.html”, remove eveything and write this tiny code which prints the test variable:
{{test | json}}


Ok! thats it, we are done writing our code now open the terminal and fire the command: ng serve –open after its done with its compilation it will automatically open the default browser with some text like this, but please remember the loopback server’s console should be running in the background.
If you see the above out put, then Voila ! you have just communicated to loopback’s ping route which gave this output to you, and with that we have successfully connected our Angular Client with Loopback server.
Please follow along in the third part coming soon to see how we perform the actual functions for adding todo, getting a single todo, listing all todos and other such operations
Please leave a comment below if you have something wandering around your head, may it be something crazy. Also please let us know if you like this post and anything we need to improve upon and what kind of blogs would you be interested in future. You can leave a message in the chat box as well.

#angular #loopback #MEAN #backend #frontend #todo

Ending with a quote:
We can’t know everything, but we can know right thing at right time.

Leave a Comment

Your email address will not be published. Required fields are marked *