Angular
Posted By Sebastian

Angular 6 – MEAN Stack Crash Course – Part 1: Front-end Project Setup And Routing


DemoCode

Building An Angular 6 CRUD Application From Scratch with MongoDB, Express, Node.js, And Material Design UI

Part 1: Front-end Project Setup And Routing
Part 2: Implementing The Back-end

The term MEAN stack refers to a collection of JavaScript based technologies used to develop web applications. MEAN is an acronym which stands for MongoDB, ExpressJS, Angular and Node.js.

In this tutorial you’ll learn to use the MEAN stack from scratch. We’ll cover the front-end and the back-end part and by following the steps of this tutorial you will be able to learn everything by building a real-world example from the ground up.

Throughout this series you’ll learn:

  • How to setup and implement the web front-end application with Angular 6
  • Using Angular Material for implementing a Material Design-based user interface
  • Setting up and running MongoDB
  • Implementing the back-end API with Node.js and Express.js
  • Connect the back-end server to the MongoDB database
  • Use Postman for testing the server API
  • Connecting the Angular 6 font-end application to the Node.js back-end

In this first part of this series we’ll be focusing on setting up the front-end Angular 6 project, install needed dependencies and configure the client-side routing.

In the following you can see the main building blocks of the MEAN stack application:

What We’re Going To Build In This Series

We’re going to build an issue tracker application. On that start page you’ll see the list of already created issue entries:

By using the button Create New Issue you can change to the following view:


Entering data and clicking on button Save creates a new issue entry and takes you back to the list view. From the list view you can also choose to Delete or Edit existing issue items:


The issue data is stored in a MongoDB database and accessed through a Node.js/Express.js server API.

Installing Node.js & Angular CLI

First we need to make sure that Node.js and Angular CLI are installed on the system. To install Node.js you need to go to the project’s website at https://nodejs.org/ find and download the installer for your platform and perform the installation by executing the installer.

By installing Node.js on your system the Node Package Manager (NPM) is also installed at the same time. We’ll be using NPM in this tutorial to install dependencies in our projects and to install Angular CLI in the next steps.

Angular CLI makes it easy to initiate a new project and is being installed by using NPM in the following way:

$ npm install -g @angular/cli

Having completed the installation you should be able to use the ng command on your system. This command can now be used to initiate new projects, add components to the project, run a live-reloading development web server or initiate the build process.

Setting Up The Angular 6 Project With Angular CLI

In our MEAN stack application Angular 6 is used to implement the single-page font-end web application. Let’s use the previously installed Angular CLI to setup a new Angular CLI project:

$ ng new frontend

This command is creating a new folder frontend, downloads the default Angular application template and makes sure that all the dependencies are being installed. Having executed this command successfully you can now enter the directory

$ cd frontend

and start the development web server by using the following command:

$ ng serve --open

This command should open the Angular application in the browser and you should be able to see the following result:

Adding Angular Material

With the release of Angular 6 the new ng add command is available which makes it easy to add new capabilities to the project. This command will use the package manager to download new dependencies and invoke corresponding installation scripts. This is making sure that the project is updated with dependencies, configuration changes and that package-specific initialization code is executed.

In the following we’ll use the ng add command to add Angular Material to the previously created Angular 6 application:

$ ng add @angular/material

Now we’re ready to make use of Angular Material within our front-end project.

Creating Components

Next let’s create three new components in our Angular 6 application. Again we’re using Angular CLI:

$ ng g c components/list

$ ng g c components/create

$ ng g c components/edit

With these three components in place we’re ready to start implementing the front-end application. Let’s first configure the client-side routing.

Adding Routing

To configure routing we first need to import RouterModule and Routes from the @angular/router package in app.module.ts:

import { RouterModule, Routes } from '@angular/router';

Next lets add the routing configuration as an array of Routes:

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
];

Each Routes object consists of two properties: path and component. This is connecting a URL extension (like ‘create’) to a component (CreateComponent). Furthermore a redirect is configured from the default application route to the route displaying content from ListComponent.

To activate the routing configuration for our Angular application you need to make sure to add the following to the array which is assigned to the imports property of the @NgModule decorator:

  imports: [
    ...
    RouterModule.forRoot(routes)
  ],

As you can see here we’re using the factory method RouterModule.forRoot to handover our routing configuration.

Depending on the application route which is requested the content from the connected component should be part of the output. The exact place where this component content should be inserted is marked with the <router-outlet> element. Insert that element in app.component.html:

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div>

Please note that we’re using the first component from the Angular Material library: MatToolbar. To be able to use the <mat-toolbar> element here we need to add one further import statement in app.module.ts:

import { MatToolbarModule } from '@angular/material';

Also add MatToolbarModule to the imports array:

 imports: [
    ...
    MatToolbarModule
 ],

What’s Next

We’ve started building the front-end part of our MEAN stack application by initiating a new Angular 6 project, installing dependencies, adding components and client-side routing.

In the next part of this series we’re going to continue implementing the MEAN stack application. Therefore the back-end project will be set-up by using MongoDB, Node.js and Express.js.

ONLINE COURSE: Angular & NodeJS - The MEAN Stack Guide

Check out the great online course Angular & NodeJS – The MEAN Stack Guide with thousands of students already enrolled:

Angular & NodeJS – The MEAN Stack Guide

  • Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
  • Connect any Angular Frontend with a NodeJS Backend

  • Use ExpressJS as a NodeJS Framework
  • Improve any Angular (+ NodeJS) application by adding Error Handling
  • Understand how Angular works and how it interacts with Backends

  • Use MongoDB with Mongoose to interact with Data on the Backend

Go To Course

ONLINE COURSE: Angular - The Complete Guide

Check out the great Angular – The Complete Guide with thousands of students already enrolled:

Angular – The Complete Guide

  • This course covers Angular 6
  • Develop modern, complex, responsive and scalable web applications with Angular
  • Use their gained, deep understanding of the Angular  fundamentals to quickly establish themselves as frontend developers
  • Fully understand the architecture behind an Angular application and how to use it
  • Create single-page applications with on of the most modern JavaScript frameworks out there

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.