Modern Web Development | Mastering Angular 6

Outline

Part 1: HTML5, CSS3, RWD, and jQuery

• Leading to Angular
• Evolution of HTML and CSS
• Responsive Web Design
• jQuery Under the Covers
• Bootstrapping to Browsers
• Part 2: Angular Framework
• Frameworks vs Libraries
• AngularJS to Angular2
• Angular Release Schedules
• Angular 4/5/6
• Ahead of Time (AOT) Compilation
• Part 3: Overview of Angular Architecture
• TypeScript
• Model-View-*
• Data Binding
• Components and Events
• Dependency Injection and Services
• Component Lifecycle

Exercise: Hello Angular
Lab: Getting Started with Angular

Part 4: Getting Started with TypeScript

• Angular, ES6, and TypeScript
• ES6 Fundamentals
• Typescript Fundamentals
• TypeScript Types and Interfaces

Exercise: Hello TypeScript

Part 5: Bootstrapping with Angular CLI

• Challenges in Setting up Projects
• Angular CLI Overview
• New Projects with CLI
• Testing and Generating with CLI
• Part 6: Angular Project Structure
• Top-Level Files and Directories
• Folders: src and src/app

Exercise: Creating Projects with Angular CLI

Part 7: Components and Events

• Data Binding in Components
• Events and Parent/Child Events
• Emitters
• Custom Events

Exercise: Building Components

Part 8: Third Party Libraries

• Angular and the Need for Libraries
• Options for adding Libraries
• Working with npm install
• Working with angular-cli.json
• ng2 Wrappers

Exercise: Using Libraries
Lab: Views

Part 9: Dynamic Views

• View Encapsulation
• Templates and Content
• Overview of Directives
• Custom Attribute Directives
• Binding to Host Events

Exercise: Working with Directives

Part 10: Pipes

• Overview of Pipes
• Built-in Pipes
• Parameterizing Pipes
• Pure vs Impure Pipes
• Custom Pipes

Exercise: Working with Pipes
Lab: Angular Forms

Part 11: Forms and the Forms API

• Forms and NgModel
• NG Form Groups
• Model-Driven Reactive Forms
• Validation and Validators
• Custom Validators

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

Part 12: Single Page Applications

• Overview of SPA Concept
• Routing in SPAs
• Nested Routes
• Route Guards
• Lazy-Loading Angular Modules

Exercise: Routing in a Single Page Application

Part 13: Services and Dependency Injection (DI)

• Components and Injectables
• Services and DI
• DI Framework and Injector Mechanics
• Tree-Shakeable Providers
• Local Storage

Exercise: Local Storage Service

Part 14: Modules

• Module Overview
• Feature and Shared Modules
• Feature Module Routing

Lab: Using RESTful Services

Part 15: Overview of REST

• REpresentational State Transfer
• REST and HTTP
• REST/HTTP: Representation-Oriented
• REST Design Principles
• Part 16: Angular and REST
• REST in Angular
• Promises
• Observables
• Emitters vs Observables
• HttpClient and Observables
• Async Pipes and Observables
• RxJS Operators and Usage

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

Part 17: TDD, BDD, and ADD

• Test-Driven Development
• Testing Types
• Behavior-Driven Development
• Acceptance-Driven Development
• Part 18: Testing and Angular
• Testing dependencies
• Options for Testing in Angular
• Components and Injectables
• Services
• LocalStorage

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

Part 19: Upgrading from AnularJS

• Upgrading from Angular 1.x
• ngForward Walkthrough
• ngUpgrade Walkthrough
• Part 20: Angular Best Practices and Style Guide
• Single Responsibility Principle
• Naming Conventions
• Coding Conventions
• Application Structure
• Components, Directives, Services
• Lifecycle Hooks
• Routing

Session: Working with Applications

Part 21: The MEAN Stack

• MEAN Components and Overview
• Working with MongoDB
• Working with Node.js
• Working with Express
• Creating a Node.js Web Server

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

Part 22: Module and Dependency Management

• Node.js Projects and Modules
• Making a Module Executable
• Core Modules
• Dependency Management Using NPM
• Setting Up Dependencies
• Installing, Updating, and Uninstalling Packages

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