Getting MEAN

with Mongo, Express, Angular, and Node

Simon Holmes (Autor)

Buch | Softcover

375 Seiten

2015
Manning Publications (Verlag)
978-1-61729-203-3 (ISBN)

Infos

• Create dynamics websites using the MEAN technology stack
• Covers best practices of application development
• Loads of code samples throughout

---

Traditional web dev stacks can require different programming languages for every layer, creating a complex mashup of code and frameworks. Together, the MongoDB database, the Express and AngularJS web application frameworks, and Node.js on the server-side constitute the MEAN stack-a powerful web development platform that uses JavaScript top to bottom. Getting MEAN with Mongo, Express, Angular, and Node shows readers how to develop web applications end-to-end using the MEAN stack.

It systematically discusses each technology in the MEAN stack helping to build up an application one layer at a time, just as in a real project.
First, it tackles creating a skeleton of a static site in Express and Node, and pushing it up to a live web server. Next, it looks at the MongoDB database and how to build an API for an application.

Finally, it rolls out Angular to handle data manipulation and application logic in the browser, demonstrating the payoff for organizing the back-end code properly. By the end of the book, readers will have all the skills-and code-needed to build a dynamic data-driven web application on the MEAN stack.

This book includes a quick JavaScript recap, but some web development experience is helpful. It's especially useful for front-end developers who want to learn more about the server-side of a web application.

ABOUT THE TECHNOLOGY
The MEAN stack is a powerful web development platform that uses JavaScript top to bottom. Developers love it because they need only one programming language for the whole stack. Business owners love it because the open source technologies in the MEAN stack are scalable and cost effective. Most importantly, end users love it because web apps are fast and responsive. It's a win-win-win!

Autor

Simon Holmes has been a full stack developer since the late '90s, integrating a variety of front-end and back-end technologies. He is part of the Technical Solutions team at LivePerson, developing new components and meeting technology integration requests from enterprise clients.

Inhalt

preface
acknowledgments
about this book
author online
about the cover illustration
PART 1: Setting the baseline
1. Introducing full-stack development
1.1. Why learn the full stack?
1.1.1. A very brief history of web development
1.1.2. The trend toward full-stack developers
1.1.3. Benefits of full-stack development
1.1.4. Why the MEAN stack specifically?
1.2. Introducing Node.js: The web server/platform
1.2.1. JavaScript: The single language through the stack
1.2.2. Fast, efficient, and scalable
1.2.3. Using prebuilt packages via npm
1.3. Introducing Express: The framework
1.3.1. Easing your server setup
1.3.2. Routing URLs to responses
1.3.3. Views: HTML responses
1.3.4. Remembering visitors with session support
1.4. Introducing MongoDB: The database
1.4.1. Relational versus document databases
1.4.2. MongoDB documents: JavaScript data store
1.4.3. More than just a document database
1.4.4. What is MongoDB not good for?
1.4.5. Mongoose for data modeling and more
1.5. Introducing AngularJS: The front-end framework
1.5.1. jQuery versus AngularJS
1.5.2. Two-way data binding: Working with data in a page
1.5.3. Using AngularJS to load new pages
1.5.4. Are there any downsides?
1.6. Supporting cast
1.6.1. Twitter Bootstrap for user interface
1.6.2. Git for source control
1.6.3. Hosting with Heroku
1.7. Putting it together with a practical example
1.7.1. Introducing the example application
1.7.2. How the MEAN stack components work together
1.8. Summary
2. Designing a MEAN stack architecture
2.1. A common MEAN stack architecture
2.2. Looking beyond SPAs
2.2.1. Hard to crawl
2.2.2. Analytics and browser history
2.2.3. Speed of initial load
2.2.4. To SPA or not to SPA?
2.3. Designing a flexible MEAN architecture
2.3.1. Requirements for a blog engine
2.3.2. A blog engine architecture
2.3.3. Best practice: Build an internal API for a data layer
2.4. Planning a real application
2.4.1. Plan the application at a high level
2.4.2. Architecting the application
2.4.3. Wrapping everything in an Express project
2.4.4. The end product
2.5. Breaking the development into stages
2.5.1. Rapid prototype development stages
2.5.2. The steps to build Loc8r
2.6. Hardware architecture
2.6.1. Development hardware
2.6.2. Production hardware
2.7. Summary
PART 2: Building a Node web application
3. Creating and setting up a MEAN project
3.1. A brief look at Express, Node, and npm
3.1.1. Defining packages with package.json
3.1.2. Installing Node dependencies with npm
3.2. Create an Express project
3.2.1. Installing the pieces
3.2.2. Creating a project folder
3.2.3. Configuring an Express installation
3.2.4. Creating an Express project and trying it out
3.2.5. Restarting the application
3.3. Modifying Express for MVC
3.3.1. A bird’s eye view of MVC
3.3.2. Changing the folder structure
3.3.3. Use the new views and routes folder
3.3.4. Splitting controllers from routes
3.4. Import Bootstrap for quick responsive layouts
3.4.1. Download Bootstrap and add it to the application
3.4.2. Using Bootstrap in the application
3.5. Make it live on Heroku
3.5.1. Getting Heroku set up
3.5.2. Pushing the site live using Git
3.6. Summary
4. Building a static site with Node and Express
4.1. Defining the routes in Express
4.1.1. Different controller files for different collections
4.2. Building basic controllers
4.2.1. Setting up controllers
4.2.2. Testing the controllers and routes
4.3. Creating some views
4.3.1. A look at Bootstrap
4.3.2. Setting up the HTML framework with Jade templates and Bootstrap
4.3.3. Buildinging a template
4.4. Adding the rest of the views
4.4.1. Details page
4.4.2. Adding Review page
4.4.3. The About page
4.5. Take the data out of the views and make them smarter
4.5.1. How to move data from the view to the controller
4.5.2. Dealing with complex, repeating data
4.5.3. Manipulating the data and view with code
4.5.4. Using includes and mixins to create reusable layout components
4.5.5. The finished homepage
4.5.6. Updating the rest of the views and controllers
4.6. Summary
5. Building a data model with MongoDB and Mongoose
5.1. Connecting the Express application to MongoDB using Mongoose
5.1.1. Adding Mongoose to our application
5.1.2. Adding a Mongoose connection to our application
5.2. Why model the data?
5.2.1. What is Mongoose and how does it work?
5.3. Defining simple Mongoose schemas
5.3.1. The basics of setting up a schema
5.3.2. Using geographic data in MongoDB and Mongoose
5.3.3. Creating more complex schemas with subdocuments
5.3.4. Final schema
5.3.5. Compiling Mongoose schemas into models
5.4. Using the MongoDB shell to create a MongoDB database and add data
5.4.1. MongoDB shell basics
5.4.2. Creating a MongoDB database
5.5. Getting our database live
5.5.1. Setting up MongoLab and getting the database URI
5.5.2. Pushing up the data
5.5.3. Making the application use the right database
5.6. Summary
6. Writing a REST API: Exposing the MongoDB database to the application
6.1. The rules of a REST API
6.1.1. Request URLs
6.1.2. Request methods
6.1.3. Responses and status codes
6.2. Setting up the API in Express
6.2.1. Creating the routes
6.2.2. Creating the controller placeholders
6.2.3. Including the model
6.2.4. Testing the API
6.3. GET methods: Reading data from MongoDB
6.3.1. Finding a single document in MongoDB using Mongoose
6.3.2. Finding a single subdocument based on IDs
6.3.3. Finding multiple documents with geospatial queries
6.4. POST methods: Adding data to MongoDB
6.4.1. Creating new documents in MongoDB
6.4.2. Creating new subdocuments in MongoDB
6.5. PUT methods: Updating data in MongoDB
6.5.1. Using Mongoose to update a document in MongoDB
6.5.2. Updating an existing subdocument in MongoDB
6.6. DELETE method: Deleting data from MongoDB
6.6.1. Deleting documents in MongoDB
6.6.2. Deleting a subdocument from MongoDB
6.7. Summary
7. Consuming a REST API: Using an API from inside Express
7.1. How to call an API from Express
7.1.1. Adding the request module to our project
7.1.2. Setting up default options
7.1.3. Using the request module
7.2. Using lists of data from an API: The Loc8r homepage
7.2.1. Separating concerns: Move the rendering into a named function
7.2.2. Building the API request
7.2.3. Using the API response data
7.2.4. Modifying data before displaying it: Fixing the distances
7.2.5. Catching errors returned by the API
7.3. Getting single documents from an API: The Loc8r Details page
7.3.1. Setting URLs and routes to access specific MongoDB documents
7.3.2. Separating concerns: Moving the rendering into a named function
7.3.3. Querying the API using a unique ID from a URL parameter
7.3.4. Passing the data from the API to the view
7.3.5. Debugging and fixing the view errors
7.3.6. Creating status-specific error pages
7.4. Adding data to the database via the API: Add Loc8r reviews
7.4.1. Setting up the routing and views
7.4.2. POSTing the review data to the API
7.5. Protect data integrity with data validation
7.5.1. Validating at the schema level with Mongoose
7.5.2. Validating at the application level with Node and Express
7.5.3. Validating in the browser with jQuery
7.6. Summary
PART 3: Adding a dynamic front end with AngularJS
8. Adding Angular components to an Express application
8.1. Getting Angular up and running
8.1.1. Uncovering two-way data binding
8.1.2. Setting up for greatness (and JavaScript code)
8.2. Displaying and filtering the homepage list
8.2.1. Adding Angular to an Express application
8.2.2. Moving data delivery from Express to Angular
8.2.3. Using Angular filters to format data
8.2.4. Using Angular directives to create HTML snippets
8.3. Getting data from an API
8.3.1. Using services for data
8.3.2. Making HTTP requests from Angular to an API
8.3.3. Adding HTML geolocation to find places near you
8.4. Ensuring forms work as expected
8.5. Summary
9. Building a single-page application with Angular: Foundations
9.1. Setting the groundwork for an Angular SPA
9.1.1. Getting base files in place
9.2. Switching from Express routing to Angular routing
9.2.1. Switching off the Express routing
9.2.2. Adding ngRoute (angular-route) to the application
9.3. Adding the first views, controllers, and services
9.3.1. Creating an Angular view
9.3.2. Adding a controller to a route
9.3.3. Controller best practice: Use the controllerAs syntax
9.3.4. Using services
9.3.5. Using filters and directives
9.4. Improving browser performance
9.4.1. Wrap each file in an IIFE
9.4.2. Manually inject dependencies to protect against minification
9.4.3. Using UglifyJS to minify and concatenate scripts
9.5. Summary
10. Building an SPA with Angular: The next level
10.1. A full SPA: Removing reliance on the server-side application
10.1.1. Creating an isolated HTML host page
10.1.2. Making reusable page framework directives
10.1.3. Removing the # from URLs
10.2. Adding additional pages and dynamically injecting HTML
10.2.1. Adding a new route and page to the SPA
10.2.2. Creating a filter to transform the line breaks
10.2.3. Sending HTML through an Angular binding
10.3. More complex views and routing parameters
10.3.1. Getting the page framework in place
10.3.2. Using URL parameters in controllers and services
10.3.3. Building the Details page view
10.4. Using AngularUI components to create a modal popup
10.4.1. Getting AngularUI in place
10.4.2. Adding and using a click handler
10.4.3. Creating a Bootstrap modal with AngularUI
10.4.4. Passing data into the modal
10.4.5. Using the form to submit a review
10.5. Summary
PART 4: Managing authentication and user sessions
11. Authenticating users, managing sessions and securing APIs
11.1. How to approach authentication in the MEAN stack
11.1.1. Traditional server-based application approach
11.1.2. FULL MEAN stack approach
11.2. Creating a user schema for MongoDB
11.2.1. One-way password encryption: Hashes and Salts
11.2.2. Building the Mongoose schema
11.2.3. Setting encrypted paths using Mongoose methods
11.2.4. Validating a submitted password
11.2.5. Generating a JSON Web Token
11.3. Creating an authentication API with Passport
11.3.1. Installing and configuring Passport
11.3.2. Creating API endpoints to return JSON Web Tokens
11.4. Securing relevant API end points
11.4.1. Adding authentication middleware to Express routes
11.4.2. Using the JWT information inside a controller
11.5. Creating Angular Authentication service
11.5.1. Managing a user session in Angular
11.5.2. Allowing a user to sign up, sign in and sign out
11.5.3. Using the JWT data in the Angular service
11.6. Creating register and login pages
11.6.1. Building the register page
11.6.2. Building the login page
11.7. Working with authentication in the Angular app
11.7.1. Updating navigation
11.7.2. Adding user data to review
11.8. Summary
Appendixes
Appendix A: Installing the stack
A.1. Installing Node.js and npm
A.1.1. Installing Node on Windows
A.1.2. Installing Node on Mac OSX
A.1.3. Installing Node on Linux
A.1.4. Verifying installation by checking version
A.2. Installing Express globally
A.3. Installing MongoDB
A.3.1. Installing MongoDB on Windows
A.3.2. Installing MongoDB on Mac OSX
A.3.3. Installing MongoDB on Linux
A.3.4. Running MongoDB as a service
A.3.5. Checking the MongoDB version number
A.4. Installing AngularJS
Appendix B: Installing and preparing the supporting cast
B.1. Twitter Bootstrap
B.1.1. Getting the Amelia theme
B.1.2. Tidying up the folders
B.2. Installing Git
B.3. Installing a suitable command line interface
B.4. Setting up Heroku
B.4.1. Signing up for Heroku
B.4.2. Installing Heroku toolbelt
B.4.3. Logging to Heroku in terminal
Appendix C: Dealing with all of the views
C.1. Moving the data from the views to the controllers
C.1.1. Details page
C.1.2. Add Review page
C.1.3. About page
Appendix D: Reintroducing JavaScript - available online only
D.1. Everybody knows JavaScript, right?
D.2. Good habits or bad habits
D.2.1. Variables, functions and scope
D.2.2. Logic flow and loops
D.2.3. Formatting practices
D.3. Getting to know JSON
D.3.1. A recap on JavaScript object literals
D.3.2. The differences with JSON
D.3.3. Why is JSON so good?
D.4. Understanding JavaScript callbacks
D.4.1. Use setTimeout to run code later
D.4.2. Asynchronous code
D.4.3. Running a callback function
D.4.4. Named callbacks
D.4.5. Callbacks in Node.js
D.5. Writing modular JavaScript
D.5.1. Closures
D.5.2. Module pattern
D.5.3. Revealing module pattern
D.6. Summary

Rezensionen

Fantastic explanations and up-to-date, real-world examples. Rambabu Posa, LGL Assessment

A ground-up explanation of MEAN stack layers. Andrea Tarocchi, Red Hat

From novice to experienced developer, all who want to use the MEAN stack will get useful advice here. Davide Molin, CodingShack.com

Produkt-Details

• Erscheint lt. Verlag: 16.12.2015
• Verlagsort: New York
• Sprache: englisch
• Gewicht: 680 g
• Einbandart: kartoniert
• Themenwelt: Informatik ► Web / Internet ► JavaScript
• Themenwelt: Informatik ► Web / Internet ► Web Design / Usability
• Schlagworte: AngularJS (Framework) • Full-Stack-Webframework • JavaScript • mean • MongoDB • Node.js Framework • Webentwicklung
• ISBN-10: 1-61729-203-6 / 1617292036
• ISBN-13: 978-1-61729-203-3 / 9781617292033
• Zustand: Neuware