February 5, 2018

Photo Gallery Part 1 - Setup

Photo Gallery Part 1 - Setup

This week is going to be part 1 of a tutorial series where we will be creating a photo gallery web app. We are going to start with the frontend, which will be using Angular 5, and then move to coding the backend in NodeJS and MongoDB.

app_overview

Before we dive into the code, there are a few things we have to get setup. This week we are going to setup our project and make sure everything is setup and working properly.

Setup

Before we start, be sure to have NodeJS, MongoDB, and the Angular CLI installed. For your reference, I have included the links to all of these at the bottom of this post.

First thing to do is create a directory for our application. I called mine ng5-photogallery, but feel free to use a different name.

mkdir ng5-photogallery
cd ng5-photogallery

Since we are going to be building both the frontend and backend of the application, we will store everything in this folder. Next week, we will come back to this folder to create the NodeJS backend.

Angular Setup

Inside your project folder, use the Angular CLI to create a new Angular project.

ng new angular-src --routing
cd angular-src

Note that I am giving the Angular app a name of angular-src. I like separating my backend code from the frontend. Later, we will change Angular's build path, so the frontend and backend work together.

Also, I am including the --routing flag, which initializes Angular routing for us.

Angular Material Download

We aren't quite ready to start coding yet. First, we are going to download and setup material design, which happens in a few steps.

Following the instructions from the Material Design Getting Started Guide, we start by downloading material and cdk to our project, and then also download Angular animations, which material design requires

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

In order to support touch gestures, we also need hammerjs.

npm install --save hammerjs

Material Setup

Now that we have everything downloaded, lets setup our project to use material design.

First, we are going to import hammerjs to src/main.ts

import 'hammerjs';

Next, we will add the CDN for material icons. This step is optional, and now required if you dont' plan to use icons in your project.

In src/index.html, we add the following within the head tags

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

We are going to be using the pre-build indigo-pink theme, which is added inside src/styles.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

The second last step is to import the animations package we just downloaded. In src/app/app.module.ts, add

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
imports: [
...
BrowserAnimationsModule,
...
]

Finally, we have to add each material component we plan to use. Unlike older version of material design, each component has to be added separately. In a large project that uses a lot of the components, you can imagine that our import statements are going to get quite long.

Because of this, we are going to create a new root level module, which will be dedicated for all of the material components we will use. In src/app, create a folder called modules, and then add a new file named material.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
    imports: [ MatButtonModule, ],
    exports: [ MatButtonModule, ],
})

export class MaterialModule { }

Here we are creating a new NgModule, which we will use to import all of the material components we use, and then also export them; allowing us access to each component in our code. When added new objects, simply add them to the import statement on line 3, and append them to the imports and exports list. This file isn't mandatory, but I find it easier and cleaner to keep all of these imports in their own file, compared to having all of them in the app.module.ts file.

Back in our app.module.ts file, we can now add our newly create module below the animations import line

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './modules/material.module';
...
imports: [
...
BrowserAnimationsModule,
MaterialModule,
...
]

Testing

Open src/app/app.component.html, and add the following above the router-outlet tag

<button mat-raised-button color="primary">Test Button</button>

Next, execute ng serve in your terminal and open a web browser to localhost:4200. You should see something like

boilerplate

Summary

We have now successfully setup an Angular 5 frontend project that uses Material Design, and initializing it in our app.

Now that our project is setup, let's move to Part 2, where we'll design the frontend.

For your reference, all of the source code can be found on my GitHub - https://github.com/offhourscoding/ng5-photogallery

References

NodeJS
MongoDB
Angular
Angular CLI
Material Design