Getting Mean: With Mongo, Express, Angular and Node

Description

Getting MEAN teaches you how to develop web applications using the 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.

About the Author

Simon Holmes has been a full-stack developer since the late 1990s and runs Full Stack Training Ltd.

Table of Contents

Part 1 Setting the Baseline

1 Introducing full-stack development

1.1 Why learn the full stack?

1.2 Introducing Node.js: The web server / platform

1.3 Introducing Express: The framework

1.4 Introducing MongoDB: The database

1.5 Introducing AngularJS: The front-end framework

1.6 Supporting cast

1.7 Putting it together with a practical example

1.8 Summary

2 Designing a MEAN stack architecture

2.1 A common MEAN stack architecture

2.2 Looking beyond SPAs

2.3 Designing a flexible MEAN architecture

2.4 Planning a real application

2.5 Breaking the development into stages

2.6 Hardware architecture

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.2 Creating an Express project

3.3 Modifying Express for MVC

3.4 Import Bootstrap for quick, responsive layouts

3.5 Make it live on Heroku

3.6 Summary

4 Building a static site with Node and Express

4.1 Defining the routes in Express

4.2 Building basic controllers

4.3 Creating some views

4.4 Adding the rest of the views

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

4.6 Summary

5 Building a data model with MongoDB and Mongoose

5.1 Connecting the Express application to MongoDB using Mongoose

5.2 Why model the data?

5.3 Defining simple Mongoose schemas

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

5.5 Getting our database live

5.6 Summary

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

6.1 The rules of a REST API

6.2 Setting up the API in Express

6.3 GET methods: Reading data from MongoDB

6.4 POST methods: Adding data to MongoDB

6.5 PUT methods: Updating data in MongoDB

6.6 DELETE method: Deleting data 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.2 Using lists of data from an API: The Loc8r homepage

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

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

7.5 Protecting data integrity with data validation

7.6 Summary

Part 3 Adding A Dynamic Front End With Angular

8 Adding Angular components to an Express application

8.1 Getting Angular up and running

8.2 Displaying and filtering the homepage list

8.3 Getting data from an API

8.4 Ensuring forms work as expected

8.5 Summary

9 Building a single-page application with Angular: Foundations

9.1 Setting the groundwork for an Angular SPA

9.2 Switching from Express routing to Angular routing

9.3 Adding the first views, controllers, and services

9.4 Improving browser performance

9.5 Summary

10 Building an SPA with Angular: The next level

10.1 A full SPA: Removing reliance on the server-side application

10.2 Adding additional pages and dynamically injecting HTML

10.3 More complex views and routing parameters

10.4 Using AngularUI components to create a modal popup

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.2 Creating a user schema for MongoDB

11.3 Creating an authentication API with Passport

11.4 Securing relevant API endpoints

11.5 Creating Angular authentication service

11.6 Creating register and login pages

11.7 Working with authentication in the Angular app

11.8 Summary

Appendix A Installing the stack

Appendix B Installing and preparing the supporting cast

Appendix C Dealing with all of the views

Appendix D Reintroducing JavaScript available online only

Index