Full stack javascript development with MEAN 2

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Node.js Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3. Modules and npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4. Node’s Programming Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5. Core Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
6. Building the Node Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
7. MongoDB Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
8. Interacting with MongoDB Using Mongoose . . . . . . . . . . . . . . . . . . . . . . . . . 99
9. Using MongoDB and Mongoose in Our Sample App . . . . . . . . . . . . . . . . . 115
10. Alternatives to Mongo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
11. Introduction to Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
12. Architecture of an Express Application . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
13. Using Express in Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
14. Alternative Server Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
15. AngularJS Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
16. Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
17. Angular Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
18. Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
19. Client-side Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
20. Angular in Our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
21. Task Runners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
22. Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
23. Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281



FULL STACK
JAVASCRIPT
DEVELOPMENT

WITH MEAN
BY ADAM BRETZ
& COLIN J. IHRIG


iv

Full Stack JavaScript Development with MEAN
by Adam Bretz and Colin J. Ihrig
Copyright © 2014 SitePoint Pty. Ltd.
Product Manager: Simon Mackie

English Editor: Kelly Steele

Technical Editor: Don Nguyen

Cover Designer: Alex Walker

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embodied in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any
damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty. Ltd.
48 Cambridge Street Collingwood
VIC Australia 3066
Web: www.sitepoint.com
Email:
ISBN 978-0-9924612-5-6 (print)
ISBN 978-0-9924612-4-9 (ebook)
Printed and bound in the United States of America


v
About Adam Bretz
Adam Bretz is a software engineer focusing on client and server side JavaScript. Adam earned
his Bachelor of Science in Computer Science in 2007 from Millersville University of
Pennsylvania. At a previous job, Adam was part of the team of engineers that helped migrate
the company from PHP to a pure JavaScript solution. Adam currently resides in the Pittsburgh
area with his wife, Jenna.

About Colin J. Ihrig
Colin J. Ihrig is a software engineer, working primarily with Node.js. Colin is the author of
Pro Node.js for Developers, and is currently the managing editor of SitePoint's JavaScript
channel. Colin received his Bachelor of Science in Engineering, and Master of Science in
Computer Engineering from the University of Pittsburgh in 2005 and 2008, respectively.

About SitePoint

SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit to access our blogs, books, newsletters, articles,
and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile
development, design, and more.



To Mom and Dad ― thanks for
getting me a Nintendo when I was
seven and a computer when I was
ten. ― Adam
This book is dedicated to my wife,
Alaina, my sons, CJ and Carter,
and my mom. I love you all so
much! ― Colin



Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Want to Take Your Learning Further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii

Chapter 1

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

The Rise of Full-stack JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Node.js Ecosystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Chapter 2

Node.js Introduction . . . . . . . . . . . . . . . . . . . . 11

Familiarity with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Problem with I/O . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
An Example Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stepping Around the I/O Problem . . . . . . . . . . . . . . . . . . . . . . . . . . .
Real World Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Your First Node.js Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Installing Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
REPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Writing the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11
13
14
16
17
19

19
19
20


x
Our Server in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Chapter 3

Modules and npm . . . . . . . . . . . . . . . . . . . . . . . 25

npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
npm install . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
npm search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
package.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26
26
28
29

The node_modules Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Module Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
require() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Other Uses for require . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Writing a Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Module Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

npm link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Chapter 4

Node’s Programming Model . . . . . . . . . . 41

The Event Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
The Illusion of Concurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Asynchronous Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Callback Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Calling Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Exception Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Callback Hell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Event Emitters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Extending EventEmitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Listening for Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Exception Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53


xi
The uncaughtException Event . . . . . . . . . . . . . . . . . . . . . . . . . . .
Promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Promise Chaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53
54
56
57

Core Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

Chapter 5

Command Line Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Working with the File System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
__filename and __dirname . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
The Current Working Directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Reading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Writing Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Readable Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Writable Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
The Standard Streams . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Web Programming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Creating a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Accessing Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Chapter 6

Building the Node Server . . . . . . . . . . . . . 73

Server Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Structuring the Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Database Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Querying the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Response Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81


xii
Putting It Back Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Chapter 7

MongoDB Introduction . . . . . . . . . . . . . . . .

87

NoSQL Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
History of MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Installing MongoDB Locally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Cloud Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Heroku Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
The MongoDB Shell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Inserting New Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Retrieving Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Updating Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Deleting Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Deleting Collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Deleting Databases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Chapter 8

Interacting with MongoDB Using
Mongoose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mongoose Node Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Schemas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Example Mongoose Schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mongoose Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Creating More Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Simple Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Updating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

99

100
100
102
103
106
109
112
113


xiii

Chapter 9

Using MongoDB and Mongoose in
Our Sample App . . . . . . . . . . . . . . . . . . . . . . . . 115

Adding Mongoose Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
The Employee Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
The Team Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Populating the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Accessing the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 10

119
120
126
128

Alternatives to Mongo . . . . . . . . . . . . . . . . 129

Relational Databases and SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
The mysql Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Connecting to a Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Connection Pooling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Closing Connections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Executing Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Chapter 11

Introduction to Express . . . . . . . . . . . . . . . 141

The Building Blocks of Express . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Middleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Putting It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Generating an Express App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Jade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152


xiv

Chapter 12

Architecture of an Express
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

153

Starting the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
app.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
app.use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
cookieParser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

Static Files Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
app.set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Router Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Using the Router Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Simulating Database Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Generating the HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Chapter 13

Using Express in Our App . . . . . . . . . . . 167

Updates to package.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
The npm start Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Defining Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Employee Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Team Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Update index.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

169
169
170
171
172

Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Chapter 14

Alternative Server Frameworks . . . 175

hapi Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Express Comparison . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

Route Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178


xv
Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Built-in Capability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapter 15

179
180
180
182
185

AngularJS Overview . . . . . . . . . . . . . . . . . . . 187

Single-page Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
SPA Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Model-View-Controller Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Getting Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Building from Source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Releases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Angular "Hello World" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

Chapter 16

Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

197

One-Way Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Two-Way Data Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
A Simple Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Technical Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
$watch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Digest Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Simple Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Data Binding with Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Chapter 17

Angular Directives . . . . . . . . . . . . . . . . . . . . .

209

Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209


xvi
An Example Using Common Directives . . . . . . . . . . . . . . . . . . . . . .
Creating Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
An Example Custom Directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

211
213
215
216

Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

217

Chapter 18

Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Expanding on Our Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Express Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Simple Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Using EmployeeService . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Chapter 19

Client-side Routing . . . . . . . . . . . . . . . . . . . . . 229

Getting Started with ngRoute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Application Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Service and Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Putting It Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Chapter 20

Angular in Our App . . . . . . . . . . . . . . . . . . . 239

The Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
CSS and Image Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241


xvii
app.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Template Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Team and Employee Listing Views . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Individual Team View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Individual Employee View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Task Runners . . . . . . . . . . . . . . . . . . . . . . . . . . . .

257

Introducing Gulp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Setting Up Gulp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Designing a Gulp File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
css Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
javascript Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

watch Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

258
259
260
261
263
266
267

Chapter 21

Chapter 22

Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

269

The debugger Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Running Chrome’s Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Controlling the Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Modifying Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Node’s Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
node-inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
node-debug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Chapter 23

Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

281

Testing Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Defining Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282


xviii
skip() and only() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Test Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Testing Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Set Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Test Code Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Controller Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Running the Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Next Steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296


Preface
With modern tools, it is possible to create production-grade applications using only
JavaScript, HTML, and CSS. The combination of MongoDB, Express, AngularJS,
and Node.js, all JavaScript technologies, has become so popular that it’s been dubbed
the MEAN stack. This book will explore the MEAN stack in detail.
We’ll begin by covering Node.js, as it lays the groundwork for all our server-side
work. You will learn how to get Node running on your local machine, as well as
download modules using npm, Node’s package manager. The key aspects of the

Node.js programming model will also be covered.
From there, we’ll move on to MongoDB, a NoSQL database. You’ll learn how to
interact with Mongo from a Node application, and how to create, retrieve, update,
and delete data from a Mongo store.
After you have a solid grasp on Node and Mongo, the book will move on to the Express web server. We’ll address the basics of Express applications via topics such
as routes and middleware. Building on previous chapters, we will cover the integration of Node, Mongo, and Express.
Our coverage of the MEAN stack will wrap up with several chapters on AngularJS.
These chapters will detail Angular fundamentals such as data binding, directives,
controllers, routing, and services. Wrapping up the book will be chapters on debugging and testing MEAN applications.
Full-stack JavaScript is not fully encompassed by the MEAN stack. There is an entire
ecosystem of JavaScript tools to learn about, and this book will introduce a few of
them. We will present task runners Gulp and Grunt, which are extremely useful for
automating mundane, repetitive tasks. We’ll also investigate JSHint, a linting tool
used to improve code quality. Along the way, we’ll also be developing an example
human resources application from scratch using the MEAN stack.

Who Should Read This Book
This book is suitable for intermediate-level web designers and developers. Experience
of HTML, CSS, and JavaScript is assumed.


xx

Conventions Used
You’ll notice that we’ve used certain typographic and layout styles throughout this
book to signify different types of information. Look out for the following items.

Code Samples
Code in this book will be displayed using a fixed-width font, like so:

A Perfect Summer's Day

It was a lovely day for a walk in the park. The birds
were singing and the kids were all back at school.

If the code is to be found in the book’s code archive, the name of the file will appear
at the top of the program listing in this way:
example.css

.footer {
background-color: #CCC;
border-top: 1px solid #333;
}

If only part of the file is displayed, this is indicated by the word excerpt:
example.css (excerpt)

border-top: 1px solid #333;

If additional code is to be inserted into an existing example, the new code will be
displayed in bold:
function animate() {
new_variable = "Hello";
}

Where existing code is required for context, rather than repeat it, a ⋮ will be displayed:


xxi
function animate() {
⋮
return new_variable;

}

Sometimes it’s intended that certain lines of code be entered on one line, but we’ve
had to wrap them because of page constraints. An ➥ indicates a line break that exists
for formatting purposes only, and should be ignored.
URL.open(" />
Tips, Notes, and Warnings
Hey, You!
Tips will give you helpful little pointers.

Ahem, Excuse Me …
Notes are useful asides that are related, but not critical, to the topic at hand. Think
of them as extra tidbits of information.

Make Sure You Always …
… pay attention to these important points.

Watch Out!
Warnings will highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials
/>The book’s website, containing links, updates, resources, and more.
/>The downloadable code archive for this book.


xxii
/>SitePoint’s forums, for help on any tricky web problems.


Our email address, should you need to contact us for support, to report a problem, or for any other reason.

Want to Take Your Learning Further?
Thanks for buying this book. Would you like to continue learning? You can now
receive unlimited access to courses and ALL SitePoint books at Learnable for one
low price. Enroll now and start learning today! Join Learnable and you’ll stay ahead
of the newest technology trends: .


Chapter

1

Introduction
Web programming is a task that takes years to truly understand. Part of the complexity comes from the sheer number of moving parts. Effective programmers need at
least a basic understanding of many topics, including networking, protocols, security,
databases, server-side development, and client-side development, amongst others.
For many years, this also included working with a medley of programming languages.
Client-side programming alone requires an understanding of three languages: HTML
for markup, CSS for styling, and JavaScript for functionality. While front-end development has its own complexities, the good news is that development is more or
less locked into the “big three” languages. The server side has been a different story
altogether. The server has been the domain of languages like Java, PHP, Perl, and
just about any other language you can think of. The majority of web applications
also utilize a database for data persistence. Historically, communicating with a
database has required developers to also understand SQL.
Creating a simple web application requires developers to understand HTML, CSS,
JavaScript, SQL, and a server-side language of choice. In addition, there’s no guarantee that the server side will be written in a single language. Optimistically, developers need to understand at least five separate languages to create a simple app,


2

Full Stack JavaScript Development with MEAN
and that’s without considering the data interchange format used for client-server
communication. Remember, the x in Ajax stands for XML. Many web applications
have recently moved away from XML in favor of the simpler JSON, but this is still
another layer that developers must understand.
Although HTML, CSS, and SQL aren’t strictly considered programming languages,
they each have their own syntax and quirks that developers must know. Completely
understanding five “languages” and constantly context switching between them is
a daunting task. If you’ve ever attempted this, you have likely mixed up syntax on
more than one occasion.
This has lead to specialization among developers with different teams working on
front-end and back-end development. Unfortunately, this doesn’t always ensure
that projects are completed faster or with higher quality. In fact, it often results in
more back and forth, debates, and programmers who are less knowledgeable about
a project’s big picture. There was a very clear-cut need for a language to be used
across the entire development stack. The remainder of this chapter explains how
JavaScript grew into the role of a full-stack language in a way that no other language
could.

The Rise of Full-stack JavaScript
JavaScript has long been the de facto standard for client-side scripting. JavaScript
burst onto the scene in 1995 after Brendan Eich developed what was known as
Mocha at the time over the course of just ten days. In September 1995, Netscape
Navigator 2.0 was released with Mocha, which by then had been renamed LiveScript.
JavaScript finally settled into its current name by December 1995. The name was
chosen because Netscape was attempting to ride the coattails of Sun’s Java programming language, which was trendy at the time.
During the initial browser wars, Microsoft’s Internet Explorer and Netscape’s Navigator were constantly trying to one-up each other. As a retort to Navigator’s JavaScript, Microsoft released its own implementation, named JScript, with Internet Explorer 3.0 in August 1996. JavaScript was submitted to Ecma International, an international standards organization, in November of 1996 and JavaScript was standardized as ECMA-2621 in June 1997.

1

/>

Introduction
Earlier on, JavaScript earned a reputation as being a language lacking in performance
and only used by amateur developers. Yet browser vendors invested a lot of time,
energy, and money into improving JavaScript over the years. The result is that
modern JavaScript engines are highly optimized pieces of software whose performance is far beyond anything of the original JavaScript interpreters. On the clientside, it is unlikely that any competing languages (such as Dart) will dethrone
JavaScript in the near future, as it's the only language supported by every major
browser. Couple that with overall improvements in computing, and the result is a
language that is suitable for just about any general-purpose computing task.

Node.js
In 2009, Ryan Dahl created Node.js, a framework used primarily to create scalable
network applications. Node.js is built on top of Google’s V8 JavaScript engine2 (the
same one used in Chrome) and Joyent’s libuv,3 an asynchronous I/O library that
abstracts away the underlying platform. Node made JavaScript a viable alternative
for server-side programming. Additionally, Node provided a full system JavaScript
API that was never really achieved before due to the sandboxed environment that
browsers provide. With the advent of Node, JavaScript developers could access the
file system, open network sockets, and spawn child processes.
One of Node’s top features is the ability to pack a lot of functionality into a small
amount of code. Node flaunts this right on the project’s home page.4 The code that
follows is taken directly from the Node home page, and implements a trivial web
server in just six lines:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Listing 1-1. A trivial web server written in Node

2

/> />4

3

3