Shape Shape

Courses Details

Shape
Shape
Shape
High MEAN Stack Training

MEAN Stack

Author
MEAN Stack Hurry up!
4.9

MEAN Stack stands for  

MongoDB, Express.js, AngularJS and Node.js.  

• Node.js is a server-side Javascript engine and what allows us to  run our code!  

• MongoDB is our database  

• Express.js is a Node.js web framework that most importantly al lows us to route requests to the correct destination  

• Angular 2 is the cutting-edge frontend framework that allows our  users to interact and change data in our app  

We’ll write the entire app in ES6 (aka ES2015, Harmony, ESNext) us ing the Babel transpiler, and we’ll package our frontend components  using Webpack (which allow us to use requires in our frontend code).  

Let’s begin!  

File Structure  

Dependencies  

Dependency Overview  

There are a lot of dependencies. If you’re really interested, here’s why  we need all of them:  

• angular2 - Well, we’re making an Angular 2 app  

• body-parser - Parse form data and allow it to be accessed by the  server  

• bootstrap - Base CSS styles  

• es6-promise - Angular 2 dependency  

• es6-shim - Another Angular dependency  

• express - Our server  

• jade - Template engine for terse HTML  

• method-override - Allows PUT and DELETE requests on old  browsers  

• mongoose - MongoDB wrapper 

• morgan - Request logger  

• reflect-metadata - Another Angular dependency  

• rxjs - Another Angular dependency  

• systemjs - Another Angular dependency  

• 

• zone.js - Another Angular dependency  

• babel-cli - Allows us to transpile ES6 via babel in npm scripts  • babel-core - To transpile files passed via babel-loader  • babel-loader - Webpack Babel loader, so that webpack can tran spile  

• babel-preset-es2015 - ES2015 Babel preset  

• css-loader - Allows Webpack to parse @import and url() in CSS  • file-loader - Allows Webpack to load font files (e.g. in CSS)  • script-loader - Allows Webpack to inline JS without parsing re quires  

• style-loader - Allows Webpack to link CSS sheets in HTML files  • webpack - Webpack packages and processes frontend files  Setting Up Our Environent  

Backend  

Configuring Express  

Jade  

Creating a Model  

Creating a Controller  

Creating the Routes  

Frontend  

Create an Angular Service  

Create an Angular Component  

Angular Bootstrapping  

Webpack Index  

Jade Template 

Main Jade Template  
 

 

Getting Started with Node.js

Introduction

Node.js Background

Getting Node.js

Demo: Installing Node on Linux with NVM

Demo: Developing for Node with Cloud9 IDE

Node's Event Loop

Node Conventions for Writing Asychronous Code

Demo: Writing Asychronous Code in Node.js

The "Christmas Tree" Problem, Conclusion

Modules, require() and NPM

Introduction, Accessing Built-in Modules

Demo: Accessing Built-in Modules

Using require() to Modularize Your Application

Demo: Accessing Application Files with require()

Finding 3rd Party Modules via NPM

Demo: Installing and Using 3rd Party Modules

Publishing Your Own Module, Conclusion

Events and Streams

Introduction

Events and the EventEmitter class

Demo: Returning an EventEmitter from a function

Demo: Inheriting from EventEmitter

Readable and Writable Streams, the Pipe function

Demo: Readable and Writable Streams

Demo: Piping Between Streams

Conclusion

Accessing the Local System

Introduction, The Process Object

Demo: The Process object

Interacting with the File System

Demo: Interacting with the File System

What is a Buffer?

Demo: Buffers

The OS Module, Conclusion

 

Interacting with the Web

Introduction, Making Web Requests in Node

Demo: Making Web Requests in Node

Building a Web Server in Node

Demo: Building a Web Server in Node

Realtime Interaction with Socket.IO

Demo: Socket.IO

Conclusion

Testing and Debugging

Introduction, The Assert Module

Demo: The Assert Module

Testing with Mocha and Should.js

Demo: Mocha and Should.js

Debugging with the Cloud9 IDE

Demo: Debugging with the Cloud9 IDE and Chrome

Conclusion

Scaling Your Node Application

Introduction, The Child Process Module

Demo: The "exec" function

Demo: The "spawn" function

Demo: The "fork" function

Scaling with Node's Cluster Module

Demo: Building a Clustered Web Server

Conclusion

 

Building Web Applications using Express

Installing Express.js

Routing

Parameters and queries in routing

Building views using Jade view engine

Using blocks for layout

Displaying data

Working with forms

Serving files

Working with cookies and sessions

Authentication and authorization

Error Handling

Node.js Eco System

Node Packages

Packages of interest

Deciding Factors

Monitoring Node.js processes

Detecting Memory Leaks


 

JavaScript Development Workflow

Using Yeoman for Scaffolding

Client side dependency management using Bower

Grunt to build and deploy

Creating Structures from base

 

Node Integration with Mongo, Express, Angular

Overview of MEAN Stack

Sample Application
 

JavaScript Fundamentals  

• Defining Variables 

• Understanding JavaScript Data Types 

• Using Operators 

• Creating Functions 

• Understanding Variable Scope 

• Using JavaScript Objects 

• Manipulating Strings 

• Working with Arrays 

ES6 Features 

• let and const 

• Arrow function 

• Classes 

• Template string 

Typescript 

• Introduction to Typescript 

• JavaScript & Typescript 

• The types system variables, Array 

• Defining Class and Interfaces 

• Defining a Module, Importing a Module

Angular Introduction 

1. Anatomy of an Angular Application 

2. Building blocks of Angular 

3. Sample Application 

4. Course Outline 

5. Summary 

Setting up Our Environment 

• Setting up an Angular Application 

• Running an Angular Application 

• About Modules 

• Loading ES Modules and Hosting Our Application • Summary

Introduction to Components 

• What Is a Component 

• Creating the Component Class 

• Defining the Metadata with a Decorator 

• Bootstrapping Our App Component 

• Component Style 

• Component Lifecycle 

• Summary 

Templates, Interpolation, and Directives 

• What are Directives 

• Type of Directives - Component, Structural and Attribute • Building a Template 

• Building the Component 

• Using a Component as a Directive 

• Binding with Interpolation 

• Adding Logic with Directives 

• Creating own Structural Directive 

• Summary 

Data Binding & Pipes 

• Property Binding 

• Handling Events with Event Binding 

• Handling Input with Two-way Binding 

• Transforming Data with Pipes 

• Nested Components 

• Summary

 

More on Components 

• Defining Interfaces 

• Encapsulating Component Styles 

• Using Lifecycle Hooks 

• Building Custom Pipes 

• Relative Paths with Module Id 

• Summary 

Building Nested Components 

• Building a Nested Component 

• Using a Nested Component 

• Passing Data to a Nested Component Using @Input • Passing Data from a Component Using @Output • Summary 

 

Working with Forms 

• Forms in angular 

• Template and Model driven Forms 

• Binding input fields 

• Form validation, state and field validation state • Displaying validation state using Classes 

• Displaying Submit when form is invalid 

• Summary 

 

Services and Dependency Injection 

• Building a Service 

• Registering the Service 

• Injecting the Service 

• Multiple service instances 

• Summary 

Retrieving Data Using HTTP 

• Observables and Reactive Extensions 

• Sending an HTTP Request 

• Exception Handling 

• Summary

 

Navigation and Routing Basics 

• How Routing Works 

• Configuring Routes 

• Tying Routes to Actions 

• Placing the Views 

• Summary 

Navigation and Routing Additional Techniques 

• Passing Parameters to a Route 

• Activating a Route with Code 

• Protecting Routes with Guards 

• Summary 

 

Angular Modules 

• What Is an Angular Module 

• Bootstrap Array 

• Declarations Array 

• Exports Array 

• Imports Array 

• Providers Array 

• Feature Modules 

• Shared Module 

• Summary 

Deployment 

• Building apps using Angular CLI 

• Unit Testing 

• Yarn 

• yarn lint 

• Summary 

Compiling the Frontend Resources  Conclusion

Shape

The javaTpoint Advantage:

We partner with you to understand and address your unique transformation imperatives. We work in transparent consultation with you to devise best-in-class solutions and define the best course of action to implement them across your organization. Our integrated consulting and IT services will bring continuity and consistency to your strategic programs.

WE WILL HELP YOU WITH THE FOLLOWING:

  • 1. Adapt to the changing market conditions.
  • 2. Adapt new technologies.
  • 3. Innovate continually.
  • 4. Align IT with business goals.
  • 5. Optimize costs, while maintaining high customer satisfaction.
  • 6. Accelerate time-to-market for new products and services.
  • 7. Integrate distributed operations and systems into a cohesive organization.

Get in Touch With Us

Ready to start?

Enroll Now. for easy to start your course.

Shape