Packt+ | Advance your knowledge in tech

You're reading from MongoDB, Express, Angular, and Node.js Fundamentals Become a MEAN master and rule the world of web applications

Product type Paperback

Published in Mar 2019

Publisher

ISBN-13 9781789808735

Length 362 pages

Edition 1st Edition

Languages

JavaScript

Tools

Angular

Concepts

Full Stack Web Development

Author (1):

Paul Oluyege

View More author details

Table of Contents (9) Chapters

MongoDB, Express, Angular, and Node.js Fundamentals

Preface

1. Introduction to the MEAN Stack FREE CHAPTER

2. Developing RESTful APIs to Perform CRUD Operations

3. Beginning Frontend Development with Angular CLI

4. The MEAN Stack Security

5. Angular Declarables, Bootstrapping, and Modularity

6. Testing and Optimizing Angular Applications

Appendix

Chapter 3: Beginning Frontend Development with Angular CLI

Activity 6: Designing the Frontend and Components for the Blogging Application

Create a new Angular project named blog by pointing your CLI to the Blogging Application directory, and create an Angular CLI application with the name blog using the following code:
```
ng new blog  
```
Import the bootstrap theme and its resources from http://bit.ly/2DI7UsR by opening the link, and download the bootstrap theme and resources into the blog/src/assets folder.

Update index.html with the necessary resource links using the following code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Blog</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
//[…]
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

File name: index.html

Live link: http://bit.ly/2HDFQuT

File name: header.component.html

Live link: http://bit.ly/2Rt5h1Q

File name: blog-home.component.html

Live link: http://bit.ly/2FXWZh9

File name: footer.component.html

Live link: http://bit.ly/2UnBZ6s

File Name: view-post.component.html

Live link: http://bit.ly/2FWIJoP

Create the header components and update the HTML template with the theme's header using the following code:

ng generate component header
<nav class="navbar navbar-expand-lg navbar-dark absolute_header">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img class="etcodes-normal-logo" src="assets/images/logo-light.png" width="84" height="22" alt="Logo">
      <img class="etcodes-mobile-logo" src="assets/images/logo.png" width="84" height="22" alt="Logo">
    </a>
    <button class="navbar-toggler hamburger-menu-btn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
//[…]
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Create the title-header component using the following code:

<div class="bg-img-71 py-100px py-md-200px mb-80px">
  <div class="container">
      <div class="row">
          <div class="col-lg-6 offset-lg-3 text-center all-text-content-white">
              <h1>MEAN Stack Courseware Blog Application Project</h1>
              <p>Aenean lacinia bibendum sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce
                  dapibus pertinax vix, varius cursus turpis dign issim id aliquam habemus tractatos.</p>
          </div>
      </div>
  </div>
</div>

Create the blog-home components and update the HTML template with the theme's content:

ng generate component blog-home
            <!-- Blogs -->
<title-header></title-header>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="row blog_posts stander_blog">
                            <div class="col-md-6 col-lg-4">
                                <article>
                                    <div class="post_img card-blog-img">
                                        <img src="assets/images/home-27/2.jpg" alt="Card image cap">
                                        <a href="blog-standard-two-col-right-sidebar.html">
                                            <span class="card-blog-meta"> 
//[…]
                        </div>
                    </div>
                </div>
            </div>

Create the footer components and update the HTML template with the theme's footer:

ng generate component footer
<footer class="web-footer footer bg-color-blackflame all-text-content-white">
    <div class="footer-widgets pt-85px pb-55px">
        <div class="container">
            <div class="row large-gutters">
                <div class="col-lg-5 mb-30px">
                    <div class="footer-widget">
                        <h3>Paulappz</h3>
                        <p class="pt-20px pt-lg-155px">© 2018 Paulappz Themes</p>
//[…]
                </div>
            </div>
        </div>
    </div>
</footer>

Create the view-post components and update the HTML template:

ng generate component view-post
  <div class="page-container scene-main scene-main--fade_In">
            <!-- view post -->
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="post_img">
                            <img src="assets/images/b3.jpg" alt="Card image cap">
//[…]
                        </div>
                    </div>
                </div>
            </div>
           
        </div>

Update the root component template with the following code:

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <app-blog-home></app-blog-home>
    <app-footer></app-footer>
  </div>
</div>

Run ng serve -o to start the application. You will obtain the following output in the browser:
Figure 3.16: Blog application theme update
Figure 3.17: Blog application theme update

Update the root component template with the following code:

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <view-post></view-post>
    <app-footer></app-footer>
  </div>
</div>

You will obtain the following output in the browser:

Activity 7: Writing Services and Making HTTP Request Calls to an API

File name: blog-home.component.html

Live link: http://bit.ly/2TjT1FQ

File name: view-post.component.ts

Live link: http://bit.ly/2VqoaoB

Create a service file for blog post articles by running the following command:
```
ng generate service service/article
```

Update app.module.ts file by importing the provider for ArticleService using the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BlogHomeComponent } from './blog-home/blog-home.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ArticleService } from './service/article.service';
import { HttpClientModule } from '@angular/common/http';
import { ViewPostComponent } from './view-post/view-post.component';
import { TitleHeaderComponent } from './title-header/title-header.component';

@NgModule({
  declarations: [
    AppComponent,
    BlogHomeComponent,
    HeaderComponent,
    FooterComponent,
    ViewPostComponent,
    TitleHeaderComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ArticleService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Write the interface class in a newly created posts.ts file using the following code:

export interface Post {
    photo: string;
    title: string;
    body: string;
    tag: string;
  }

Import the Injectable, HttpClient, Post, and Observable modules using the following code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Post } from '../posts'
import { Observable } from 'rxjs';

Declare Url variables and assign string values in the ArticleService class as shown:

articlesUrl = 'http://localhost:3000/articles';
articleUrl = 'http://localhost:3000/article/';
article: any;
httpOptions:any;

Inject HttpClient and set HttpHeaders using the following code:

constructor(private http: HttpClient) { 
    this.httpOptions = new HttpHeaders({ 
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'PUT, POST, GET, DELETE, OPTIONS',
     });
  }

Write the CRUD service functions:

  getArticles(): Observable<Post> {
    this.article = this.http.get<Post>(this.articlesUrl);
    return this.article;
  }
  getArticle(id: number) {
    return this.http.get(this.articleUrl + id);
  }

  /** POST: add a new article to the database */
  PostArticle(article: Post): Observable<Post> {
  
    return this.http.post<Post>(this.articlesUrl,
      { 'title': article.title, 'body': article.body, 'tag': article.tag, 'photo': article.photo }, {
        headers: this.httpOptions
      })
  }

  deleteArticle(id: number):
    Observable<{}> {
    return this.http.delete(this.articleUrl + id, {
      headers: this.httpOptions
    })
  }

  updateArticle(id: number, article: Post): Observable<Post> {
    return this.http.put<Post>(this.articleUrl + id, { 'title': article.title, 'body': article.body, 'tag': article.tag, 'photo': article.photo },{
      headers: this.httpOptions
    })
  }
}

Update the blog-home components class file with the following code:

import { Component, OnInit } from '@angular/core';
// Import service
import { ArticleService } from '../service/article.service';
@Component({
  selector: 'app-blog-home',
  templateUrl: './blog-home.component.html',
  styleUrls: ['./blog-home.component.css']
})
export class BlogHomeComponent implements OnInit {
  articles:any=[];
//Inject service
  constructor(private articleService:ArticleService) { }
  ngOnInit() {
 this.articleService.getArticles()
.subscribe(
  res => {
    for(let key in res){
      this.articles.push(res[key]);
    }
  },
  err => {
    console.log("Error occured");
  }
);
 }
 }

Update the blog-home components template file with the following code:

<app-title-header></app-title-header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div  class="row blog_posts stander_blog">
                    <div class="col-md-6 col-lg-4"   *ngFor="let article of //[…]
                    
                </div>
            </div>
        </div>
    </div>

Update the root component template with the following code:

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <app-blog-home></app-blog-home>
    <app-footer></app-footer>
  </div>
</div>

Run ng serve -o on the command line to view the following output:
Figure 3.18: Blog-home page of the application

Update the view-post components class file with the following code:

import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../service/article.service';
@Component({
  selector: 'view-post',
  templateUrl: './view-post.component.html',
  styleUrls: ['./view-post.component.css']
})
export class ViewPostComponent implements OnInit {
  id: any;
  article: any;
  constructor( private articleService: ArticleService) { }
  ngOnInit() {
      this.id = '5b9426b70e473447f400eeb9' // id of first post from API
      this.articleService.getArticle(this.id)
        .subscribe(
          res => {
            console.log(res)
            this.article = res;
          },
          err => {
            console.log("Error occured");
          }
        );
  }
}

Update the view-post components template file with the following code:

<div class="page-container scene-main scene-main--fade_In">
            <!-- Blog post -->
            <div class="container"> 
                <div class="row">
                    <div class="col-md-12">
                        <div class="post_img">
                            <img src="https://{{article.photo}}" alt="Card image cap">
//[…]
                        </div>
                    </div>
                </div>
            </div> 
           
        </div>

Update the root component template with the following code:

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <view-post></view-post>
    <app-footer></app-footer>
  </div>
</div>

Run ng serve -o to start the application. You should obtain the following output:
Figure 3.19: View-post page of the application

Activity 8: Creating a Form Application Using the Reactive/Model-Driven Method

File name: packt-student-reactive-form.component.html

Live link: http://bit.ly/2WutecX

Create an Angular CLI application named Reactive form:
```
ng new reactive-form
```

Create a component and name it PacktStudentReactiveForm:

ng generate component reactive-form/ PacktStudentReactiveForm

Register the reactive forms module in app.module.ts and add it to import properties to activate the reactive form using the following code:

import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';

imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule
  ],

Import the FormControl and FormGroup modules into the reactive form component (packt-student-reactive-form.component.ts):

import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

Declare and initialize the array in the reactive components class, as follows:
```
  courseTitles = ['MEAN Stack', 'MEVN Stack', 'MERN Stack'];
```

Create FormGroup and FormControl variable instances:

myform : FormGroup;
name : FormControl;
courseTitle : FormControl;
duration : FormControl;
constructor() { }

Create functions to initialize and validate using the following code:

ngOnInit() {
  this.createFormControls();
  this.createForm();
}
createFormControls() { 
  this.name = new FormControl('Paul Adams', Validators.required),
  this.courseTitle = new FormControl(this.courseTitles[0], Validators.required),
  this.duration = new FormControl('6 days')
}
createForm() { 
  this.myform = new FormGroup({
    name: this.name,
    courseTitle : this.courseTitle,
    duration: this.duration
  });
}

submitted = false;

onSubmit() { this.submitted = true; console.log(this.name) }
newStudent() {
  this.myform.reset();
}

Register the control and form group in the html form template of the reactive component (packt-student-reactive-form.component.html) using the following code:

<div class="container">
    <div *ngIf="!submitted">
        <h1>Packt Course Form</h1>
//[…]
      </select>
                <div *ngIf="courseTitle.invalid" class="alert alert-danger">
                    courseTitle is required
                </div>
            </div>
            <div class="form-group">
                <label for="duration">Course Duration</label>
                <input type="text" class="form-control" id="duration" formControlName="duration">
            </div>
            <button type="submit" class="btn btn-success" [disabled]="">Submit</button>
            <button type="button" class="btn btn-default" (click)="newStudent();">New Student</button>
        </form>
</div>

Add a submitted view to the template:

    <div *ngIf="submitted">
        <h2>You submitted the following:</h2>
        <div class="row">
            <div class="col-xs-3">Name</div>
            <div class="col-xs-9  pull-left">{{name.value}}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">Course Duration</div>
            <div class="col-xs-9 pull-left">{{duration.value}}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">Packt Course Title</div>
            <div class="col-xs-9 pull-left">{{courseTitle.value}}</div>
        </div>
        <br>
        <button class="btn btn-primary" (click)="submitted=false">Edit</button>
    </div>
</div>

Update the components style sheet (packt-student-reactive-form.component.css) and the main application style sheet (style.css) using the following code:

// packt-student-reactive-form.component.css
.ng-valid[required],
.ng-valid.required,
.has-success {
    /* border-left: 5px solid #42A948; */
    /* green */
}

.ng-invalid:not(form) {
    /* border: 1px solid #a94442; */
    /* red */
}

// style.css
/* You can add global styles to this file, and also import other style files */
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Update the root template file (app.componets.html file) by hosting the form component src/app/app.component.html using the following code:
```
src/app/app.component.html
< app-packt-student-reactive-form ></ app-packt-student-reactive-form >
```
Launch the application by running the following snippet in the command-line terminal and go to the address localhost:4200:
```
ng serve --open
```
You will obtain the following output:
Figure 3.20: Reactive/model-driven form

Activity 9: Creating and Validating Different Forms Using the Template and Reactive-Driven Method

File name: login.component.html

Live link: http://bit.ly/2B8XFfK

Update the app component template with the following snippet and run ng serve to view the User Login form output:

File name: register.component.html

Live link: http://bit.ly/2Wul1p2

File name: create.component.html

Live link: http://bit.ly/2HGg3SD

Create the User Login form component using the following code:
```
ng generate component login
```

Update the User Login form component class and update the HTML template to be reactive/model-driven using the following code:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  loginForm: FormGroup;
  displayMessage: string;
  submitted = false;
  constructor(private formBuilder: FormBuilder) {
    /* Declare Reactive Form Group here */
    this.loginForm = this.formBuilder.group({
      email: ['', [
        Validators.required,
        Validators.pattern("[^ @]*@[^ @]*")
      ]],
      password: ['', [
        Validators.minLength(8),
        Validators.required
      ]],
    });

  }

  submitForm() {
    this.submitted = true;
    /* Change the display message on button click / submit form */
    if (this.loginForm.valid) {
       this.loginUser();
    }

  }

   loginUser() {
  console.log('Logged In sucessfully')
  }
}

The template is updated with the following:

<title-header></title-header>
<div class="" style="padding-bottom: 3rem!important;">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <!-- form card login -->
      <div class="card rounded-0">
//[…]
      <!-- /form card login -->
    </div>
  </div>
</div>

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <app-login></app-login>
    <app-footer></app-footer>
  </div>
</div>

You will obtain the following output once you type http://localhost:4200/login in the browser:

Figure 3.21: Reactive login form

Create the User Registration form component:
```
ng generate component register
```

Create an exportable user class file in the app directory using the following code:

export class Users {
    constructor(
    public fullName: string,
    public email: string,
    public password: string
) {  }
}

Update the User Registration form component class and update the HTML template to be template-driven.

The class is updated as follows:

import { Component, OnInit } from '@angular/core';
import { Users } from '../users';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  model = new Users('', '', '');
  constructor(/*private auth: AuthService,
    private router: Router*/) { }
  ngOnInit() {
  }
  onSubmit() {
     this.registerUser();
  }
  registerUser() {
console.log('Registration Successful')
   }

The template is updated as follows:

<title-header></title-header>
<div>
  <div class="row">
    <div class="col-md-6 mx-auto">
      <!-- form card login -->
      <div class="card rounded-0">
          <h3 class="mb-0" style="text-align:center">Register  Admin User</h3>
        <div class="card-header">
        </div>
        <div class="card-body">
          <form (ngSubmit)="userForm.form.valid && onSubmit()" 
//[…]
      <!-- /form card login -->
    </div>
  </div>
</div>

Update the app component template with the following snippet and run ng serve to view the User Registration form output:
```
<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <app-register></app-register>
    <app-footer></app-footer>
  </div>
</div>
```
You will obtain the following output once you run http://localhost:4200/register in the browser:
Figure 3.22: Template-driven Register form

Create the Post Create/Edit form component and an exportable Posts class:

ng generate component create
export class Posts {
    constructor(
    public title: string,
    public body: string,
    public tag: string,
    public photo: string,
) {  }
}

Update the Post Create/Edit form component class and update the HTML template to be template-driven.

The class is updated as follows:

import { Component, OnInit } from '@angular/core';
import { Posts } from '../post';
@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
  tags = ['POLITICS', 'ECONOMY', 'EDUCATION','STORY','TECH'];
  model = new Posts('','','','');
  submitted = false;
  constructor() { }
  onSubmit() { 
    this.submitted = true; 
  console.log(this.model)
}
  ngOnInit() {
  }
}

The template is updated as follows:

<title-header></title-header>
<div class="py-5">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <!-- form card login -->
      <div class="card rounded-0">
          <h3 style="text-align:center" class="mb-0">Create Post</h3>
          <div class="card-header">
            </div>
        <div class="card-body">
          <form (ngSubmit)="postForm.form.valid && onSubmit()" 
//[…]
            <button type="submit" class="btn btn-success">Submit</button>
          </form>
        </div>
        <!--/card-block-->
      </div>
      <!-- /form card login -->
    </div>
  </div>
</div>

Update the app component template with the following snippet and run ng serve to view the Post Create/Edit form output:
```
<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    <app-create></app-create>
    <app-footer></app-footer>
  </div>
</div>
```
You will obtain the following output once you type http://localhost:4200/create in the browser window:
Figure 3.23: Template-driven post create/edit form

Activity 10: Implementing a Router for the Blogging Application

File name: blog-home.component.html

Live link: http://bit.ly/2CSjEaQ

Import RouterModule into the app module file (app.module.ts) and update the import property:

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

imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule
  ],

Configure the route in app.module.ts as follows:

const appRoutes: Routes = [
  { path: 'blog', component: BlogHomeComponent,
    data: { title: 'Article List' }},
  { path: 'blog/post/:id',      component: ViewPostComponent },
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent},
  { path: 'create', component: CreateComponent},

  { path: '',
    redirectTo: '/blog',
    pathMatch: 'full'
  },
  // { path: '**', component: PageNotFoundComponent }
];

Add router-outlet to the app.component.html file:

<div id="main-content" class="bg-color-gray">
  <app-header></app-header>
  <div class="page-container scene-main scene-main--fade_In">
    
    <router-outlet></router-outlet>

    <app-footer></app-footer>
  </div>
</div>

Add the router link to the blog-home component:

<title-header></title-header>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div  class="row blog_posts stander_blog">
                    <div class="col-md-6 col-lg-4"   *ngFor="let article of articles">
                        <article>
                                <a routerLink="post/{{article._id}}">
                            <div class="post_img card-blog-img">
                                <img src="https://{{article.photo}}" 
//[…]
                    
                </div>
            </div>
        </div>

    </div>

Start the server and serve the Angular application using the CLI with the following commands:
```
> node server.js
> ng serve -o
```
Open the browser and input http://localhost:4200/blogin in the URL address bar to view the router in action.
You will obtain the following output:
Figure 3.24: Blog post route
If you click on one of the posts, it will navigate to the view-post page, as shown:
Figure 3.25: Route to view-post page