4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.

js 2ED

table of contents index

1.2.1. JavaScript: The single language
through the stack Chapter 1. Introducing full-stack
1.2.2. Fast, efficient, and scalable
development
1.2.3. Using prebuilt packages via npm buy

now
1.3. Introducing Express: The framework
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses This chapter covers
1.3.3. Views: HTML responses Evaluating full-stack development
1.3.4. Remembering visitors with session Getting to know the MEAN stack components
support Examining what makes the MEAN stack so compelling
1.4. Introducing MongoDB: The database Previewing the application you’ll build throughout this
1.4.1. Relational databases vs. document book
stores
1.4.2. MongoDB documents: JavaScript
data store
If you’re like us, you’re probably impatient to dive into some code and get
1.4.3. More than just a document database
on with building something. But let’s take a moment first to clarify what w
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling mean
and by full-stack development and look at the component parts of the
more stack to make sure that you understand each one.
1.5. Introducing Angular: The front-end
framework
When we talk about full-stack development, we’re really talking about
1.5.1. jQuery vs. Angular
developing all parts of a website or application. The full stack starts with
1.5.2. Two-way data binding: Working with
the database and web server in the back end, contains application logic an
data in a page
control in the middle, and goes all the way through to the user interface at
1.5.3. Using Angular to load new pages
the front end.
1.5.4. Are there any downsides?
1.5.5. Developing in TypeScript
The MEAN stack is a pure JavaScript stack comprised of four main
1.6. Supporting cast
technologies, with a cast of supporting technologies:
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control
MongoDB—the database
1.6.3. Hosting with Heroku
Express—the web framework
1.7. Putting it together with a practical
Angular—the front-end framework
example
Node.js—the web server
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
work together MongoDB has been around since 2007 and is actively main
maintained by
MongoDB, Inc., previously known as 10gen.
Ch 2 Designing a MEAN stack architecture 

Express was first released in 2009 by T. J. Holowaychuk and has become th

most popular framework for Node.js. It’s open source, with more than 100
contributors, and is actively developed and supported.

Angular is open source and backed by Google. The first version of Angular
known as AngularJS or Angular 1, has been around since 2010. Angular 2,
now known simply as Angular, was officially released in 2016 and is
continually being developed and extended. The current version is Angular
7.1; Angular 2+ isn’t backward-compatible with AngularJS. See the sidebar
https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 1/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

“Angular versions and release cycles” for a bit more information about th
number and release cycles.

table of contents ANGULAR VERSIONS AND RELEASE CYCLES

index
1.2.1. JavaScript: The single language
through the stack 
The change from Angular 1.x to Angular 2 was a big deal in the
1.2.2. Fast, efficient, and scalable
developer community. It was a long time coming, different, and notbuy

1.2.3. Using prebuilt packages via npm

backward-compatible. But now Angular is releasing versions muchnow
1.3. Introducing Express: The framework
more frequently, aiming for every six months. The current version is
1.3.1. Easing your server setup
Angular 7.1, with further iterations already being heavily worked on.
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses
The frequency of change is nothing to worry about, though; the
1.3.4. Remembering visitors with session
changes are nowhere near as big as the complete rewrite that happened
support
between 1.x and 2.0. The changes are generally small, incremental
1.4. Introducing MongoDB: The database
changes. There may be some breaking changes between 4 and 5, or 5
1.4.1. Relational databases vs. document
stores and 6, and so on, but these changes are normally small, specific items
that are easy to pick up—unlike the change from Angular 1.x to 2.0.
1.4.2. MongoDB documents: JavaScript
data store
1.4.3. More than just a document database
Node.js was created in 2009, and its development and maintenance
main are
1.4.4. What is MongoDB not good for?
currently under the purview of the Node Foundation, of which Joyent (the
1.4.5. Mongoose for data modeling organization
and that created Node) is a major member. Node.js uses Google’s
more
open source V8 JavaScript engine at its core.
1.5. Introducing Angular: The front-end
framework
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Workinglivebook
with features:



data in a page highlight, annotate, and bookmark
1.5.3. Using Angular to load new pages
Select a piece of text and click the appropriate icon to comment, bookmark, or highlight
1.5.4. Are there any downsides?
1.5.5. Developing in TypeScript view how
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control
1.1. Why learn the full stack?
1.6.3. Hosting with Heroku
1.7. Putting it together with a practicalIndeed, why learn the full stack? It sounds like an awful lot of work! Well,
example yes, it is quite a lot of work, but it’s also rewarding, as you get to create
1.7.1. Introducing the example application
fully functioning data-driven websites and applications all by yourself. An
1.7.2. How the MEAN stack components with the MEAN stack, the work isn’t as hard as you might think.
work together

Ch 2 Designing a MEAN stack architecture 

1.1.1. A brief history of web development

Back in the early days of the web, people didn’t have high expectations of
websites. Not much emphasis was given to presentation; building website
was much more about what was going on behind the scenes. Typically, if
you knew something like Perl and could string together a bit of HTML, you
were a web developer.

As use of the internet spread, businesses started to take more of an interes

in how their online presence portrayed them. In combination with

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 2/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

increased browser support for Cascading Style Sheets (CSS) and JavaScrip
this interest led to more-complicated front-end implementations. It was
no longer a case of being able to string together HTML; you needed to
table of contents spend
index time on CSS and JavaScript, making sure that it looked right and
1.2.1. JavaScript: The single language
worked as expected. And all this needed to work in different browsers,
through the stack  less compliant than they are today.
which were much
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

This is where the distinction between front-end developer and back-end

now
1.3. Introducing Express: The frameworkdeveloper came in. Figure 1.1 illustrates this separation over time.
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses Figure 1.1. Divergence of front-end and back-end developers over time
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 While back-end developers focused on the mechanics behind the scenes,
1.7. Putting it together with a practicalfront-end developers focused on building a good user experience. As time
example went on, higher expectations were made of both camps, encouraging this
1.7.1. Introducing the example application
trend to continue. Developers often had to choose an area of expertise and
1.7.2. How the MEAN stack components
focus on it.
work together

Ch 2 Designing a MEAN stack architecture 

Helping developers with libraries and frameworks

During the 2000s, libraries and frameworks started to become popular an

prevalent for the most common languages on both the front and back end
Think Dojo and jQuery for front-end JavaScript; think Symfony for PHP an
Ruby on Rails. These frameworks were designed to make life easier for
developers, lowering the barriers to entry. A good library or framework
abstracts away some of the complexities of development, allowing you to
code faster and requiring less in-depth expertise. This trend toward
simplification has resulted in a resurgence of full-stack developers who

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 3/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

build both the front end and the application logic behind it, as figure 1.2
shows.

table of contents index

1.2.1. JavaScript: The single languageFigure 1.2. Impact of frameworks on the separated web development
through the stack factions 
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

now
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? Figure 1.2 illustrates a trend rather than proclaims a definitive “all web
developers should be full-stack developers” maxim. There have been full-
1.5.5. Developing in TypeScript
stack developers throughout the entire history of the web, and moving
1.6. Supporting cast
forward, it’s most likely that some developers will choose to specialize in
1.6.1. Twitter Bootstrap for user interface
either front-end or back-end development. The intention is to show that
1.6.2. Git for source control
through the use of frameworks and modern tools, you no longer have to
1.6.3. Hosting with Heroku
choose one end or the other to be a good web developer.
1.7. Putting it together with a practical
example
A huge advantage in embracing the framework approach is that you can b
1.7.1. Introducing the example application
incredibly productive, because you’ll have an all-encompassing vision of
1.7.2. How the MEAN stack components
work together the application and how it ties together.
Ch 2 Designing a MEAN stack architecture 
Moving the application code forward in the stack

Continuing with the trend toward frameworks, the past few years have
seen an increasing effort to move the application logic away from the
server and into the front end. Think of this as coding the back end in the
front end. Some of the most popular JavaScript frameworks doing this are
Angular, React, and Vue.js.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 4/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Tightly coupling the application code to the front end this way tends to blu
the lines between traditional front-end and back-end developers. One of
the reasons why people like to use this approach is that it reduces the load
table of contents onindex
the servers, thus reducing cost. What you’re doing in effect is
1.2.1. JavaScript: The single language
crowdsourcing the computational power required for the application by
through the stack 
pushing that load into users’ browsers.
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

now
We’ll discuss the pros and cons of this approach in section 1.5 and explain
1.3. Introducing Express: The framework
when it may (or may not) be appropriate to use one of these technologies.
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses
1.1.2. The trend toward full-stack developing
1.3.3. Views: HTML responses
1.3.4. Remembering visitors with session
As discussed, the paths of front-end and back-end developers are mergin
support
it’s entirely possible to be fully proficient in both disciplines. If you’re a
1.4. Introducing MongoDB: The database
freelancer, consultant, or part of a small team, being multiskilled is
1.4.1. Relational databases vs. document
stores extremely useful, increasing the value that you can provide for your client
Being able to develop the full scope of a website or application gives you
1.4.2. MongoDB documents: JavaScript
data store better overall control and can help the parts work seamlessly together,
because they haven’t been built in isolation by separate teams.
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 If
andyou work as part of a large team, chances are that you’ll need to
more specialize in (or at least focus on) one area. But it’s generally advisable to
understand how your component fits with other components, giving you a
1.5. Introducing Angular: The front-end
framework greater appreciation of the requirements and goals of other teams and the
1.5.1. jQuery vs. Angular overall project.
1.5.2. Two-way data binding: Working with
data in a page
In the end, building on the full stack yourself is rewarding. Each part come
1.5.3. Using Angular to load new pages
with its own challenges and problems to solve, keeping things interesting
1.5.4. Are there any downsides?
The technology and tools available today enhance this experience and
1.5.5. Developing in TypeScript
empower you to build great web applications relatively quickly and easily.
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
1.1.3. Benefits of full-stack development
1.6.2. Git for source control
1.6.3. Hosting with Heroku There are many benefits to learning full-stack development. For starters,
1.7. Putting it together with a practicalthere’s the enjoyment of learning new things and playing with new
example
technologies, of course. Then you have the satisfaction of mastering
1.7.1. Introducing the example application
something different and the thrill of being able to build and launch a full
1.7.2. How the MEAN stack components
database-driven application all by yourself.
work together

Ch 2 Designing a MEAN stack architecture 

The benefits of working in a team include the following:

You’re more likely to have a better view of the bigger picture by

understanding the different areas and how they fit together.
You’ll form an appreciation of what other parts of the team are
doing and what they need to be successful.
Like other team members, you can move around more freely.

The additional benefits of working by yourself include

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 5/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

You can build applications end-to-end by yourself without

depending on other people.
You develop more skills, services, and capabilities to offer
table of contents indexcustomers.
1.2.1. JavaScript: The single language
through the stack  a lot to be said for full-stack development. Most of the
All in all, there’s
1.2.2. Fast, efficient, and scalableaccomplished developers we’ve met have been full-stack developers. Thei
1.2.3. Using prebuilt packages via npm buy

overall understanding and ability to see the bigger picture is a tremendous

now
1.3. Introducing Express: The framework
bonus.
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses 1.1.4. Why the MEAN stack specifically?
1.3.3. Views: HTML responses
The MEAN stack pulls together some of the “best-of-breed” modern web
1.3.4. Remembering visitors with session
support technologies into a powerful, flexible stack. One great thing about the
1.4. Introducing MongoDB: The database MEAN stack is that it not only uses JavaScript in the browser, but also uses
1.4.1. Relational databases vs. document
JavaScript throughout. Using the MEAN stack, you can code the front end
stores and back end in the same language. That being said, it’s more common to
1.4.2. MongoDB documents: JavaScript
build the Angular part of the stack in TypeScript. We’ll discuss this
data store
reasoning in chapter 8.
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
Figure 1.3 demonstrates the principal technologies of the MEAN stack and
1.4.5. Mongoose for data modeling and
more shows where each one is commonly used.

1.5. Introducing Angular: The front-end

framework
1.5.1. jQuery vs. Angular Figure 1.3. The principal technologies of the MEAN stack
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

Ch 2 Designing a MEAN stack architecture 

The principal technology allowing full-stack JavaScript to happen is
Node.js, bringing JavaScript to the back end.

livebook features:




discuss

Ask a question, share an example, or respond to another reader. Start a thread by selecting any
piece of text and clicking the discussion icon.

view how open discussions

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 6/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

1.2. Introducing Node.js: The web server/platform

table of contents index
Node.js is the N in MEAN. Being last doesn’t mean that it’s the least
1.2.1. JavaScript: The single language
through the stack important: it’sthe foundation of the stack!
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

In a nutshell, Node.js is a software platform that allows you to create your

now
own web server and build web applications on top of it. Node.js isn’t itself
1.3. Introducing Express: The framework
1.3.1. Easing your server setup web server; neither is it a language. It contains a built-in HTTP server
1.3.2. Routing URLs to responses library, meaning that you don’t need to run a separate web server program
1.3.3. Views: HTML responses such as NGINX, Apache, or Internet Information Services (IIS). This gives
you greater control of how your web server works but also increases the
1.3.4. Remembering visitors with session
support complexity of getting it up and running, particularly in a live environment
1.4. Introducing MongoDB: The database
1.4.1. Relational databases vs. document
With PHP, for example, you can easily find a shared-server web host
stores
running Apache and send some files over FTP, and—all being well—your
1.4.2. MongoDB documents: JavaScript
site is running. This works because the web host has already configured
data store
Apache for you and others to use. With Node.js, this isn’t the case, because
1.4.3. More than just a document database
you configure the Node.js server when you create your application. Many o
1.4.4. What is MongoDB not good for?
the traditional web hosts are behind the curve on Node.js support, but
1.4.5. Mongoose for data modeling and
more several new Platform as a Service (PaaS) hosts are springing up to address
this need, including Heroku, Nodejitsu, and DigitalOcean. The approach to
1.5. Introducing Angular: The front-end
framework deploying live sites on these PaaS hosts is different from the old FTP mode
1.5.1. jQuery vs. Angular but easy when you get the hang of it. You’ll be deploying a site live to
Heroku
1.5.2. Two-way data binding: Working with as you go through the book.
data in a page
1.5.3. Using Angular to load new pages
An alternative approach to hosting a Node.js application is doing it yourse
1.5.4. Are there any downsides? on a dedicated server or virtual server from a cloud provider like AWS or
1.5.5. Developing in TypeScript Azure, on which you can install anything you need. But production server
1.6. Supporting cast administration is a topic for another book! And although you could
1.6.1. Twitter Bootstrap for user interface
independently swap out any of the other components with an alternative
1.6.2. Git for source control technology, if you take Node.js out, everything that sits on top of it
1.6.3. Hosting with Heroku changes.
1.7. Putting it together with a practical
example
1.2.1. JavaScript: The single language through the stack
1.7.1. Introducing the example application
One of the main reasons why Node.js is gaining broad popularity is that yo
1.7.2. How the MEAN stack components
work together code it in a language that most web developers are already familiar with:
JavaScript.Until Node was released, if you wanted to be a full-stack
Ch 2 Designing a MEAN stack architecture
developer, you had to be proficient in at least two languages: JavaScript on
the front end and something like PHP or Ruby on the back end.

MICROSOFT’S FORAY INTO SERVER-SIDE JAVASCRIPT

In the late 1990s, Microsoft released Active Server Pages (now known
as Classic ASP). ASP could be written in VBScript or JavaScript, but the
JavaScript version didn’t take off, largely because at the time, a lot of
people were familiar with Visual Basic, which VBScript looks like. Many

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 7/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

books and online resources were for VBScript, so it snowballed into

becoming the standard language for Classic ASP.

table of contents indexthe release of Node.js, you can use what you already know and put it
With
1.2.1. JavaScript: The single language
use on the server. One of the hardest parts of learning a new technology lik
through the stack 
this is learning the language, but if you already know some JavaScript,
1.2.2. Fast, efficient, and scalable
you’re one step ahead!
1.2.3. Using prebuilt packages via npm buy

now
1.3. Introducing Express: The framework
There’s a learning curve when you’re taking on Node.js, even if you’re an
1.3.1. Easing your server setup
experienced front-end JavaScript developer. The challenges and obstacles
1.3.2. Routing URLs to responses
in server-side programming are different from those on the front end, bu
1.3.3. Views: HTML responses
you’ll face those challenges no matter what technology you use. On the
1.3.4. Remembering visitors with session
front end, you may be concerned about making sure that everything work
support
in a variety of browsers on different devices. On the server, you’re more
1.4. Introducing MongoDB: The database
likely to be aware of the flow of the code to ensure that nothing gets held u
1.4.1. Relational databases vs. document
stores and that you don’t waste system resources.

1.4.2. MongoDB documents: JavaScript

data store 1.2.2. Fast, efficient, and scalable
1.4.3. More than just a document database
Another reason for the popularity of Node.js is that, when coded correctly
1.4.4. What is MongoDB not good for?
it’s extremely fast and makes efficient use of system resources. These
1.4.5. Mongoose for data modeling and
more features enable a Node.js application to serve more users on fewer server
resources than most of the other main
1.5. Introducing Angular: The front-end mainstream server technologies. Busines
framework owners also like the idea of Node.js because it can reduce their running
1.5.1. jQuery vs. Angular costs, even at large scale.
1.5.2. Two-way data binding: Working with
data in a page
How does Node.js do this? Node.js is light on system resources because it’s
1.5.3. Using Angular to load new pages
single-threaded, whereas traditional web servers are multithreaded. In th
1.5.4. Are there any downsides?
following sections, we’ll look at what those terms mean, starting with the
1.5.5. Developing in TypeScript traditional multithreaded approach.
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
Traditional multithreaded web server
1.6.2. Git for source control
1.6.3. Hosting with Heroku
Most of the current mainstream
main web servers are multithreaded, including
1.7. Putting it together with a practical
Apache and IIS. What this means is that every new visitor (or session) is
example
given a separate thread and associated amount of RAM, often around 8 MB
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
work together Thinking of a real-world analogy, imagine two people going into a bank
wanting todo separate things. In a multithreaded model, they’d each go t
Ch 2 Designing a MEAN stack architecture
a separate bank teller who would deal with their requests, as shown in
figure 1.4.

Figure 1.4. Example of a multithreaded approach: Visitors use separate

resources. Visitors and their dedicated resources have no awareness of
or contact with other visitors and their resources.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 8/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

table of contents index

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 buy

now
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
You can see in figure 1.4 that Simon goes to bank teller 1, and Sally goes to
1.6. Supporting cast
bank teller 2. Neither side is aware of or affected by the other. Bank teller 1
1.6.1. Twitter Bootstrap for user interface
deals with Simon, and nobody else, throughout the entirety of the
1.6.2. Git for source control
transaction; the same goes for bank teller 2 and Sally.
1.6.3. Hosting with Heroku
1.7. Putting it together with a practical
example This approach works perfectly well as long as you have enough tellers to
service the customers. When the bank gets busy and the customers
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components outnumber the tellers, the service starts to slow and the customers have t
work together wait to be seen. Although banks don’t always worry about this situation to
much and seem happy to make you stand in line, the same isn’t true of
Ch 2 Designing a MEAN stack architecture 
websites. If a website is slow to respond, users are likely to leave and neve
come back.

This is one of the reasons why web servers are often overpowered and hav
so much RAM, even though they don’t need it 90% of the time. The
hardware is set up in such a way as to be prepared for a huge spike in traffi
This setup is like the bank hiring an additional 50 full-time tellers and
moving to a bigger building because it gets busy at lunchtime.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 9/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Surely there’s a better way—a way that’s a bit more scalable. Here’s wher
the single-threaded approach comes in.

table of contents index

Single-threaded web server
1.2.1. JavaScript: The single language
through the stack 
1.2.2. Fast, efficient, and scalable A Node.js server is single-threaded and works differently from a
multithreaded server. Rather than giving each visitor a unique thread buy

1.2.3. Using prebuilt packages via npm and

now
separate silo of resources, the server has every visitor join the same thread
1.3. Introducing Express: The framework
1.3.1. Easing your server setup A visitor and thread interact only when necessary—when the visitor is
requesting something or the thread is responding to a request.
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses
Returning to the bank-teller analogy, there’d be only one teller who deals
1.3.4. Remembering visitors with session
support with all the customers. But rather than taking on and managing all reques
1.4. Introducing MongoDB: The databaseend to end, the teller delegates any time-consuming tasks to back-office
staff and deals with the next request. Figure 1.5 illustrates how this proces
1.4.1. Relational databases vs. document
stores might work, using the two requests from the multithreaded example.
1.4.2. MongoDB documents: JavaScript
data store
1.4.3. More than just a document database
Figure 1.5. Example of a single-threaded approach: Visitors use the
same central resource. The central resource must be well disciplined to
1.4.4. What is MongoDB not good for?
prevent one visitor from affecting others.
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

Ch 2 Designing a MEAN stack architecture 

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 10/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

table of contents index

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 buy

now
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 In the single-threaded approach shown in figure 1.5, Sally and Simon give

1.6.3. Hosting with Heroku their requests to the same bank teller. But instead of dealing with one of
them exclusively before the next, the teller takes the first request and
1.7. Putting it together with a practical
example passes it to the best person to deal with it before taking the next request
1.7.1. Introducing the example application
and doing the same thing. When the teller is told that a requested task is
complete, the teller passes the result back to the visitor who made the
1.7.2. How the MEAN stack components
work together request.
Ch 2 Designing a MEAN stack architecture 

BLOCKING VS. NONBLOCKING CODE

With the single-threaded model, it’s important to remember that all of

your users use the same central process. To keep the flow smooth, you
need to make sure that nothing in your code causes a delay, blocking
another operation. An example would be if the bank teller has to go to
the safe to deposit the money for Simon, in which case Sally would
have to wait to make her request.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 11/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Similarly, if your central process is responsible for reading each static

file (such as CSS, JavaScript, or images), it won’t be able to process any
other request, thus blocking the flow. Another common task that’s
table of contents index
potentially blocking is interacting with a database. If your process is
1.2.1. JavaScript: The single language going to the database each time it’s asked, be it searching for data or
through the stack 
saving data, it won’t be able to do anything else.
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

For the single-threaded approach to work, you must make sure thatnow
1.3. Introducing Express: The framework
your code is nonblocking. The way to achieve this is to make any
1.3.1. Easing your server setup
blocking operations run asynchronously, preventing them from
1.3.2. Routing URLs to responses
blocking the flow of your main process.
1.3.3. Views: HTML responses
1.3.4. Remembering visitors with session
support Despite there being a single teller, neither of the visitors is aware of the

1.4. Introducing MongoDB: The databaseother, and neither is affected by the requests of the other. This approach
means that the bank doesn’t need several tellers always on hand. This
1.4.1. Relational databases vs. document
stores model isn’t infinitely scalable, of course, but it’s more efficient. You can d
more with fewer resources. It doesn’t mean, however, that you’ll never
1.4.2. MongoDB documents: JavaScript
data store need to add more resources.
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
This particular approach is possible in Node.js due to the asynchronous
1.4.5. Mongoose for data modeling capabilities
and of JavaScript, as you’ll see in action throughout the book. But
more
you’re not sure about the theory, check out appendix D (available online o
1.5. Introducing Angular: The front-end
in the e-book), particularly the section on callbacks.
framework
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Working 1.2.3.
withUsing prebuilt packages via npm
data in a page
A package manager, npm, gets installed when you install Node.js. npm
1.5.3. Using Angular to load new pages
gives you the ability to download Node.js modules or packages to extend th
1.5.4. Are there any downsides?
functionality of your application. Currently, more than 350,000 packages
1.5.5. Developing in TypeScript
are available through npm, an indication of how much depth of knowledge
1.6. Supporting cast
and experience you can bring to an application. This figure is up from
1.6.1. Twitter Bootstrap for user interface
46,000, when the first edition of Getting MEAN was written four years ago
1.6.2. Git for source control
1.6.3. Hosting with Heroku
Packages in npm vary widely in what they give you. You’ll use some npm
1.7. Putting it together with a practical
packages throughout this book to bring in an application framework and a
example
database driver with schema support. Other examples include helper
1.7.1. Introducing the example application
libraries such as Underscore, testing frameworks like Mocha, and utilities
1.7.2. How the MEAN stack components
work together like Colors, which adds color support to Node.js console logs. You’ll look
more closely
 at npm and how it works when you start building an
Ch 2 Designing a MEAN stack architecture
application in chapter 3.

As you’ve seen, Node.js is extremely powerful and flexible, but it doesn’t

give you much help when you’re trying to create a website or application.
Express can give you a hand here. You install Express by using npm.

livebook features:




settings

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 12/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED
Update your profile, view your dashboard, tweak the text size, or turn on dark mode.

view how

table of contents index

1.2.1. JavaScript: The single language
through the stack 1.3. Introducing
 Express: The framework
1.2.2. Fast, efficient, and scalable
Express is the E in MEAN. Because Node.js is a platform, it doesn’t prescrib
1.2.3. Using prebuilt packages via npm buy

now
how it should be set up or used, which is one of its great strengths. But
1.3. Introducing Express: The framework
1.3.1. Easing your server setup every time you create websites and web applications, quite a few common
tasks need doing. Express is a web application framework for Node.js that
1.3.2. Routing URLs to responses
designed to perform these tasks in a well-tested, repeatable way.
1.3.3. Views: HTML responses
1.3.4. Remembering visitors with session
support 1.3.1. Easing your server setup
1.4. Introducing MongoDB: The database
As already noted, Node.js is a platform, not a server, which allows you to
1.4.1. Relational databases vs. document
stores get creative with your server setup and do things that you can’t do with
other web servers. It also makes getting a basic website up and running
1.4.2. MongoDB documents: JavaScript
data store harder.
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
Express abstracts away this difficulty by setting up a web server to listen t
1.4.5. Mongoose for data modeling incoming
and requests and return relevant responses. In addition, it defines a
more directory structure. One folder is set up to serve static files in a nonblockin
1.5. Introducing Angular: The front-end
way; the last thing you want is for your application to have to wait when
framework
someone requests a CSS file! You could configure this yourself directly in
1.5.1. jQuery vs. Angular
Node.js, but Express does it for you.
1.5.2. Two-way data binding: Working with
data in a page
1.3.2. Routing URLs to responses
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides?
One of the great features of Express is that it provides a simple interface fo
1.5.5. Developing in TypeScript
directing an incoming URL to a certain piece of code. Whether this interfac
1.6. Supporting cast will serve a static HTML page, read from a database, or write to a database
1.6.1. Twitter Bootstrap for user interface
doesn’t matter. The interface is simple and consistent.
1.6.2. Git for source control
1.6.3. Hosting with Heroku Express abstracts away some of the complexity of creating a web server in
1.7. Putting it together with a practicalnative Node.js to make code quicker to write and easier to main
maintain.
example
1.7.1. Introducing the example application
1.3.3. Views: HTML responses
1.7.2. How the MEAN stack components
work together
It’s likely that you’ll want to respond to many of the requests to your
Ch 2 Designing a MEAN stack architecture 
application by sending some HTML to the browser. By now, it will come as
no surprise to you that Express makes this task easier than it is in native
Node.js.

Express provides support for many templating engines that make it easier
to build HTML pages in an intelligent way, using reusable components as
well as data from your application. Express compiles these together and
serves them to the browser as HTML.

1.3.4. Remembering visitors with session support

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 13/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Being single-threaded, Node.js doesn’t remember a visitor from one

request to the next. It doesn’t have a silo of RAM set aside for you; it sees
only a series of HTTP requests. HTTP is a stateless protocol, so there’s no
table of contents index
concept of storing a session state. As it stands, it’s difficult to create a
1.2.1. JavaScript: The single language
personalized experience in Node.js or have a secure area where a user has
through the stack 
log in; it’s not much use if the site forgets who you are on every page. You
1.2.2. Fast, efficient, and scalable
can do it, of course, but you have to code it yourself.
1.2.3. Using prebuilt packages via npm buy

now
1.3. Introducing Express: The framework
You’ll never guess what: Express has an answer to this problem too!
1.3.1. Easing your server setup
Express can use sessions so that you can identify individual visitors throug
1.3.2. Routing URLs to responses
multiple requests and pages. Thank you, Express!
1.3.3. Views: HTML responses
1.3.4. Remembering visitors with session
support Sitting on top of Node.js, Express gives you a great helping hand and a

1.4. Introducing MongoDB: The databasesound starting point for building web applications. It abstracts away many
complexities and repeatable tasks that most of us don’t need—or want—t
1.4.1. Relational databases vs. document
stores worry about. We only want to build web applications.
1.4.2. MongoDB documents: JavaScript
data store
1.4.3. More than just a document database
livebook features:



1.4.4. What is MongoDB not good for?
highlight, annotate, and bookmark
1.4.5. Mongoose for data modeling and
more Select a piece of text and click the appropriate icon to comment, bookmark, or highlight
1.5. Introducing Angular: The front-end
framework view how
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Working with
data in a page
1.4. Introducing MongoDB: The database
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides? The ability to store and use data is vital for most applications. In the MEAN
1.5.5. Developing in TypeScript stack, the database of choice is MongoDB, the M in MEAN. MongoDB fits
1.6. Supporting cast into the stack incredibly well. Like Node.js, it’s renowned for being fast an
1.6.1. Twitter Bootstrap for user interface
scalable.
1.6.2. Git for source control
1.6.3. Hosting with Heroku 1.4.1. Relational databases vs. document stores
1.7. Putting it together with a practical
example If you’ve used a relational database before, or even a spreadsheet, you’ll b
1.7.1. Introducing the example application
used to the concepts of columns and rows. Typically, a column defines the
1.7.2. How the MEAN stack components
name and data type, and each row is a different entry. See table 1.1 for an
work together example.
Ch 2 Designing a MEAN stack architecture 

Table 1.1. An example of rows and columns in a relational database

table
firstName middleName lastName maidenName nickname

Simon David Holmes   Si

Sally June Panayiotou    
Rebecca   Norman Holmes Bec

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 14/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

MongoDB is not like that! MongoDB is a document store. The concept of

rows still exists, but columns are removed from the picture. Rather than a
column defining what should be in the row, each row is a document, and
table of contents index
this document both defines and holds the data itself. Table 1.2 shows how
1.2.1. JavaScript: The single language
collection of documents might be listed. (The indented layout is for
through the stack 
readability, not a visualization of columns.)
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

now
1.3. Introducing Express: The frameworkTable 1.2. Each document in a document database defines and holds the
1.3.1. Easing your server setup data, in no particular order.
1.3.2. Routing URLs to responses
firstName: middleName: lastName:
1.3.3. Views: HTML responses nickname: "Si"
"Simon" "David" "Holmes"
1.3.4. Remembering visitors with session
lastName: middleName: firstName:
support  
"Panayiotou" "June" "Sally"
1.4. Introducing MongoDB: The databasemaidenName: firstName: lastName: nickname:
1.4.1. Relational databases vs. document
"Holmes" "Rebecca" "Norman" "Bec"
stores
1.4.2. MongoDB documents: JavaScript
data store
1.4.3. More than just a document database
This less-structured approach means that a collection of documents could
1.4.4. What is MongoDB not good for?
have a wide variety of data inside. In the next section, you’ll look at a
1.4.5. Mongoose for data modeling sample
and document to get a better idea of what we’re talking about.
more
1.5. Introducing Angular: The front-end
framework 1.4.2. MongoDB documents: JavaScript data store
1.5.1. jQuery vs. Angular
MongoDB stores documents as BSON, which is binary JSON (JavaScript
1.5.2. Two-way data binding: Working with
Serialized Object Notation). Don’t worry for now if you’re not fully familia
data in a page
with JSON; check out the relevant section in appendix D. In short, JSON is
1.5.3. Using Angular to load new pages
JavaScript way of holding data, which is why MongoDB fits so well into th
1.5.4. Are there any downsides?
JavaScript-centric MEAN stack!
1.5.5. Developing in TypeScript
1.6. Supporting cast
The following code snippet shows a simple example MongoDB document:
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control
1.6.3. Hosting with Heroku {

"firstName" : "Simon",

1.7. Putting it together with a practical "lastName" : "Holmes",

example _id : ObjectId("52279effc62ca8b0c1000007")

}
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
copy 
work together

Ch 2 Designing a MEAN stack architecture 

Even if you don’t know JSON well, you can probably see that this documen
stores the first and last names of Simon Holmes. Rather than a document
holding a data set that corresponds to a set of columns, a document holds
name/value pairs, which makes a document useful in its own right becaus
it both describes and defines the data.

A quick word about _ id : You most likely noticed the _ id entry alongsid
the names in the preceding example MongoDB document. The _ id entity
https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 15/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

is a unique identifier that MongoDB assigns to any new document when it

created.

table of contents index look at MongoDB documents in more detail in chapter 5, when you
You’ll
1.2.1. JavaScript: The single language
start to add data to your application.
through the stack 
1.2.2. Fast, efficient, and scalable
1.4.3. More than just a document database buy

1.2.3. Using prebuilt packages via npm now

1.3. Introducing Express: The framework
MongoDB sets itself apart from many other document databases with its
1.3.1. Easing your server setup support for secondary indexing and rich queries. You can create indexes on
1.3.2. Routing URLs to responses more than the unique identifier field, and querying indexed fields is much
1.3.3. Views: HTML responses faster. You can also create some fairly complex queries against a MongoDB
1.3.4. Remembering visitors with session
database—not to the level of huge SQL commands with joins all over the
support place, but powerful enough for most use cases.
1.4. Introducing MongoDB: The database
1.4.1. Relational databases vs. document
As you build an application through the course of this book, you’ll get to
stores
have some fun with MongoDB and start to appreciate exactly what it can
1.4.2. MongoDB documents: JavaScript
data store do.
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling and
more As of version 4, there’s little that a traditional RDBMS can do that
MongoDB can’t, beyond the obvious differences we’ve already discussed.
1.5. Introducing Angular: The front-end
framework One of the biggest issues in earlier versions of MongoDB was lack of
1.5.1. jQuery vs. Angular transaction support. MongoDB 4, the version used in this book, has the
capability
1.5.2. Two-way data binding: Working with to perform multidocument transactions with ACID (atomicity,
data in a page consistency, isolation, durability) guarantees.
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides? 1.4.5. Mongoose for data modeling and more
1.5.5. Developing in TypeScript
1.6. Supporting cast MongoDB’s flexibility in what it stores in documents is a great thing for th
database. But most applications need some structure to their data. Note
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control that the application needs structure, not the database. So where does it
make most sense to define the structure of your application data? In the
1.6.3. Hosting with Heroku
application itself!
1.7. Putting it together with a practical
example
1.7.1. Introducing the example application
To this end, the company behind MongoDB created Mongoose. In the
company’s words, Mongoose provides “elegant MongoDB object modelin
1.7.2. How the MEAN stack components
work together for Node.js” (https://mongoosejs.com).
Ch 2 Designing a MEAN stack architecture 

What is data modeling?

Data modeling, in the context of Mongoose and MongoDB, defines what

data can be in a document and what data must be in a document. When
storing user information, you may want to be able to save the first name,
last name, email address, and phone number. But you need only the first
name and email address, and the email address must be unique. This
information is defined in a schema, which is used as the basis for the data
model.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 16/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

What else does Mongoose offer?

As well as modeling data, Mongoose adds an entire layer of features on top

table of contents index
of MongoDB that are useful for building web applications. Mongoose make
1.2.1. JavaScript: The single language
it easier to manage the connections to your MongoDB database and to sav
through the stack 
and read data. You’ll use all of these features later. Also later in the book,
1.2.2. Fast, efficient, and scalable
we’ll discuss how Mongoose enables you to add data validation at the buy

1.2.3. Using prebuilt packages via npm now

schema level, making sure that you allow only valid data to be saved in the
1.3. Introducing Express: The framework
database.
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses
MongoDB is a great choice of database for most web applications, because
1.3.3. Views: HTML responses
it provides a balance between the speed of pure document databases and
1.3.4. Remembering visitors with session
support the power of relational databases. The data is effectively stored in JSON,
which makes it the perfect data store for the MEAN stack.
1.4. Introducing MongoDB: The database
1.4.1. Relational databases vs. document
stores Figure 1.6 shows some of the highlights of Mongoose and how it fits
1.4.2. MongoDB documents: JavaScriptbetween the database and the application.
data store
1.4.3. More than just a document database
Figure 1.6. Mongoose fits between the database and the application,
1.4.4. What is MongoDB not good for?
providing an easy-to-use interface (object models) and access to other
1.4.5. Mongoose for data modeling and
more functionality, such as validation.
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

Ch 2 Designing a MEAN stack architecture 

livebook features:




discuss

Ask a question, share an example, or respond to another reader. Start a thread by selecting any
piece of text and clicking the discussion icon.

view how open discussions

1.5. Introducing Angular: The front-end framework

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 17/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Angular is the A in MEAN. In simple terms, Angular is a JavaScript

framework for creating the interface for your website or application. In th
book, you’ll be working with Angular 7, which is the most recently availab
table of contents index
version. All previous versions have been deprecated, and the online
1.2.1. JavaScript: The single language
through the stack documentation no longer applies.
1.2.2. Fast, efficient, and scalable
buy

You could use Node.js, Express, and MongoDB to build a fully functioning
1.2.3. Using prebuilt packages via npm now
data-driven web application, and you’ll do that in this book. But you can
1.3. Introducing Express: The framework
1.3.1. Easing your server setup put some icing on the cake by adding Angular to the stack.
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses The traditional way of doing things is to have all data processing and
application logic on the server, which then passes HTML to the browser.
1.3.4. Remembering visitors with session
support Angular enables you to move some or all of this processing and logic to the
1.4. Introducing MongoDB: The database browser, often leaving the server passing data from the database. We’ll ta
1.4.1. Relational databases vs. document
a look at this process in a moment when we discuss data binding, but first
stores
we need to address the question of whether Angular is like jQuery, the
1.4.2. MongoDB documents: JavaScript
leading front-end JavaScript library.
data store
1.4.3. More than just a document database
1.5.1. jQuery vs. Angular
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling If
and
you’re familiar with jQuery, you may be wondering whether Angular
more
works the same way. The short answer is no, not really. jQuery is generally
1.5. Introducing Angular: The front-end
added to a page to provide interactivity after the HTML has been sent to th
framework
1.5.1. jQuery vs. Angular browser and the Document Object Model (DOM) has completely loaded.
Angular comes in a step earlier, building the HTML from templates, based
1.5.2. Two-way data binding: Working with
data in a page on the data provided.
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides? Also, jQuery is a library and as such has a collection of features that you ca
1.5.5. Developing in TypeScript use as you wish. Angular is known as an opinionated framework, which
1.6. Supporting cast means that it forces its opinion on you as to how it needs to be used. It also
abstracts away some of the underlying complexity, simplifying the
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control development experience.

1.6.3. Hosting with Heroku

1.7. Putting it together with a practicalAs mentioned earlier, Angular helps put the HTML together based on the
example data provided, but it does more: it also immediately updates the HTML if
1.7.1. Introducing the example application
the data changes and can update the data if the HTML changes. This featu
1.7.2. How the MEAN stack components
is known as two-way data binding, which we’ll take a quick look at in the
work together
next section.
Ch 2 Designing a MEAN stack architecture 

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

To understand two-way data binding, consider a simple example. Compar

this approach with traditional one-way data binding. Imagine that you
have a web page and some data, and you want to do the following:

1. Display that data as a list to the user

2. Allow the user to filter that list by inputting text into a form field

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 18/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

In both approaches—one-way and two-way binding—step 1 is similar. Yo

use the data to generate some HTML markup for the end user to see. Step
is where things get a bit different.
table of contents index
1.2.1. JavaScript: The single language
In step 2, you want to let the user enter some text in a form field to filter
through the stack 
the list of data being displayed. With one-way data binding, you have to
1.2.2. Fast, efficient, and scalable
add event listeners to the form input field manually to capture the data an
buy

1.2.3. Using prebuilt packages via npm now

update the data model (to ultimately change what’s displayed to the user)
1.3. Introducing Express: The framework
1.3.1. Easing your server setup
With two-way data binding, any updates to the form can be captured
1.3.2. Routing URLs to responses
automatically, updating the model and changing what’s displayed to the
1.3.3. Views: HTML responses
user. This capability may not sound like a big deal, but to understand its
1.3.4. Remembering visitors with session
support power, it’s good to know that with Angular, you can achieve everything in

1.4. Introducing MongoDB: The database steps 1 and 2 without writing a single line of JavaScript code! That’s right—
it’s all done with Angular’s two-way data binding ... and a bit of help from
1.4.1. Relational databases vs. document
stores some other Angular features.
1.4.2. MongoDB documents: JavaScript
data store
As you go through part 3 of the book, you’ll get to see—and use—this in
1.4.3. More than just a document database
action. Seeing is believing with this feature, and you won’t be disappointe
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling and
1.5.3. Using Angular to load new pages
more
1.5. Introducing Angular: The front-end
One thing that Angular was specifically designed for is single-page
framework
application (SPA) functionality. In real terms, an SPA runs everything insid
1.5.1. jQuery vs. Angular
the browser and never does a full page reload. All application logic, data
1.5.2. Two-way data binding: Working with
processing, user flow, and template delivery can be managed in the
data in a page
browser.
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides?
Think Gmail. That’s an SPA. Different views get shown in the page, along
1.5.5. Developing in TypeScript
with a variety of data sets, but the page itself never fully reloads.
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control This approach can reduce the amount of resources you need on your serve
because you’re essentially crowdsourcing the computational power. Each
1.6.3. Hosting with Heroku
person’s browser is doing the hard work; your server is serving up static
1.7. Putting it together with a practical
example files and data on request.
1.7.1. Introducing the example application
The user experience can also be better under this approach. After the
1.7.2. How the MEAN stack components
work together application is loaded, fewer calls are made to the server, reducing the
potential of latency.
Ch 2 Designing a MEAN stack architecture

All this sounds great, but surely there’s a price to pay. Why isn’t everythin
built into Angular?

1.5.4. Are there any downsides?

Despite its many benefits, Angular isn’t appropriate for every website.
Front-end libraries like jQuery are best used for progressive enhancement
The idea is that your site will function perfectly well without JavaScript,
and the JavaScript you use makes the experience better. That isn’t the case
https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 19/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

with Angular or indeed with any other SPA framework. Angular uses
JavaScript to build the rendered HTML from templates and data, so if your
browser doesn’t support JavaScript or there’s a bug in the code, the site
table of contents won’t
index run.
1.2.1. JavaScript: The single language
through the stack  JavaScript to build the page also causes problems with
This reliance on
1.2.2. Fast, efficient, and scalable
search engines. When a search engine crawls your site, it won’t run all
1.2.3. Using prebuilt packages via npm buy

JavaScript; with Angular, the only thing you get before JavaScript takes
now
1.3. Introducing Express: The framework over is the base template from the server. If you want to be 100% certain
1.3.1. Easing your server setup
that your content and data are indexed by search engines rather than only
1.3.2. Routing URLs to responses your templates, you need to think about whether Angular is right for that
1.3.3. Views: HTML responses project.
1.3.4. Remembering visitors with session
support
You have ways to combat this issue: in short, you need your server to
1.4. Introducing MongoDB: The database
output compiled content as well as Angular. But, if you don’t need to fight
1.4.1. Relational databases vs. document
stores this battle, we recommend against doing so.

1.4.2. MongoDB documents: JavaScript

data store One thing you can do is use Angular for some things and not others. There
1.4.3. More than just a document database
nothing wrong with using Angular selectively in your project. You might
1.4.4. What is MongoDB not good for?
have a data-rich interactive application or section of your site that’s ideal
1.4.5. Mongoose for data modeling for
and building in Angular, for example. Or you might have a blog or some
more marketing pages around your application. These elements don’t need to b
1.5. Introducing Angular: The front-end built in Angular and arguably would be better served from the server in th
framework
traditional way. So part of your site is served by Node.js, Express, and
1.5.1. jQuery vs. Angular
MongoDB, and another part also has Angular doing its thing.
1.5.2. Two-way data binding: Working with
data in a page
This flexible approach is one of the most powerful aspects of the MEAN
1.5.3. Using Angular to load new pages
stack. With one stack, you can achieve a great many things so long as you
1.5.4. Are there any downsides?
remember to be flexible in your thinking and don’t think of the MEAN stac
1.5.5. Developing in TypeScript
as being a single architecture stack.
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
Things are improving, though. Web-crawling technologies, particularly
1.6.2. Git for source control
those employed by Google, are becoming ever more capable, and this issu
1.6.3. Hosting with Heroku
is quickly becoming part of the past.
1.7. Putting it together with a practical
example
1.5.5. Developing in TypeScript
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
work together Angular applications can be written in many flavors of JavaScript, includin
ES5, ES2015+, and Dart. But the most popular by far is TypeScript.
Ch 2 Designing a MEAN stack architecture 

TypeScript is a superset of JavaScript, meaning that it is JavaScript, but

with added features. In this book, you’ll use TypeScript to build the Angul
part of your application. But don’t worry: we’ll start from the ground up in
part 3 and cover the parts of TypeScript you need to know.

livebook features:




settings

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 20/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED
Update your profile, view your dashboard, tweak the text size, or turn on dark mode.

view how

table of contents index

1.2.1. JavaScript: The single language
through the stack 1.6. Supporting
 cast
1.2.2. Fast, efficient, and scalable
The MEAN stack gives you everything you need to create data-rich buy

1.2.3. Using prebuilt packages via npm now

interactive web applications, but you may want to use a few extra
1.3. Introducing Express: The framework
1.3.1. Easing your server setup technologies to help you along the way. You can use Twitter Bootstrap to
create a good user interface, Git to help manage your code, and Heroku to
1.3.2. Routing URLs to responses
help by hosting the application on a live URL, for example. In later
1.3.3. Views: HTML responses
chapters, we’ll look at incorporating these technologies into the MEAN
1.3.4. Remembering visitors with session
support stack. In this section, we’ll cover briefly what each one can do for you.

1.4. Introducing MongoDB: The database

1.6.1. Twitter Bootstrap for user interface
1.4.1. Relational databases vs. document
stores
1.4.2. MongoDB documents: JavaScriptIn this book, you’re going to use Twitter Bootstrap to create a responsive
data store design with minimal effort. It’s not essential for the stack, and if you’re
building an application from existing HTML or a specific design, you
1.4.3. More than just a document database
probably won’t want to add it. But in this book, you’ll build an application
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling in
anda rapid prototype style, going from idea to application with no external
more influences.
1.5. Introducing Angular: The front-end
framework
Bootstrap is a front-end framework that provides a wealth of help for
1.5.1. jQuery vs. Angular
creating a great user interface. Among its features, Bootstrap provides a
1.5.2. Two-way data binding: Working with
responsive grid system, default styles for many interface components, an
data in a page
the ability to change the visual appearance with themes.
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides?
1.5.5. Developing in TypeScript
Responsive grid layout

1.6. Supporting cast

In a responsive layout, you serve up a single HTML page that arranges itse
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control differently on different devices by detecting the screen resolution rather
than trying to sniff out the actual device. Bootstrap targets four different
1.6.3. Hosting with Heroku
pixel-width breakpoints for their layouts, loosely aimed at phones, tablet
1.7. Putting it together with a practical
example laptops, and external monitors. If you give a bit of thought to how you set
up your HTML and CSS classes, you can use one HTML file to offer the sam
1.7.1. Introducing the example application
content in different layouts suited to screen size.
1.7.2. How the MEAN stack components
work together
CSS classes and HTML components
Ch 2 Designing a MEAN stack architecture

Bootstrap comes with a set of predefined CSS classes that can create usefu
visual components, such as page headers, alert-message containers, label
and badges, and stylized lists. The creators of Bootstrap put a lot of though
into the framework. Bootstrap helps you build an application quickly
without having to spend too much time on the HTML layout and CSS
styling.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 21/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Teaching Bootstrap isn’t an aim of this book, but we’ll point out various
features as you use them.

table of contents index

Adding themes for a different feel
1.2.1. JavaScript: The single language
through the stack 
1.2.2. Fast, efficient, and scalable Bootstrap has a default look and feel that provides a neat baseline, and it’s
so commonly used that your site could end up looking like anybody else’s.
1.2.3. Using prebuilt packages via npm buy

now
Fortunately, you can download themes for Bootstrap to give your
1.3. Introducing Express: The framework
1.3.1. Easing your server setup application a different twist. Downloading a theme is often as simple as
replacing the Bootstrap CSS file with a new one. You’ll use a free theme in
1.3.2. Routing URLs to responses
this book to build your application, but it’s also possible to buy premium
1.3.3. Views: HTML responses
themes from several websites to give an application a unique feel.
1.3.4. Remembering visitors with session
support
1.4. Introducing MongoDB: The database 1.6.2. Git for source control
1.4.1. Relational databases vs. document
stores Saving code on your computer or a network drive is all very well and good
but a computer or network drive holds only the current version and lets
1.4.2. MongoDB documents: JavaScript
data store only you (or other users on your network) access it.
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
Git is a distributed revision control and source code management system
1.4.5. Mongoose for data modeling that
and allows several people to work on the same codebase at the same time
more on different computers and networks. These can be pushed together, with
1.5. Introducing Angular: The front-end
all changes stored and recorded. It’s also possible to roll back to an earlier
framework
state if necessary.
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Working with
data in a page How to use Git
1.5.3. Using Angular to load new pages
1.5.4. Are there any downsides? Git is typically used from the command line, although GUIs are available
1.5.5. Developing in TypeScript for Windows, Linux, and Mac. Throughout this book, you’ll use command

1.6. Supporting cast line statements to issue the commands that you need. Git is powerful, and
we’ll scratch the surface of it in this book, but everything we do will be
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control provided as part of the examples.

1.6.3. Hosting with Heroku

1.7. Putting it together with a practicalIn a typical Git setup, you have a local repository on your machine and a
example remote centralized master repository hosted somewhere like GitHub or
1.7.1. Introducing the example application
Bitbucket. You can pull from the remote repository into your local one or
push from local to remote. All these tasks are easy to perform from the
1.7.2. How the MEAN stack components
work together command line, and GitHub and Bitbucket have web interfaces so that you
can visually
Ch 2 Designing a MEAN stack architecture  keep track of everything you’ve committed.

What is Git used for here?

In this book, you’ll use Git for two reasons:

The source code of the sample application in this book will be

stored on GitHub, with different branches for various milestones.
You’ll be able to clone the master or the separate branches to use
the code.

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 22/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

You’ll use Git as the method of deploying your application to a

live web server for the world to see. For hosting, you’ll use
Heroku.
table of contents index
1.2.1. JavaScript: The single language
1.6.3. Hosting with Heroku
through the stack 
1.2.2. Fast, efficient, and scalable Hosting Node.js applications can be complicated, but it doesn’t have to be
Many traditional shared hosting providers haven’t kept up with the intere
1.2.3. Using prebuilt packages via npm buy

now
1.3. Introducing Express: The frameworkin Node.js. Some providers install it for you so that you can run
1.3.1. Easing your server setup applications, but the servers generally aren’t set up to meet the unique
1.3.2. Routing URLs to responses needs of Node.js. To run a Node.js application successfully, you need a
1.3.3. Views: HTML responses server that has been configured with it in mind, or you can use a PaaS
provider that’s specifically designed for hosting Node.js.
1.3.4. Remembering visitors with session
support
1.4. Introducing MongoDB: The database In this book, you’ll take the latter approach. You’ll use Heroku
1.4.1. Relational databases vs. document
(https://www.heroku.com) as your hosting provider. Heroku is one of the
stores leading hosts of Node.js applications and it has an excellent free tier that
1.4.2. MongoDB documents: JavaScript
you’ll make use of.
data store
1.4.3. More than just a document database
Applications on Heroku are essentially Git repositories, making the
1.4.4. What is MongoDB not good for?
publishing process incredibly simple. After everything is set up, you can
1.4.5. Mongoose for data modeling and
more publish your application to a live environment by using a single command

1.5. Introducing Angular: The front-end

framework $ git push heroku master
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Working with
copy 
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 livebook features:



1.6.1. Twitter Bootstrap for user interface
highlight, annotate, and bookmark
1.6.2. Git for source control
Select a piece of text and click the appropriate icon to comment, bookmark, or highlight
1.6.3. Hosting with Heroku
1.7. Putting it together with a practical view how
example
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
work together 1.7. Putting it together with a practical example
Ch 2 Designing a MEAN stack architecture 
As we’ve already mentioned a few times, throughout the course of this
book, you’ll build a working application on the MEAN stack. This process
will give you a good grounding in each of the technologies and show you
how they fit together.

1.7.1. Introducing the example application

So what are you going to be building as you go through the book? You’ll be
building an application called Loc8r. Loc8r lists nearby places with Wi-Fi
where people can go to get some work done. It also displays facilities,

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 23/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

opening times, a rating, and a location map for each place. Users will be
able to log in and submit ratings and reviews.

table of contents indexapplication has some grounding in the real world. Location-based
This
1.2.1. JavaScript: The single language
applications themselves aren’t particularly new and come in a few guises.
through the stack 
Swarm and Facebook Check In list everything nearby that they can and
1.2.2. Fast, efficient, and scalable
crowdsource data for new places and information updates. Urbanspoon
1.2.3. Using prebuilt packages via npm buy

helps people find nearby places to eat, allowing a user to search on price
now
1.3. Introducing Express: The framework bracket and type of cuisine. Even companies like Starbucks and McDonald
1.3.1. Easing your server setup
have sections of their applications that help users find the nearest one.
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses
Real or fake data?
1.3.4. Remembering visitors with session
support
Okay, we’re going to fake the data for Loc8r in this book, but you could
1.4. Introducing MongoDB: The database
collate the data, crowdsource it, or use an external source if you wanted to
1.4.1. Relational databases vs. document
stores For a rapid prototype approach, you’ll often find that faking data for the
first private version of your application speeds the process.
1.4.2. MongoDB documents: JavaScript
data store
1.4.3. More than just a document database
End product
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling You’ll
and use all layers of the MEAN stack to create Loc8r, including Twitter
more
Bootstrap to help you create a responsive layout. Figure 1.7 shows some
1.5. Introducing Angular: The front-end
screenshots of what you’ll build throughout the book.
framework
1.5.1. jQuery vs. Angular
1.5.2. Two-way data binding: Working with
data in a page Figure 1.7. Loc8r is the application you’ll build throughout this book. It
displays differently on different devices, showing a list of places and
1.5.3. Using Angular to load new pages
details about each place, and allows visitors to log in and leave reviews
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

Ch 2 Designing a MEAN stack architecture 

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 24/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

table of contents index

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 buy

now
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.7.2. How the MEAN stack components work together
1.5.3. Using Angular to load new pages
By the time you’ve been through this book, you’ll have an application
1.5.4. Are there any downsides? running on the MEAN stack, using JavaScript all the way through.
1.5.5. Developing in TypeScript MongoDB stores data in binary JSON, which, through Mongoose, is expose
1.6. Supporting cast as JSON. The Express framework sits on top of Node.js, where the code is
1.6.1. Twitter Bootstrap for user interface
written in JavaScript. In the front end is Angular, which is TypeScript.
1.6.2. Git for source control Figure 1.8 illustrates this flow and connection.
1.6.3. Hosting with Heroku
1.7. Putting it together with a practical
example Figure 1.8. JavaScript (partly as TypeScript) is the common language
throughout the MEAN stack, and JSON is the common data format.
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components
work together

Ch 2 Designing a MEAN stack architecture 

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 25/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

table of contents index

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 buy

now
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
We’ll explore various ways that you can architect the MEAN stack and how
1.5. Introducing Angular: The front-end
framework you’ll build Loc8r in chapter 2.
1.5.1. jQuery vs. Angular
Because
1.5.2. Two-way data binding: Working with JavaScript plays such a pivotal role in the stack, please take a look
data in a page at appendix D (available online and in the e-book), which has a refresher
1.5.3. Using Angular to load new pages
on JavaScript pitfalls and best practices.
1.5.4. Are there any downsides?
1.5.5. Developing in TypeScript
Summary
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
In this chapter, you learned
1.6.2. Git for source control
1.6.3. Hosting with Heroku Which technologies make up the MEAN stack and how they work
1.7. Putting it together with a practical together
example Where MongoDB fits as the data layer
1.7.1. Introducing the example application
How Node.js and Express work together to provide an application
1.7.2. How the MEAN stack components server layer
work together How Angular provides an amazing front-end, data-binding layer
Ch 2 Designing a MEAN stack architecture A fewways to extend the MEAN stack with additional
technologies

sitemap
Up next...
Chapter 2. Designing a MEAN stack architecture
Introducing a common MEAN stack architecture
Single-page applications
Discovering alternative MEAN stack architectures

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 26/27
4/12/22, 1:53 AM Chapter 1. Introducing full-stack development - Getting MEAN with Mongo, Express, Angular, and Node.js 2ED

Designing an architecture for a real application

Planning a build based on architecture design

table of contents index

1.2.1. JavaScript: The single language © 2022 Manning Publications Co.
through the stack 
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm buy

now
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

Ch 2 Designing a MEAN stack architecture 

https://livebook.manning.com/book/getting-mean-with-mongo-express-angular-and-node-second-edition/chapter-1/107 27/27