Modern Web Development | Mastering Angular 6

Overview

This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of modern web development.

In this training course, learn how to:

• What Angular is and why should you use it
• How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
• What TypeScript is, why it is useful, and how to use it with Angular
• How to facilitate development and deployment using Angular CLI
• How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
• How Routers can support navigation within a Single Page Application
• What the best practices are for using Angular so that it works unobtrusively and performs well
• Working with the Ahead of Time compiler including its impact of developers and the development process
• How to facilitate testing and running Angular applications using various tools and techniques
• How to use Angular with HTTP to support JSON, REST, and other services

Course Outline

Part 1: HTML5, CSS3, RWD, and jQuery

1. Leading to Angular
2. Evolution of HTML and CSS
3. Responsive Web Design
4. jQuery Under the Covers
5. Bootstrapping to Browsers

Part 2: Angular Framework

1. Frameworks vs Libraries
2. AngularJS to Angular2
3. Angular Release Schedules
4. Angular 4/5/6
5. Ahead of Time (AOT) Compilation

Part 3: Overview of Angular Architecture

1. TypeScript
2. Model-View-*
3. Data Binding
4. Components and Events
5. Dependency Injection and Services
6. Component Lifecycle

Exercise: Hello Angular
Lab: Getting Started with Angular

Part 4: Getting Started with TypeScript

1. Angular, ES6, and TypeScript
2. ES6 Fundamentals
3. Typescript Fundamentals
4. TypeScript Types and Interfaces

Exercise: Hello TypeScript

Part 5: Bootstrapping with Angular CLI

1. Challenges in Setting up Projects
2. Angular CLI Overview
3. New Projects with CLI
4. Testing and Generating with CLI

Part 6: Angular Project Structure

1. Top-Level Files and Directories
2. Folders: src and src/app

Exercise: Creating Projects with Angular CLI

Part 7: Components and Events

1. Data Binding in Components
2. Events and Parent/Child Events
3. Emitters
4. Custom Events

Exercise: Building Components

Part 8: Third Party Libraries

1. Angular and the Need for Libraries
2. Options for adding Libraries
3. Working with npm install
4. Working with angular-cli.json
5. ng2 Wrappers

Exercise: Using Libraries
Lab: Views

Part 9: Dynamic Views

1. View Encapsulation
2. Templates and Content
3. Overview of Directives
4. Custom Attribute Directives
5. Binding to Host Events

Exercise: Working with Directives

Part 10: Pipes

1. Overview of Pipes
2. Built-in Pipes
3. Parameterizing Pipes
4. Pure vs Impure Pipes
5. Custom Pipes

Exercise: Working with Pipes
Lab: Angular Forms

Part 11: Forms and the Forms API

1. Forms and NgModel
2. NG Form Groups
3. Model-Driven Reactive Forms
4. Validation and Validators
5. Custom Validators

Exercise: Basic Forms with Angular
Exercise: Powerful Forms with Angular
Lab: Single Page Applications and Routes

Part 12: Single Page Applications

1. Overview of SPA Concept
2. Routing in SPAs
3. Nested Routes
4. Route Guards
5. Lazy-Loading Angular Modules

Exercise: Routing in a Single Page Application

Part 13: Services and Dependency Injection (DI)

1. Components and Injectables
2. Services and DI
3. DI Framework and Injector Mechanics
4. Tree-Shakeable Providers
5. Local Storage

Exercise: Local Storage Service

Part 14: Modules

1. Module Overview
2. Feature and Shared Modules
3. Feature Module Routing

Lab: Using RESTful Services

Part 15: Overview of REST

1. REpresentational State Transfer
2. REST and HTTP
3. REST/HTTP: Representation-Oriented
4. REST Design Principles

Part 16: Angular and REST

1. REST in Angular
2. Promises
3. Observables
4. Emitters vs Observables
5. HttpClient and Observables
6. Async Pipes and Observables
7. RxJS Operators and Usage

Exercise: Using RESTful Services in Angular
Lab: Unit Testing with Angular

Part 17: TDD, BDD, and ADD

1. Test-Driven Development
2. Testing Types
3. Behavior-Driven Development
4. Acceptance-Driven Development

Part 18: Testing and Angular

1. Testing dependencies
2. Options for Testing in Angular
3. Components and Injectables
4. Services
5. LocalStorage

Exercise: Unit Tests with Angular, Karma, and Jasmine
Lab: Angular Best Practices

Part 19: Upgrading from AnularJS

1. Upgrading from Angular 1.x
2. ngForward Walkthrough
3. ngUpgrade Walkthrough

Part 20: Angular Best Practices and Style Guide

1. Single Responsibility Principle
2. Naming Conventions
3. Coding Conventions
4. Application Structure
5. Components, Directives, Services
6. Lifecycle Hooks
7. Routing

Session: Working with Applications

Part 21: The MEAN Stack

1. MEAN Components and Overview
2. Working with MongoDB
3. Working with Node.js
4. Working with Express
5. Creating a Node.js Web Server

Exercise: Implementing a MEAN Application
Exercise: Working with the Database

Part 22: Module and Dependency Management

1. Node.js Projects and Modules
2. Making a Module Executable
3. Core Modules
4. Dependency Management Using NPM
5. Setting Up Dependencies
6. Installing, Updating, and Uninstalling Packages

Exercise: NPM Cache Clean
Exercise: NPM Init
Exercise: Package.json

This course is available on our public schedule via Live Virtual Classroom:

Contact us here.