Getting MEAN with Mongo, Express, Angular, and Node, Second Edition
Simon D. Holmes and Clive Harber
  • April 2019
  • ISBN 9781617294754
  • 504 pages
  • printed in black & white
free previous edition eBook included
An eBook copy of the previous edition of this book is included at no additional cost. It will be automatically added to your Manning Bookshelf within 24 hours of purchase.

Wonderfully detailed walk-through from front end to back end, from UI to data—and all the connectivity in between.

Joseph Tingsanchali, Netspend

Getting MEAN, Second Edition teaches you how to develop full-stack web applications using the MEAN stack. This edition was completely revised and updated to cover MongoDB 4, Express 4, Angular 7, Node 11, and the latest mainstream release of JavaScript ES2015.

About the Technology

Juggling languages mid-application can radically slow down a full-stack web project. The MEAN stack—MongoDB, Express, Angular, and Node—uses JavaScript end to end, maximizing developer productivity and minimizing context switching. And you’ll love the results! MEAN apps are fast, powerful, and beautiful.

About the book

Getting MEAN, Second Edition teaches you how to develop full-stack web applications using the MEAN stack. Practical from the very beginning, the book helps you create a static site in Express and Node. Expanding on that solid foundation, you’ll integrate a MongoDB database, build an API, and add an authentication system. Along the way, you’ll get countless pro tips for building dynamic and responsive data-driven web applications!

Table of Contents detailed table of contents

Part 1 Setting the baseline

1 Introducing full-stack development

1.1 Why learn the full stack?

1.1.1 A brief history of web development

1.1.2 The trend toward full-stack developing

1.1.3 Benefits of full-stack development

1.1.4 Why the MEAN stack specifically?

1.2 Introducing Node.js: The web server/platform

1.2.1 JavaScript: The single language through the stack

1.2.2 Fast, efficient, and scalable

1.2.3 Using prebuilt packages via npm

1.3 Introducing Express: The framework

1.3.1 Easing your server setup

1.3.2 Routing URLs to responses

1.3.3 Views: HTML responses

1.3.4 Remembering visitors with session support

1.4 Introducing MongoDB: The database

1.4.1 Relational databases vs. document stores

1.4.2 MongoDB documents: JavaScript data store

1.4.3 More than just a document database

1.4.4 What is MongoDB not good for?

1.4.5 Mongoose for data modeling and more

1.5 Introducing Angular: The front-end framework

1.5.1 jQuery vs. Angular

1.5.2 Two-way data binding: Working with data in a page

1.5.3 Using Angular to load new pages

1.5.4 Are there any downsides?

1.5.5 Developing in TypeScript

1.6 Supporting cast

1.6.1 Twitter Bootstrap for user interface

1.6.2 Git for source control

1.6.3 Hosting with Heroku

1.7 Putting it together with a practical example

1.7.1 Introducing the example application

1.7.2 How the MEAN stack components work together


2 Designing a MEAN stack architecture

2.1 A common MEAN stack architecture

2.2 Looking beyond SPAs

2.2.1 Hard to crawl

2.2.2 Analytics and browser history

2.2.3 Speed of initial load

2.2.4 To SPA or not to SPA?

2.3 Designing a flexible MEAN architecture

2.3.1 Requirements for a blog engine

2.3.2 A blog engine architecture

2.3.3 Best practice: Building an internal API for a data layer

2.4 Planning a real application

2.4.1 Planning the application at a high level

2.4.2 Architecting the application

2.4.3 Wrapping everything in an Express project

2.4.4 The end product

2.5 Breaking the development into stages

2.5.1 Rapid prototype development stages

2.5.2 The steps to build Loc8r

2.6 Hardware architecture

2.6.1 Development hardware

2.6.2 Production hardware


Part 2 Building a Node web application

3 Creating and setting up a MEAN project

3.1 A brief look at Express, Node, and npm

3.1.1 Defining packages with package.json

3.1.2 Working with dependency versions in package.json

3.1.3 Installing Node dependencies with npm

3.2 Creating an Express project

3.2.1 Installing the pieces

3.2.2 Verifying the installations

3.2.3 Creating a project folder

3.2.4 Configuring an Express installation

3.2.5 Creating an Express project and trying it out

3.2.6 Restarting the application

3.3 Modifying Express for MVC

3.3.1 A bird’s-eye view of MVC

3.3.2 Changing the folder structure

3.3.3 Using the views and routes relocated folders

3.3.4 Splitting controllers from routes

3.4 Importing Bootstrap for quick, responsive layouts

3.4.1 Downloading Bootstrap and adding it to the application

3.5 Making it live on Heroku

3.5.1 Getting Heroku set up

3.5.2 Pushing the site live using Git


4 Building a static site with Node and Express

4.1 Defining the routes in Express

4.1.1 Different controller files for different collections

4.2 Building basic controllers

4.2.1 Setting up controllers

4.2.2 Testing the controllers and routes

4.3 Creating some views

4.3.1 A look at Bootstrap

4.3.2 Setting up the HTML framework with Pug templates and Bootstrap

4.3.3 Building a template

4.4 Adding the rest of the views

4.4.1 Details page

4.4.2 Adding the Review page

4.4.3 Adding the About page

4.5 Taking the data out of the views and making them smarter

4.5.1 Moving data from the view to the controller

4.5.2 Dealing with complex, repeating data patterns

4.5.3 Manipulating the data and view with code

4.5.4 Using includes and mixins to create reusable layout components

4.5.5 Viewing the finished homepage

4.5.6 Updating the rest of the views and controllers


5 Building a data model with MongoDB and Mongoose

5.1 Connecting the Express application to MongoDB by using Mongoose

5.1.1 Adding Mongoose to your application

5.1.2 Adding a Mongoose connection to your application

5.2 Why model the data?

5.2.1 What is Mongoose and how does it work?

5.2.2 How does Mongoose model data?

5.2.3 Breaking down a schema path

5.3 Defining simple Mongoose schemas

5.3.1 The basics of setting up a schema

5.3.2 Using geographic data in MongoDB and Mongoose

5.3.3 Creating more complex schemas with subdocuments

5.3.4 Final schema

5.3.5 Compiling Mongoose schemas into models

5.4 Using the MongoDB shell to create a MongoDB database and add data

5.4.1 MongoDB shell basics

5.4.2 Creating a MongoDB database

5.5 Getting your database live

5.5.1 Setting up mLab and getting the database URI

5.5.2 Pushing up the data

5.5.3 Making the application use the right database


6 Writing a REST API: Exposing the MongoDB database to the application

6.1 The rules of a REST API

6.1.1 Request URLs

6.1.2 Request methods

6.1.3 Responses and status codes

6.2 Setting up the API in Express

6.2.1 Creating the routes

6.2.2 Creating the controller placeholders

6.2.3 Returning JSON from an Express request

6.2.4 Including the model

6.2.5 Testing the API

6.3 GET methods: Reading data from MongoDB

6.3.1 Finding a single document in MongoDB using Mongoose

6.3.2 Finding a single subdocument based on IDs

6.3.3 Finding multiple documents with geospatial queries

6.4 POST methods: Adding data to MongoDB

6.4.1 Creating new documents in MongoDB

6.4.2 Validating the data using Mongoose

6.4.3 Creating new subdocuments in MongoDB

6.5 PUT methods: Updating data in MongoDB

6.5.1 Using Mongoose to update a document in MongoDB

6.5.2 Using the Mongoose save method

6.5.3 Updating an existing subdocument in MongoDB

6.6 DELETE method: Deleting data from MongoDB

6.6.1 Deleting documents in MongoDB

6.6.2 Deleting a subdocument from MongoDB


7 Consuming a REST API: Using an API from inside Express

7.1 How to call an API from Express

7.1.1 Adding the request module to your project

7.1.2 Setting up default options

7.1.3 Using the request module

7.2 Using lists of data from an API: The Loc8r homepage

7.2.1 Separating concerns: Moving the rendering into a named function

7.2.2 Building the API request

7.2.3 Using the API response data

7.2.4 Modifying data before displaying it: fixing the distances

7.2.5 Catching errors returned by the API

7.3 Getting single documents from an API: The Loc8r Details page

7.3.1 Setting URLs and routes to access specific MongoDB documents

7.3.2 Separating concerns: Moving the rendering into a named function

7.3.3 Querying the API using a unique ID from a URL parameter

7.3.4 Passing the data from the API to the view

7.3.5 Debugging and fixing the view errors

7.3.6 Formatting dates using a Pug mixin

7.3.7 Creating status-specific error pages

7.4 Adding data to the database via the API: add Loc8r reviews

7.4.1 Setting up the routing and views

7.4.2 POSTing the review data to the API

7.5 Protecting data integrity with data validation

7.5.1 Validating at the schema level with Mongoose

7.5.2 Validating at the application level with Node and Express

7.5.3 Validating in the browser with jQuery


Part 3 Adding a dynamic front end with Angular

8 Creating an Angular application with TypeScript

8.1 Getting up and running with Angular

8.1.1 Using the command line to create a boilerplate Angular app

8.1.2 Running the Angular app

8.1.3 The source code behind the application

8.2 Working with Angular components

8.3 Getting data from an API

8.3.1 Creating a data service

8.3.2 Using a data service

8.4 Putting an Angular application into production

8.4.1 Building an Angular application for production

8.4.2 Using the Angular application from the Express site


9 Building a single-page application with Angular: Foundations

9.1 Adding navigation in an Angular SPA

9.1.1 Importing the Angular router and defining the first route

9.1.2 Routing configuration

9.1.3 Creating a component for the framework and navigation

9.1.4 Defining where to display the content using router-outlet

9.1.5 Navigating between pages

9.1.6 Adding active navigation styles

9.2 Building a modular app using multiple nested components

9.2.1 Creating the main homepage component

9.2.2 Creating and using reusable subcomponents

9.3 Adding geolocation to find places near you

9.3.1 Creating an Angular geolocation service

9.3.2 Adding the geolocation service to the application

9.3.3 Using the geolocation service from the home-list component

9.4 Safely binding HTML content

9.4.1 Adding the About page content to the app

9.4.2 Creating a pipe to transform the line breaks

9.4.3 Safely binding HTML by using a property binding

9.5 Challenge


10 Building a single-page application with Angular: The next level

10.1 Working with more-complex views and routing parameters

10.1.1 Planning the layout

10.1.2 Creating the required components

10.1.3 Setting up and defining routes with URL parameters

10.1.4 Using URL parameters in components and services

10.1.5 Passing data to the Details page component

10.1.6 Building the Details page view

10.2 Working with forms and handling submitted data

10.2.1 Creating the review form in Angular

10.2.2 Sending submitted form data to an API

10.3 Improving the architecture

10.3.1 Using a separate routing-configuration file

10.3.2 Improving the location class definition

10.4 Using the SPA instead of the server-side application

10.4.1 Routing Express requests to the build folder

10.4.2 Making sure that deep URLs work


Part 4 Managing authentication and user sessions

11 Authenticating users, managing sessions, and securing APIs

11.1 How to approach authentication in the MEAN stack

11.1.1 Traditional server-based application approach

11.1.2 Using the traditional approach in the MEAN stack

11.1.3 Full MEAN stack approach

11.2 Creating a user schema for MongoDB

11.2.1 One-way password encryption: Hashes and salts

11.2.2 Building the Mongoose schema

11.2.3 Basic user schema

11.2.4 Setting encrypted paths using Mongoose methods

11.2.5 Validating a submitted password

11.2.6 Generating a JSON Web Token

11.3 Creating an authentication API with Passport

11.3.1 Installing and configuring Passport

11.3.2 Creating API endpoints to return JWTs

11.4 Securing relevant API endpoints

11.4.1 Adding authentication middleware to Express routes

11.4.2 Using the JWT information inside a controller


12 Using an authentication API in Angular applications

12.1 Creating an Angular authentication service

12.1.1 Managing a user session in Angular

12.1.2 Allowing users to sign up, sign in, and sign out

12.1.3 Using the JWT data in the Angular service

12.2 Creating the Register and Login pages

12.2.1 Building the Register page

12.2.2 Building the Login page

12.3 Working with authentication in the Angular app

12.3.1 Updating the navigation

12.3.2 Adding a right-side section to the navigation



Appendix A: Installing the stack

Installing Node and npm

Installing Express globally

Installing MongoDB

Installing Angular

Appendix B: Installing and preparing the supporting cast

Twitter Bootstrap

Font Awesome

Installing Git

Installing Git

Installing a suitable command-line interface

Setting up Heroku

Appendix C: Dealing with all the views

Moving the data from the views to the controllers

Details page

Add Review page

About page

Switching from Promises to Observables

Appendix D: Reintroducing JavaScript

Everybody knows JavaScript, right?

Good habits or bad habits

Variables, scope, and functions

Working with scope and scope inheritance

Pushing from local to global scope: The wrong way

Pushing from local to global scope: The right way

Referencing global variables from local scope

Implied global scope

The problem of variable hoisting

Lexical scope

Functions are variables

Limiting use of the global scope

Arrow functions


Logic flow and looping

Conditional statements: Working with if

Running loops: Working with for

Using for loops with arrays

Getting to know JSON

JavaScript object literals

Differences with JSON

Why is JSON so good?

Formatting practices

Indenting code

Position of braces for functions and blocks

Using the semicolon correctly

Placing commas in a list

Don’t be afraid of whitespace

Tools to help you write good JavaScript

String formatting

Understanding callbacks

Using setTimeout to run code later

Asynchronous code

Running a callback function

Named callbacks

Callbacks in Node

Promises and async/await



Writing modular JavaScript


Module pattern

Revealing module pattern


Functional programming concepts

Final thoughts

What's inside

  • MongoDB 4, Express 4, Angular 7, and Node.js 11
  • MEAN stack architecture
  • Mobile-ready web apps
  • Best practices for efficiency and reusability

About the reader

Readers should be comfortable with standard web application designs and ES2015-style JavaScript.

About the author

Simon Holmes and Clive Harber are full-stack developers with decades of experience in JavaScript and other leading-edge web technologies.

placing your order...

Don't refresh or navigate away from the page.
print book $49.99 pBook + eBook + liveBook
includes previous edition eBook
Additional shipping charges may apply
Getting MEAN with Mongo, Express, Angular, and Node, Second Edition (print book) added to cart
continue shopping
go to cart

eBook $39.99 3 formats + liveBook
includes previous edition eBook
Getting MEAN with Mongo, Express, Angular, and Node, Second Edition (eBook) added to cart
continue shopping
go to cart

Prices displayed in rupees will be charged in USD when you check out.
customers also reading

This book 1-hop 2-hops 3-hops

FREE domestic shipping on three or more pBooks