Angular Dashboard starterkit template with authentication and CRUD

When I started with programming (even with Angular), I noticed I had to look up a lot of things. Things like

• how to create a login page?
• how to handle authentication?
• how to fetch items from a serve?
• how to create/read/update/delete items(s)?
• routing?
• component structure?

And you can find a lot of articles about it on the web. But it was mostly fragmented. For routing I had to go article x, for authentication to article y. Nowadays I know all these things by hearth, but there are still new (Angular) developers that are facing the same problem that I once did.

So I created this “tiny” project to demonstrate some basics design patterns.

UPDATE!

I’ve written some follow up stories on this project:

My Angular Dashboard Template part 2

Angular Dashboard starterkit template: CRUD’ing it

The project

I’ve decided to create a starter dashboard template with Angular 6. This template will have a:

- Login page (with a basic authentication flow)
- Secured dashboard
- Fake backend server (So you don’t need a real backend server)

In theory you could use my template to kickstart your next dashboard project with a login. If you want to just see my code or start right away, then checkout my GitHub repository:

fransyozef/basic-login-angular

In this (long) article I will talk a bit more about the techniques/concepts that was used. The Readme.md has some documentation also.

Login with async-await

When you start developing with Angular 6 and create a login feature, you probably figured out how to send a http request to the server from a service method. And you probably are using the HttpClient (@angular/common/http). So a typical service method would be like

And then you subscribe to the login function from for example your component:

Nothing really fancy right? Just basic Observables. Then I came across this article: Using async-await feature in Angular. I found it very interesting so I decided to implement this in my project. So instead of subscribing to a stream / Observable, the login returns a Promise (well actually there is a subscribe ofcourse, but behind the scenes). For example:

service login function

Then you would call the login function from your component:

calling the login function from your component

The async keyword will transform the login() to an assynchronous method and the await in the method will act as a synchronicly method.

It’s a nice pattern, and worth trying. Maybe I will use this in a real project, or maybe not :)

Fake backend “server”

Now that we have a function to login (make a http request to a server), how can we test it? Back in the days, we frontend developers had many ways to “simulate” a server request/response. This could be just return a true or false in the login function or setup a local webserver that will create a response. Setting up a local webserver can sometimes be time consuming. Returning a true or false won’t reflect your real logic.

Luckly you already have a webserver when you start an Angular project. When you do ng serve , a temporary webserver is started and your project is served on a url, usually http://localhost:4200/.

Now Angular has a nice interface called HttpInterceptor that captures and handles HttpRequest. And you can use this in your project and so did I. In my fakebackend.ts file I capture all http requests and handle them.

This is an basic example:

basic example of implementing the HttpInterceptor interface

Next we need to register the class in the app.module.ts in the providers section:

This method gives the following advantages:
- No need to setup an extra local development server.
- You can already write your logic without waiting on a backend developer.
- You can already test different server responses and how your application will react on it.

Don’t forget to remove the fakebackend when you go to production ;)

Securing urls with canActivate guard

What’s a login system without having secure url’s / pages? And secure I mean, you can only access those url’s when you are logged in. With Angular you can do this by creating a guard and bind it to the canActivate key in the route file.

This is an example of a guard:

And then we assign it to the canActive key in the route file, for example:

So if canActive is resolved true, the DashboardComponent is loaded, otherwise not.

Public and secured page layout

I wanted to have a complete different layout between a public (for example the login page) and a secured page. All the secured pages have the same master template (header, content, footer). You could ofcourse integrate the login page also with the master template, but that was not my intent.

Most tutorials about routing have something like this in their app.component.html :

Wich basicly state that the component defined in the route file is executed/rendered in the <router-outlet> tag. But this also means, every loaded url in your route file are using the same layout. I solved this by having a boolean that reflects my login state and then show a custom component or just show the loaded component. The custom component (LayoutComponent) will have the master template layout and also loads the target component defined in the router file.

So if loggedIn is true, the <app-layout> is loaded with the master template and the router-outlet:

So that’s it for now. I still have more to write about, but now I’m hangry! I need foooood.

You can find me on :
- linkedin : https://www.linkedin.com/in/fransjoleihitu/
- GitHub : https://github.com/fransyozef/
- Instagram : https://www.instagram.com/thehangrycoder/
- Twitter: https://twitter.com/thehangrycoder

UPDATE!

I’ve written a follow up article:

My Angular Dashboard Template part 2