Book Image

MEAN Blueprints

By : Robert Onodi
Book Image

MEAN Blueprints

By: Robert Onodi

Overview of this book

The MEAN stack is a combination of the most popular web development frameworks available—MongoDB, Angular, Express, and Node.js used together to offer a powerful and comprehensive full stack web development solution. It is the modern day web dev alternative to the old LAMP stack. It works by allowing AngularJS to handle the front end, and selecting Mongo, Express, and Node to handle the back-end development, which makes increasing sense to forward-thinking web developers. The MEAN stack is great if you want to prototype complex web applications. This book will enable you to build a better foundation for your AngularJS apps. Each chapter covers a complete, single, advanced end-to-end project. You’ll learn how to build complex real-life applications with the MEAN stack and few more advanced projects. You will become familiar with WebSockets and build real-time web applications, as well as create auto-destructing entities. Later, we will combine server-side rendering techniques with a single page application approach. You’ll build a fun project and see how to work with monetary data in Mongo. You will also find out how to a build real-time e-commerce application. By the end of this book, you will be a lot more confident in developing real-time, complex web applications using the MEAN stack.
Table of Contents (13 chapters)
MEAN Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Integrating Angular 2 into our application


The frontend application is going to be built using Angular 2. At the time of writing this book, the project is still in beta, but it will come in handy to start playing around with Angular and have a good understanding of the environment. Most of the code will follow the official docs view of the tooling and integration methods.

When we first described our folder structure, we saw a package.json file for the client application too. Let's take a look at it, found under the contact-manager/public/package.json path:

{
  "private": true,
  "name": "mean-blueprints-contact-manager-client",
  "dependencies": {
    "systemjs": "^0.19.25",
    "es6-shim": "^0.35.0",
    "es6-promise": "^3.0.2",
    "rxjs": "^5.0.0-beta.2",
    "reflect-metadata": "^0.1.2",
    "zone.js": "^0.6.6",
    "angular2": "^2.0.0-beta.14"
  },
  "devDependencies": {
    "typings": "^0.7.12",
    "typescript": "^1.8.9"
  }
}

To install the necessary dependencies, just use the following command:

$ npm install

You will see npm pulling down different packages, specified in the package.json file.

As you can see, we'll use TypeScript in our client-side application. If you have installed it globally, you can use the following command to compile and watch for changes to your .ts files:

$ tsc -w

Only the most important parts of the application will be discussed. The rest of the necessary files and folders can be found in the final bundled source code.