Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building an Angular 5 Application Step-By-Step

DZone's Guide to

Building an Angular 5 Application Step-By-Step

An end-to-end tutorial on how to use Google's latest addition to the Angular family, Angular 5, to create a web application.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences. Download this white paper now. 

In this article, we will be building an Angular 5 application from scratch with step-by-step configuration and explanation. This single page application will be created using an Angular CLI command with different Angular modules integrated into it, such as RouterModuleHttpClientModuleAppRoutingModule, and FormsModule. The application will have a sample login page styled with Bootstrap and a user dashboard page. Once the user is authenticated successfully, they will be redirected to the dashboard page where they can see a list of users.

What's New in Angular 5

Angular 5 applications are faster, lighter, and easy to use. They have material design capabilities to build beautiful and intuitive UIs. A new HttpClientModulewas introduced which is a complete rewrite of the existing HttpModule. It now supports TypeScript 2.4.

Generating an Angular 5 Application

To get started with Angular CLI, it is required to have Node installed so that we can use the NPM tool. Executing following NPM commands generate an Angular 5 application named angular5-example

npm install -g @angular/cli
angular5-example
ng new angular5-example
cd angular5-example
ng serve

Now we have our Angular application ready to use and we can verify it in the browser at http://localhost:4200. By default, the Angular application is available at port 4200 by using the command ng serve.

Now we can import this generated project into our IDE and start modifying it to build our login application. There are certain files generated with the CLI command which we need to understand here. We have an .angular-cli.json file generated that has all the application's configuration parameters. The configuration related to our HTML file is index.html, and main.ts is where all the modules are bundled. The final application output directory configuration and configuration specific to the environment, such as dev and prod, can be found here.

We have a package.json file that has information about all the project dependencies. We have tsconfig.json for TypeScript configurations. Inside the scr/app folder, we have our components defined and when the request for localhost:4200 is made, AppComponent is loaded in the browser.

Now we will be removing these default pieces of content and add the code to make our login application. As discussed earlier, we will have 2 pages - one for login and the other for a dashboard. So, let's create two components: login and user.

ng generate component login
ng generate component user

Now if you check your project, you will have two folders created, one with the name login and one with the name user, which contain LoginComponent and UserComponent. The CLI has also made entries in app.module.ts for these two newly created components.

Angular5 Project Structure

Now let us configure the Angular routing to route these pages based on the URL. For this, we will be creating app.routing.module.ts and configure our routes.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {UserComponent} from '../user/user.component';
import {LoginComponent} from '../login/login.component';

const routes: Routes = [
{ path: 'user', component: UserComponent },
{ path: 'login', component: LoginComponent },
{path : '', component : LoginComponent}
];

@NgModule({
imports: [
RouterModule.forRoot(routes)
],

exports: [
RouterModule
],

declarations: []
})

export class AppRoutingModule { }

Also, we need to import the same information into our app.module.ts as declarations. Now to serve these routes include <router-outlet></router-outlet> in app.component.html. In the above configurations, we need to use LoginComponentas a default component and also configure the URL for which these components will be loaded. Now you can check if these configurations are working properly or not in the browser with these URLs - http://localhost:4200/login and http://localhost:4200/user.

Now let us add the login form code in our login.component.html file.

<div class="row">

  <div class="col-md-6">
    <h1>Login </h1>
    <form>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" name="email" [(ngModel)]="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="passowrd" [(ngModel)]="password">
      </div>
      <button class="btn btn-default" (click)="login()">Login</button>
    </form>
  </div>
</div>

Here we have bound email and password with the model attribute. To use ngModel you need to import FormsModule in your app.module.ts. On the click of the login button, our login() method defined in the login.component.ts will be invoked. This method validates the email and password and redirects the user to their user dashboard page. To make this example simple, we have hardcoded the email and password here but, in a real-time application, you will have APIs to validate user credentials. Also, you may need to save tokens and user information in the local cache after successful validation. To build an end-to-end application with API integration, you can visit this article  full stack angular5 application.

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";

@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
email: string;
password: string;

constructor(private router : Router) { }

ngOnInit() {

}

login() {
if(this.email == 'dhiraj@gmail.com' && this.password == 'password') {
this.router.navigate(['user']);
}else {
alert("Invalid credentials.")
}
}
}

Once the user is validated, they will be redirected to user dashboard page. To load data, we have app.service.ts that has code to generate fake users (with some delay).

public getUsers() {
let fakeUsers = [{id: 1, firstName: 'Dhiraj', lastName: 'Ray', email: 'dhiraj@gmail.com'},
{id: 1, firstName: 'Tom', lastName: 'Jac', email: 'Tom@gmail.com'},
{id: 1, firstName: 'Hary', lastName: 'Pan', email: 'hary@gmail.com'},
{id: 1, firstName: 'praks', lastName: 'pb', email: 'praks@gmail.com'},
];
return Observable.of(fakeUsers).delay(5000);

}

Now the same service is being used in our user.component.ts file to load these users in user.component.html

import { Component, OnInit } from '@angular/core';
import {ApiService} from "../app.service";
import {User} from "./user.model";

@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})

export class UserComponent implements OnInit {

users: [User]
constructor(private apiService: ApiService) { }

ngOnInit() {
this.apiService.getUsers().subscribe(
data => this.users = data);
}
}

The following is our HTML file for this dashboard page.

<div class="col-md-6">
  <h2> User Details</h2>
  <table class="table table-striped">
    <thead>
        <tr>
        <th class="hidden">Id</th>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users">
        <td class="hidden">{{user.id}}</td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.email}}</td>
        </tr>
    </tbody>
  </table>
</div>

The following is our user dashboard page we made using Anglar 5.

angular5-dashboard

Conclusion

Here we created a sample application using Angular 5. Now we can extend this article to have security in it. You can follow the Angular JWT authentication example to secure the Angular 5 applications with JWT tokens. 

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
angular 5 ,web dev ,web application development ,typescript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}