VTEC Training
Class Time:
9:00am - 4:30pm
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
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?