Duration
5 days
Overview
MEAN is a full-stack JavaScript solution that helps build fast, robust, and maintainable production web applications using MongoDB, Express, Angular, and Node.js. MEAN helps to getting started and avoid useless grunt work and common pitfalls, while keeping the application organized. MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable. Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. Angular 6 lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.
Prerequisites
Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.
Course Topics
Day 1
- Introduction to TYPESCRIPT
Overview
- Environment Setup
- Basic Syntax
- Types, Variables and Operators
- Decision Making and Loops
- Functions and Lambda Expressions
- Generics
- Enums, Number and Strings
- Arrays, Tuples & Union
- Interface, Classes and Objects
- Namespaces & Modules
- Ambients, Decorators & Mixins
- Introduction to Angular
- Why Angular 6
- Angular 6 Features
- Installing and Using Angular 6
- Creating the first Angular Project
- Architecture Overview
- What is new in Angular 6
- Summary
- Building with Components
- Introducing the component
- Component Decorator Properties
- Template
- Inline Template
- Interpolation – Plain text, Object and Array
- Component Starter
- Integrating Bootstrap
- Data and Event Binding
- Binding Syntax
- One-Way Output Binding
- Property binding
- Attribute binding
- Binding Events
- Setting Element Properties
- Two-Way Binding of Input Fields
- Input Binding Examples
- Summary
- Attribute Directive
- What are Directives
- Directive Types
- Apply Styles by Changing Classes
- Applying Styles Directly
- Obsolete Directives and Property Binding
- Controlling Element Visibility
- Setting Image Source Dynamically
- Setting Hyperlink Source Dynamically
- Summary
- Structural Directives
- Adding and Removing Elements Dynamically
- Looping Using ngFor
- Creating Tables with ngFor
- Swapping Elements with ngSwitch
- ngSwitch - Basic Syntax
- ngSwitch - Full Template Syntax
- Summary
Day 2
- Template Driven Forms
- A Basic Angular Form
- Binding Input Fields
- Binding the Form Submit Event
- Basic HTML5 Validation - "required" Attribute
- Angular Validators
- Displaying Form Validation State
- Displaying Field Validation State
- Displaying Validation State Using Classes
- Disabling Submit when Form is Invalid
- Submitting the Form
- Summary
- Services and Dependency Injection
- What is a Service?
- Creating a Basic Service
- What is Dependency Injection?
- What Dependency Injection Looks Like
- Injecting Services
- Using a Service in a Component: Dedicated Instance
- Using a Service in a Component: Dedicated Instance - Example Code
- Using onInit to Initialize Component Data
- Using a Shared Service Instance
- Dependency Injection and @Host
- Dependency Injection and @Optional
- Summary
- RxJS and Observables
- What is an Observable?
- Observable Operators
- Creating Observables Using Static Operators
- What is an Observer?
- Observer Example
- Subject
- Subject Example
- EventEmitter or Observable
- HTTP Client
- The Angular HTTP Client
- Service Using Http Client
- Service Imports
- The Observable object type
- Making a Basic HTTP GET Call
- Using the Service in a Component
- Importing Observable Methods
- Enhancing the Service with .map() and .catch()
- Using toPromise()
- GET Request with Options
- POST Request
- Reading HTTP Response Headers
- Summary
- Pipes and Data Formatting
- What are Pipes?
- Using a Built-in Pipe
- Chaining Pipes
- Using Custom Pipes
- A Filter Pipe
- A Sort Pipe
- Summary
- The Angular Component Router
- Routing and Navigation
- The Component Router
- Component Router Terminology
- Setting up the Component Router
- Browser pushState and
- Routes
- The app.routes.ts File
- App Routes
- App Component
- Programmatic Navigation
- Passing Data During Navigation
- Creating Routes with Route Parameters
- Navigating with Route Parameters
- Using Route Parameter Values
- Retrieving the Route Parameter Synchronously and Asynchronously
- Query Parameters
- Problems with Manual URL entry and Bookmarking
- Fixing Manual URL entry and Bookmarking
- Summary
Day 3
- Introduction to MongoDB
- Overview of MongoDB
- MongoDB fundamentals
- Architecture of MongoDB
- Database
- Collection
- Document
- Advantages of MongoDB
- Why use MongoDB
- When to use MongoDB
- Install MongoDB
- Data Modelling
- Create Database
- Drop Database
- Create Collection
- Drop Collection
- Data Types
- Insert Document
- Query Document
- Update Document
- Delete Document
- Queries
- Field equality tests
- Operators available
- Projections
- Limiting Records
- Paging
- Sorting Records
- Simple Updates and Deletes
- Field updates
- Field insertions and removal
- Document deletion
- Existential field values
- Indexing and query optimization
- Indexing theory
- Indexing in practice
- Query optimization
- More Complex Types of Queries
- Existential field values
- Aggregations and groups
- Aggregations and groups in hierarchical data
Introduction
- Foundation
- The Node.js framework
- Advantages of Node JS
- Installing Node.js
- Using Node.js to execute scripts
- Traditional Web Server Model
- Node.js Process Model
- Node Projects
- The Node Package Manager
- Creating a project
- The package.json configuration file
- Installing Packages Global
- Installing Packages Locally
- Adding dependency in package.json
- Installing packages globally
- Updating packages
- Scripting through package.json
- Automating tasks with Gulp
- HTTP
- The HTTP protocol
- Creating web server
- Handling http requests
- Sending requests
- Building an HTTP server
- Rendering a response
- Processing query strings
- Using Representational State Transfer
- Node JS Console
- Configuring TLS
- File System
- Synchronous vs. asynchronous I/O
- Path and directory operations
- __dirname and __filename
- Synchronous file reads
- Synchronous file writes
- Asynchronous file reads
- Asynchronous file writes
- Buffers, Streams, and Events
- Using buffers for binary data
- Flowing vs. non-flowing streams
- Streaming I/O from files and other sources
- Processing streams asynchronously
- Configuring event handlers
- Modules and Unit Testing
- Modularization
- The CommonJS and RequireJS specifications
- Defining modules with exports
- Modules are singletons
- Creating a package
- Module scope and construction
- Unit testing frameworks
- What to test and how to test it
- Building unit tests with Mocha
Day 5
- Events
- When to use Event Emitters
- Binding Functions to Events
- Event Requests
- Event Listening
- What are callbacks
- Callback-last
- Error-first
- Callbacks: Error-first
- Errors in Event Emitters
- Uncaught Exceptions
- Using Domains
- Express
- The model-view-controller pattern
- Defining Jade and Handlebars templates
- Building a front-end controller
- Defining routes
- Creating actions
- Configuring Express to use Handlebars
- Using REST
- Reading POST data
- Building Handlebars helpers
- Adding middleware
- Data Sources
- How Node.js connects to databases
- Configuration and platform setup
- RDBMS databases and NoSQL databases
- Connecting to RDBMS and NoSQL databases
- Performing CRUD operations
- Building client requests to web services
Programme scope, delivery arrangements and suitability are confirmed during enquiry.