Angular JS 4 Content

 

DAY ONE

Introduction

  • What is in Angular JS 4
  • Creating an Angular JS 4 Project
  • Editing our First App
  • Understanding the Project Structure
  • Why TypeScript. What is TypeScript

Components Templates and Data Binding

  • Getting Started with Components
  • How an Angular JS 4 App gets started
  • Understanding AppModules
  • Using Templates & Styles
  • Creating a new Component
  • About Unique Selectors
  • Using multiple Components
  • View Encapsulation and Styling
  • Inserting Content with ng-content
  • Databinding Overview
  • String Interpolation
  • Property Binding & Event Binding Overview
  • Property Binding
  • Binding to Custom Properties
  • Event Binding
  • Binding to Custom Events
  • Two-Way Binding

Directives

  • What are Directives
  • Attribute Directives
  • Building a Custom Attribute Directive
  • Element Interaction with HostListener & HostBinding
  • Directive Property Binding
  • ngIf
  • ngFor
  • ngSwitch

 

DAY TWO

Services and Dependency Injection

  • What are Services
  • Example – Logging Service
  • What is Dependency Injection
  • Example – Injecting the Logging Service
  • Services & AppModules
  • Multiple Instances vs One Instance
  • Using NgModules

Routing

  • Introduction to the Angular JS 4 Router
  • Setting up Routes
  • Loading Routes
  • Navigation with Links
  • Understanding Navigation Paths
  • Imperative Routing (Triggered in Code)
  • Route Parameters
  • Extracting Route Parameters
  • Query Parameters
  • Extracting Query Parameters
  • Query Parameters and the routerLink DirectiveChild Routes
  • Redirecting Request
  • Styling Active Route Links
  • Using Guards with AppModules
  • Guards – CanActivate
  • Guards – CanDeactivate

Forms

  • Introduction to Forms in Angular JS 4
  • Approach Basics
  • Registering Controls
  • Submitting a Form and Using the Output
  • Form Properties
  • Input Validation
  • Form State & CSS Classes
  • Default Values with ngModel
  • Two-Way Binding with ngModel
  • Form Groups
  • Radio Button Controls
  • Using the Form State, Providing a better UX
  • Intro The Data-Driven Approach

 

DAY THREE

Pipes

  • What are Pipes
  • Using Pipes
  • Parametrizing Pipes
  • Pipe Documentation
  • Chaining Pipes
  • Custom Pipes

Http

  • Http & Observables
  • Required Adjustments in this ModuleDemo Data Source – Firebase Setup
  • Sending a GET Request
  • Using NgModules
  • The Power of Observables Operators – Map (ping Data)
  • Sending a POST Request
  • Retrieving and Transforming Data with Observables

Deploying an Angular JS 4 Application

  • Intro
  • New Project Structure
  • What to Deploy
  • Setting up an App for Deployment
  • Deploying to Github Pages with the Angular JS 4 CLI
  • Deploying to Github Pages Manually

Angular JS 4 CLI

  • Intro
  • Installation
  • New Project – ng new and ng init
  • Building your Project – ng build & ng serve
  • Understanding the Project Structure
  • Linting your Code – ng lint
  • Unit Tests – ng test
  • Managing Project Content – ng generate & ng destroy
  • Putting it into Production – ng build and ng github-pages
  • Learning More – ng –help and Wrap Up
  • Example Project & Workflow Setup
  • Intro
  • Dependencies & Typings
  • App Setup & Tsconfig
  • Gulp
  • Basic App Code