Course Code: 5694

Comprehensive Angular 4 Programming

Class Dates:
3/25/2019
5/20/2019
Length:
5 Days
Cost:
$2495
Class Time:
Technology:
developer
Delivery:

Overview

  • Course Overview
  • Angular 4 makes the creation of single page applications even easier that before. In this course developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular Router. The course also covers everything you need to know about Typescript - a programming language based on JavaScript that is used to create Angular 4 applications.
  • Audience

Course Disclaimer

*Course Cost listed does not include the cost of courseware or lunch. Course is subject to minimum enrollment. Course may run virtually as a Virtual Instructor-Led (VILT) class if minimum enrollment is not met.

Follow Up

  • Recommended Training:

Prerequisites

  • Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Experience developing with AngularJS or Angular 2 (the prior versions) is not required.

  • Recommended Courses:

  • Introduction to Angular 4

Course Details

  • Module 1: Introducing Angular
  • Central Features of the Angular Framework
  • Scope and Goal of Angular
  • Angular vs. AngularJS
  • Installing and Using Angular
  • Adding Angular and Dependencies to Your App
  • Building Blocks of an Angular Application
  • A Basic Angular Application
  • Basic App - index.html
  • Basic-App: Application Module File
  • Basic-App: Main Bootstrap File
  • Basic-App: The Component File
  • Major Changes in Angular 4
  • Module 2: Development Setup of Angular
  • Managing Angular Files and Dependencies
  • Application of Node.js
  • Installing Node.js and NPM
  • Node Libraries & Package Manager
  • Semantic Version Numbering
  • Intalling, Updating, & Uninstalling Packages
  • Angular CLI
  • TypeScript Definitions
  • Testing Tools
  • Development Servers
  • Module Loaders
  • SystemJS Module Loader & WebPack Module Bundler
  • Module 3: Introduction to TypeScript and ES6
  • Programming Languages for Use with Angular
  • Programming Editors
  • The Type System – Defining Variables, Arrays, & Classes & Objects
  • Class Constructors
  • Interfaces
  • Parameter and Return Value Types
  • Working with Modules
  • TypeScript Transpilation
  • var, let and const - Defined & Usage
  • Template Strings
  • Generics - Class, Methods, & Restricting Types
  • Module 4: Components in Angular
  • Component Starter
  • Developing a Simple Login Component
  • Login Component: Add HTML
  • The HTML Component Template
  • The templateUrl property
  • Login Component: Add CSS Styling
  • Login Component: Hook Up Input Fields and Button
  • Login Component: Fields & Button in the Component Class
  • Component Decorator Properties
  • Component Lifecycle Hooks
  • Using a Lifecycle Hook: OnInit
  • Module 5: Data and Event Binding
  • Binding Syntax
  • One-Way Output Binding
  • Binding Displayed Output Values
  • Two-Way Binding of Input Fields
  • Binding Events
  • Setting Element Properties
  • Passing Data into Components using @Input()
  • Passing Data from Child to Parent using @Output()
  • @Output() Example - Child Component
  • @Output() Example - Parent Component
  • Module 6: Attribute Directives and Property Bindings
  • 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
  • Module 7: Structural Directives
  • Structural Directives
  • Adding and Removing Elements Dynamically
  • Looping Using ngFor
  • ngFor - Basic Syntax
  • ngFor - Full Template Syntax
  • Creating Tables with ngFor
  • ngFor Local Variables
  • Swapping Elements with ngSwitch
  • ngSwitch - Basic Syntax
  • ngSwitch - Full Template Syntax
  • Module 8: Template Driven Forms
  • Template Driven Forms
  • Importing Forms Module
  • Binding Input FieldsAccessing the Form Object
  • Binding the Form Submit EventBasic HTML5 Validation - "required" Attribute
  • HTML5 vs. Angular Validation
  • Angular Validators
  • `Displaying Validation State Using Classes
  • Disabling Submit when Form is Invalid
  • Binding to Object Variables
  • Additional Input Types: Checkboxes, Select, Date, Radio Buttons
  • Module 9: Model Driven Forms
  • Setup for Model Driven Forms
  • Form Component Setup
  • Setup Main FormGroup
  • formControlName
  • FormControl Object
  • Getting Form Values
  • FormBuilder Form Initialization
  • Validation
  • Built-In & Custom Validators
  • Useful FormGroup and FormControl Properties/Functions
  • Sub FormGroups - Component Class
  • Sub FormGroups - HTML Template
  • Module 10: Angular Modules
  • Angular Built-in Modules
  • The Root Module
  • How to Create a Module
  • Feature Modules
  • @NgModule Properties
  • Using One Module From Another
  • Importing BrowserModule or CommonModule
  • Lazy-Loaded Modules
  • How to Organize Modules?
  • Component moduleID Property
  • Module 11: Services and Dependency Injection
  • Creating a Basic Service
  • What Dependency Injection Looks Like
  • Injecting Services
  • Dependency Injection Hierarchy Diagram
  • Using a Service in a Component: Dedicated Instance
  • Injection Hierarchy - Dedicated Instance
  • Using onInit to Initialize Component Data
  • Using a Shared Service Instance
  • Injection Hierarchy - Shared Instance
  • Dependency Injection and @Host
  • Dependency Injection and @Optional
  • Module 12: HTTP Client
  • Importing HttpModule
  • Importing Individual Providers into Services
  • Service Using Http Client
  • Service Imports
  • The Observable object type
  • Making a Basic HTTP GET Call
  • Using the Service in a Component
  • The PeopleService Client Component
  • Importing Observable Methods
  • Enhancing the Service with .map() and .catch()
  • GET Request with Options
  • POST Request
  • Module 13: Consuming REST Web Services in Angular
  • REST Web Services and Angular
  • REST Example – Create, Retrieve, Update, Delete, Client Generated ID, and JSON
  • Common Angular Tasks for REST Communication
  • Angular Service Class Using HTTP Client
  • RequestOptions
  • URL Path Parameters
  • Query Parameters
  • Common HTTP Request Headers
  • Override Default Request Options
  • Returning Response Data
  • Returning Response Data
  • DELETE, GET, PUT, and POST
  • Module 14: Consuming WebSockets Data in AngularWeb Sockets Use Cases
  • Web Socket URLs
  • Web Sockets Servers
  • Web Socket Client
  • Using socket.io-client in JavaScript
  • Setting up socket.io-client in Angular Projects
  • Using socket.io-client in an Angular service
  • Angular websocket.component.ts
  • Angular websocket.component.ts
  • Implementation Modifications
  • Module 15: Pipes and Data Formatting
  • Formatting Changes in Angular
  • Using a Built-in Pipe
  • Using Pipes in HTML
  • Chaining Pipes
  • Using Pipes in JavaScript
  • CurrencyPipe
  • Custom Pipes
  • Using Custom Pipes
  • A Filter & Sort Pipe
  • Pipe Category: Pure and Impure
  • Module 16: Introduction to Single Page Applications
  • What is a Single Page Application (SPA)
  • SPA Workflow
  • Traditional Web Application Capabilities
  • Single Page Application AdvantagesSPA and Traditional Web Sites
  • SPA Challanges
  • Implementing SPA's Using Angular
  • Simple SPA Using Visibility Control
  • SPA Using Angular Components
  • SPA with Angular Components - Switching
  • SPA with Angular Components - The Displayed Component
  • Implement SPA Using an Angular Component Router
  • Module 17: The Angular Component Router
  • Routing and Navigation
  • The Component Router
  • Traditional Browser Navigation
  • Local URL Links
  • Browser pushState and
  • A Basic App With Routing
  • Programmatic & Basic Navigation
  • Passing Data During Navigation
  • Retrieving the Route Parameter Synchronously & Asynchronously
  • Query Parameters
  • Retrieving Query Parameters Asynchronously
  • Problems & Fixing with Manual URL entry and Bookmarking
  • Module 18: Chapter 18 - Advanced Routing
  • External Route Configuration File
  • Dedicated Router Module
  • routerLinkActive binding
  • Wildcard Route Path
  • redirectTo
  • Default & Child Route
  • routerLink Prefixes
  • Lazy Loading Modules via Child Routes
  • Lazy Loading: Update the main routing file
  • Navigation Guards
  • Creating Guard Implementations & Using them in a Route
  • Route Animations
  • Module 19: Angular Animations
  • Animation Techniques & Concepts
  • CSS Property Animation & Transforms
  • Animation Events
  • Angular Animations
  • Animation Imports
  • Named Animation States & Transitions
  • Special States: void, *
  • Triggers
  • Assigning Animations to Elements using Trigger
  • Invoking Transitions
  • Assigning Animation to Routes
  • External Animation Definitions
  • Testing Angular Components and Services
  • Testing Angular Components & Tools
  • Typical Testing Process
  • Jasmine Test Suites & Specs
  • Expectations (Assertions) & Matchers
  • Using the not Property
  • Setup and Teardown in Unit Test Suites
  • Example of beforeEach and afterEach Functions
  • Angular TestBed
  • Automatically Detecting Component Changes
  • Testing Components With Dependencies
  • Testing With Dependencies – Test Double
  • Testing Components With @Input and @Output
  • Module 21: Developing Using AngularCLI
  • AngularCLI Prerequisites
  • Command Help
  • Running Angular CLI Apps with ng serve
  • AngularCLI BlueprintsGenerating Components
  • The .angular-cli.json Settings File
  • Generated Modules, Services, and Specs
  • Running Unit Tests
  • End to End Testing
  • Module 22: Debugging
  • Basic Debugging Practices
  • Development (Debug) Mode
  • Selecting Elements to Inspect
  • Inspecting Angular Components with ng.probe
  • Saving ng.probe Component References
  • Using Breakpoints in Angular & Typescript Code
  • Installing & Opening Augury
  • Augury - Component & Router Tree
  • Augury - NgModules Tab
  • Common Exceptions
  • Module 23: Angular Style Guide
  • What is the Angular Style Guide?
  • Style Categories
  • Single Responsibility
  • Naming
  • Coding Conventions
  • App Structure and Angular Modules
  • Components
  • Directives and Services
  • Module 24: Appendix A - Overview of JSON Web Tokens (JWT)
  • RESTful Web Service API Refresher
  • JSON Web Token Architecture
  • JWT Header
  • JWT Payload
  • JWT Example Payload
  • JWT Example Signature
  • How JWT Tokens are Used
  • Adding JWT to HTTP Header
  • How The Server Makes Use of JWT Tokens
  • What are “Scopes”?
  • What About OAuth?