Getting MEAN with Mongo, Express, Angular, and Node, Second Edition
Simon D. Holmes and Clive Harber
  • MEAP began March 2017
  • Publication in May 2019 (estimated)
  • ISBN 9781617294754
  • 504 pages (estimated)
  • printed in black & white
free previous edition included

Traditional web dev stacks use a different programming language in every layer, resulting in a complex mashup of code and frameworks. Together, the MongoDB database, the Express and Angular frameworks, and Node.js constitute the MEAN stack - a powerful platform that uses only one language, top to bottom: JavaScript. Developers and businesses love it because it's scalable and cost-effective. End users love it because the apps created with it are fast and responsive. It's a win-win-win!

Getting MEAN, Second Edition is completely revised and updated to cover Angular 7, Node 11 and the latest mainstream release of JavaScript ES2015. This Second Edition will walk you through how to develop web applications using this updated MEAN stack. First, you'll create the skeleton of a static site in Express and Node, and then push it up to a live web server. Next, add a MongoDB database and build an API before using Angular to handle data manipulation and application logic in the browser. Finally you'll add an authentication system to the application, using the whole stack. When you finish, you'll have all the skills you need to build a dynamic data-driven web application.

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 very brief history of web development

1.1.2. The trend toward full-stack developers

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 versus document databases

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 versus 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

1.8. Summary

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: Build 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

2.7. Summary

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. Installing Node dependencies with npm

3.2. Creating an Express project

3.2.1. Installing the pieces

3.2.2. Creating a project folder

3.2.3. Configuring an Express installation

3.2.4. Creating an Express project and trying it out

3.2.5. 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 new views and routes folders

3.3.4. Splitting controllers from routes

3.4. Import Bootstrap for quick, responsive layouts

3.4.1. Download Bootstrap and add it to the application

3.4.2. Using Bootstrap in the application

3.5. Make it live on Heroku

3.5.1. Getting Heroku set up

3.5.2. Pushing the site live using Git

3.6. Summary

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 Review page

4.4.3. The About page

4.5. Take the data out of the views and make them smarter

4.5.1. How to move 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. The finished homepage

4.5.6. Updating the rest of the views and controllers

4.6. Summary

5. Building a data model with MongoDB and Mongoose

5.1. Connecting the Express application to MongoDB using Mongoose

5.1.1. Adding Mongoose to our application

5.1.2. Adding a Mongoose connection to our application

5.2. Why model the data?

5.2.1. What is Mongoose and how does it work?

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 our 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

5.6. Summary

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. Including the model

6.2.4. 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. 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. 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

6.7. Summary

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 our 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. 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

7.6. Summary

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.2.1. Create a new home-list component

8.2.2. Create the HTML template

8.2.3. Moving data out of the template into the code

8.2.4. Using class member data in the HTML template

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

8.5. Summary

9. Building a single page application with Angular

9.1. Adding navigation in an Angular SPA

9.1.1. Import Angular router and define first route

9.1.2. Create a component for the framework and navigation

9.1.3. Define where to display the content using router-outlet

9.1.4. Navigating between pages

9.1.5. 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. Create and use reusable sub-components

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 bind HTML content

9.4.1. Adding the About page content to the app

9.4.2. Create a pipe to transform the line breaks

9.4.3. Safely bind HTML using a property binding

9.5. Challenge

9.6. Summary

10. Building a Single Page Application with Angular: The next level

10.1. 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. 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 route 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 deep URLs work

10.5. Summary

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. 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. Setting encrypted paths using Mongoose methods

11.2.4. Validating a submitted password

11.2.5. 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 JSON Web Tokens

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

11.5. Summary

12. 12 Using an authentication API in Angular applications

12.1. Creating 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 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.4. Summary


Appendix A: Installing the stack

A.1. Installing Node and npm

A.1.1. Long Term Support versions of Node

A.1.2. Installing Node on Windows

A.1.3. Installing Node on Mac OS X

A.1.4. Installing Node on Linux

A.1.5. Verifying installation by checking version

A.2. Installing Express globally

A.3. Installing MongoDB

A.3.1. Installing MongoDB on Windows

A.3.2. Installing MongoDB on Mac OS X

A.3.3. Installing MongoDB on Linux

A.3.4. Running MongoDB as a service

A.3.5. Checking the MongoDB version number

A.4. Installing Angular

Appendix B: Installing and preparing the supporting cast

B.1. Twitter Bootstrap

B.1.1. Adding some custom styles

B.2. Font Awesome

B.3. Installing Git

B.4. Installing a suitable command-line interface

B.5. Setting up Heroku

B.5.1. Signing up for Heroku

B.5.2. Installing Heroku CLI

B.5.3. Logging in to Heroku using terminal

Appendix C: Dealing with all of the views

C.1. Moving the data from the views to the controllers

C.1.1. Details page

C.1.2. Add Review page

C.1.3. About page

Appendix D: Reintroducing JavaScript

D.1. Everybody knows JavaScript, right?

D.2. Good habits or bad habits

D.2.1. Variables, functions and scope

D.3. Arrow functions

D.4. Destructuring

D.5. Logic flow and looping

D.6. Getting to know JSON

D.6.1. A recap on JavaScript object literals

D.6.2. Differences with JSON

D.6.3. Why is JSON so good?

D.7. Formatting practices

D.8. String formatting

D.9. Understanding callbacks

D.9.1. Use setTimeout to run code later

D.9.2. Asynchronous code

D.9.3. Running a callback function

D.9.4. Named callbacks

D.9.5. Callbacks in Node

D.10. Promises and Async/Await

D.11. Writing modular JavaScript

D.11.1. Closures

D.11.2. Module pattern

D.11.3. Revealing module pattern

D.12. Classes

D.13. Functional programming concepts

D.14. Summary

What's inside

  • Full-stack development using JavaScript
  • Responsive web techniques to build mobile-ready web applications
  • Everything you need to get started with MEAN
  • Best practices for efficiency and reusability

About the reader

Readers should have some web development experience. This book is based on MongoDB 3, Express 4, Angular 2, and Node.js 6, making use of the ES2015 JavaScript syntax.

About the author

Simon Holmes has been a full-stack developer since the late 1990s, manages the European Solutions Engineering team for LivePerson and runs Full Stack Training Ltd.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
MEAP combo $49.99 pBook + eBook + liveBook
includes previous edition
MEAP eBook $39.99 pdf + ePub + kindle + liveBook
includes previous edition

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks