Centriq Training Print Logo

Tuesday

July 23 06:20 AM

WD-530

Angular for TypeScript

  • Ways to Train:
  • Live Classroom
    Class is delivered at a Centriq location with a live instructor actually in the classroom.
  • Live Virtual Class
    Class is delivered live online via Centriq's Virtual Remote technology. Student may attend class from home or office or other location with internet access.
  • HD Class
    Class is delivered via award winning HD-ILT at Centriq's facility. Students view the live instructor utilizing a 60'' HD monitor.
  • Ways to Buy:
  • Retail
    Class can be purchased directly via check, credit card, or PO.
  • CV Centriq Vouchers
    Class is available for students using Centriq Vouchers.
  • AP AP Eligible
    Class is available to students utilizing Centriq's unique Annual Pass program.
  • SA SATV Eligible
    Class is available for students utilizing Microsoft Software Assurance Training Vouchers.
  • CLC Cisco Learning Credit
    Class is available for students using Cisco Learning Credits.
Start Date End Date Duration Days Start Time End Time Time Zone Location Ways to Train Ways to Buy Price
Request a Date

*Centriq Exclusive!

Google’s AngularJS 2 is a JavaScript web framework that has become a strong client-side view library as well as an important way to create single-page applications. TypeScript is Microsoft’s language, following C#’s strengths, to write better JavaScript, and is Google’s preferred language. The course teaches the basics of using TypeScript to build components, templates, events, and the handling of view logic for most typical web operations. Other topics covered include pipes, parent-child communication, forms and validation, lifecycle, services and SPA design with routing.

Audience

A web page developer comfortable with creating code in HTML, CSS and especially JavaScript.

Prerequisites

The student should be familiar with creating HTML and CSS used in the web page development cycle. JavaScript is necessary at a fundamental level. TypeScript, however, will be used and a background with Java or C# is very useful.

Course Completion

The student will gain an understanding of the differences between JavaScript and TypeScript as well as become familiar with the workflow through the use of Microsoft’s Visual Studio Code IDE. They will learn how to use AngularJS 2 for building basic web pages and how to incorporate it into a server-side framework.

View Course Outline

Intro

Resources for free books, cutting edge directions, free software, career skills, and technical presentations.

Browser market share, compatibility, brands, testing

Text editor and IDE choices

Google resources

TypeScript Intro

Creation

Versions

Use cases

Install TypeScript

Tools

Types- static type notation

Types – any

Types – basic

Types – 2.0

enums

Scope – var vs let

Union types

Type guards

Type aliases

Operators and flow

Arithmetic

Comparison, logical, bit

Assignment

Non-null assertion

Flow control  - Branching

Flow-control - Iteration

Microsoft Visual Studio Code

It doesn’t look like VS

Install C# option

TypeScript support modes

Setup project

jsconfig.json

Build project

tasks.json

tasks.json – tasks

Run the file

tasks.json – tasks

<filename>.d.ts

tsd

tasks.json – tasks

Running a test server

Hiding .js files matching .ts files

Use linting

Resources

Functions

Function return types

Function declaration types

Arrow / lambdas

Parameters - optional

Parameters - default

Rest parameter

Template strings

Tag function – used with template…

Tagged template

Union type parameters

Specialized overloading

Hoisting

Restricting a function variable’s return type

Callbacks

Generics – functions, classes

Classes and objects

Class declaration, instance vars

Scope

Accessors

Static properties

Constructor

Interfaces

Interfaces – on variables

Inheritance

Structure

Namespaces

Modules

Module config

Modules – export

Modules – import

Web architecture

What is architecture?

Component terms

Client – browser operations

Web server types

Server operations – web

Web 1.0

Web 1+ - static site generators

Web 1+ - CSS generators

Web 1+ - JavaScript generators

Web 2.0 – dynamic web sites

Pros / Cons

Web 3 – apps

Designing a microservice

SPA overview

Web server communication protocols

Web 4 – compiled apps

Resources

AngularJS 2 Intro

History

Resources – official

Resources – minor

Language support

Improvements over v1

Other improvements

Angular Universal

Angular CLI

Other

Hybrid apps using AngularJS 2

Planning an app

Architecture - SS framework

Architecture – SPA framework

Angular features

SPA only

Combined SPA & SS frameworks?

Possible SPA & SS framework designs

Best practices

Material Design

Material Design for ng2

Google Polymer

Setup

Setup choices – code only

Setup choices – code + scaffold

Local test server

tsconfig.json – TypeScript options

typings.json – type definition config

package.json – the npm inventory

RxJS

HTML package loading

angular2-polyfills

SystemJS

TypeScript

RxJS

index.html - <base href="/">

index.html – HTML package loading

index.html – SystemJS

index.html – app selector

main-ts – the bootstrap

app.module – the app container

app.module – the parent

Modules

Modules – import & export

Component

App structure

Component to DOM –  app.component.ts

Data binding – projecting data

Data binding –  app.ts

Templates – inline vs file

Component view

Development to production

Components

Directive

Components

Selectors

Module declarations

Style

Styles – internal

Styles – external

Styles – in template

Style strategy

Style scoping

Styles – special selectors

Templates

Templates – inline

Templates - external

Syntax

Syntax – literals

Expressions

Elvis operator ?.

Ternary operator?

Not used

Binding

Data binding – one way values

HTML attribute binding

DOM property binding

HTML attribute vs DOM property binding

Other bindings

Style property binding

Style property binding – unit selection

Style property binding – ngStyle

Class property binding - DOM

Class property binding – ngClass

Class property binding comparison

Attribute binding

Other property bindings

NgNonBindable

View logic

for – syntax

if – syntax

switch – syntax

Embedded templates - *selector

Pipes

Intro

Pipe operator |, parameter :

Common and custom

Common pipes – date

Common pipes – currency

Common pipes – decimal

Common pipes – percent

Common pipes – uppercase, lowercase

Common pipes – json

Common pipes – slice

Common pipes – async

Custom pipes – code pipe

Custom pipes – declare in module

Custom pipes – execute

Comparison

ng1

Child components

Intro

p2c – declaring child components

p2c – content projection

p2c - @Input (preferred)

p2c – inputs: [ ]

p2c – local variables

p2c - @Input property setter

c2p - @Output

c2p – local child component var

c2p – @ViewChild

p2c / c2p – via service

Events                                         

Event review

Event binding

Event binding - $event

Event type filtering

Event binding

Events bind to template statements

Event binding – syntax

Template statements

Events cause binding – form

Template statements – context

Handling event payload

Event binding – no component logic

Binding types

Event propagation

EventEmitter

Event emitting - child à parent

Forms

Form submit strategy

Form submit process

Form management strategies

Manual – declare local variables

Manual – binding

Template - [(ngModel)] binding

ngForm

ngForm + ngControl

ngControl – form Control

formGroup – access to controls

Controls

ControlGroups

ControlGroups validity properties

Reactive form binding

Reactive - FormBuilder

Reactive – FormBuilder group( )

Reactive – FormBuilder control( ), array ( )

A drop down

Radio buttons

Submit

Submit – data

Change detection strategy – OnPush

Reset model

Reset form

Form validation

Validation – HTML5

Validity state – CSS

Validity state – field properties

Validity state – hide when valid

Validity – error messages

Validity – update by lifecycle

Validity – update with valueChanges

Validators – built-in

Validators – composed

Validators – custom

Validators – template vs. reactive

NG_VALIDATORS – adding custom

Validators and DI

Validators –  asynchronous

Lifecycle

Lifecycle hooks

Lifecycle interfaces

Calling order

ngOnInit

ngOnChanges

Services

Service provider

Logger - app/logger.service.ts 

Dependency injection

@Injectable( )

Injecting the service

Service dependencies

Service provider registration

Registration details

Testing services – class

Testing services - value providers

Testing services – factory providers

Router

Site design responsibilities

Router use cases

Routing – config a routing file

Routing – browser history API

Routing – hash-based

Routing – config routing file for #

Module config – forRoot vs. forChild

Routing – module config

Routing – providers

Routes – ROUTES

Routes – default & wildcard paths

Routes – redirect

Routes – query parameters

Routes – child routes

Route parameters strategies

Routes – route data

Outlets - <router-outlet>

Links to routes

Links to routes – parameter array

Links to routes – routerLinkActive

Links to routes – routerLinkActive on parent element

Links to routes – query strings

Links to routes – link parameters

Links to routes – named outlets

Links to routes – multiple children

ActivatedRoute

ActivatedRoute – snapshot

ActivatedRoute – properties

Router lifecycle hooks

Guards

Guards – CanDeactivate

Books

Slides

Upgrading from Angular 1

Major changes

ngUpgrade

ng-forward

Migration

Resources

Training

Articles

Conferences

Web sites

Blogs