4.1) App Screen 1 (UI + Backend integration)
In this week my task is to integrate Backend and UI. I have used AngularJs for integrating UI and Backend.
To fulfill this purpose I made following things:
1.Services : Which are used to communicate with auth and data APIs provided by hasura.
I made two services 1) AuthService 2) DataService Auth service interactes with http://auth.alokshakya.hasura.me and Data service interacts with http://data.alokshakya.hasura.me to perform all request on hasura API
This AuthService is used inside all controllers to perform all authentication related tasks like for login, signup, checking if user is already logged in from Bearer token present in localStorage etc.
Now comes to DataService which is used to perform actions like updating likes count and updating comments count and performing all queries to hasura data API. I have implemented DataService Like this:
Now these services will be used inside controllers to get input from html views and send data to service and then service will interact with server and will return data to controller and it will get reflected in html views.
In 4th week I only implemented login and signup functionality. For that I had made a controller named AuthController and login.html view code snippet for them below:
Controllers : Controllers are used to bind data between html view and services. Controllers can get data from html send it to services and returened data from services are displayed on html view.
AuthController.js for AuthController
Now coming to the frontend side login.html
In this whole process I am taking data from html form and sending it to AuthController and then AuthController uses AuthService to communicate with hasura Auth API and on Successful response auth token returned from hasura is saved into window.localStorage named ‘authToken’ and this is used to send with every request in header using AuthService.js line no 32 and 33.
In this way I achieved login signup and logout functionality. Here are screen shots.
In my next week blog I will discuss about use of DataService for adding article to database.
Thanks for reading such a long article.