Call Us: +32 2 466 00 16
Email: info@u2u.be
Follow Us:

Building web apps with Angular 2 and TypeScript

3days
Training code
uang2
Book this course

Introduction to Angular

There are a lot of misconceptions about Angular. In this module you'll see what Angular is all about and why it is so important in modern web development.

  • Evolution in Web App Development
  • Angular Core and Modules
  • TypeScript, Dart, Plain Old JavaScript

Strongly Typed JavaScript with TypeScript

Let's face it: JavaScript was never designed for big applications. Many constructs to tame complex code like interfaces and strong typing are completely absent. And many of the new cool JS features are not implemented in current browsers. TypeScript is the solution to both problems; allowing you to write modern, application-scale JavaScript.

  • Writing Application-Scale JavaScript
  • Type-Safe JavaScript Development with TypeScript
  • Implementing Types, Classes and Inheritance
  • Namespaces and Modules

Core Concepts

In this module you'll get acquainted with the most important building blocks for any Angular application. This is the foundation of all following chapters.

  • Components
  • Modules
  • Services

Data Binding

Data binding allows you to forget about the HTML while writing JavaScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.

  • The Importance of Binding
  • Component to View
  • Structural Directives
  • Local Template Variables
  • Value Conversion
  • View to Component

Components

In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to communicate between them.

  • Using Multiple Components
  • Input and Output
  • ViewChild and ContentChild
  • EventEmitter
  • Directive Life Cycle

Attribute and Structural Directives

A component always has a view. But what if you just want to add custom behavior to an existing element? In this module you'll explore existing directives like NgIf, NgClasses, ... And learn how to build your own.

  • Attribute Directives
  • Structural Directives
  • Built-in Directives
  • Custom

Dependency Injection and Providers

Dependency Injection (DI) is the art of taking two strongly coupled objects and tearing them apart. This helps you write understandable, maintainable and testable code. It's not really a choice in Angular either: you have to do it. Angular has an entire mechanism based on Providers to support DI which you will explore in this module.

  • Terminology
  • Dependency Injection Basics
  • Services
  • Providers
  • Provider Options
  • Factory Providers
  • Dependency Injection Tokens

Pipes

Pipes are a convenient way to make little changes to values in a view. This includes formatting and filtering of data. It's easy to use and to extend the possibilities of pipes.

  • Using a Pipe
  • Built-in Pipes
  • Custom Pipes
  • Pure versus Impure

Working with Forms

Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You need validation, automatic formatting, respond to data changes a so on. Angular provides two different approaches to dealing with this: Template-driven forms and Model-driven forms. This module will explore both.

  • What's in a Form
  • Responding to Changes
  • FormBuilder
  • Data Validation

Talking to the Server

This module will teach you how to retrieve and send data to your backend. We will focus on REST and use RxJS's Observables to get the job done.

  • Sending and Receiving Data
  • Observables versus Promises
  • JSONP

Building a Single Page Application

Instead of hopping from one page to the next, you can also design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages, but are usually difficult to implement. This module will teach about the constructs available in Angular to build a SPA.

  • What is a SPA
  • Router Library
  • Route Configuration
  • Parent-Child Navigation
  • Life Cycle Hooks

Jasmine Test Framework

Jasmine is a standalone testing framework for JavaScript. Since more and more code is written in JavaScript, the need for testing JS code is rising.

  • Challenges for testing
  • Jasmine Introduction
  • Features: Asserts, Suites, Async, Spies
  • Karma Test runner

Testing in Angular

You can test any JavaScript code with Jasmine, but Angular adds a number of constructs to test specific Angular features. In this module you'll learn how to test your Angular components, services and pipes.

  • Unit Testing
  • Writing Testable Code
  • Getting Started
  • Testing Services, Pipes and Components
  • Testing Angular Features

In recent years a lot of effort has gone into making HTML and JavaScript a better place for web apps rather than just web content. With Angular, you can exploit these new and modern concepts to take it to the next level. By using a Componentized approach, Angular is better equipped than ever to build performant data-driven web-apps. While Angular takes care of Data Binding, Navigation and Server Communication; TypeScript allows you to use the most advanced features JavaScript has to offer on any browser. Features like strong typing make your application more maintainable, better structured and flexible. Enjoy this beautiful synergy between Google's Angular and Microsoft's TypeScript.

This course targets professional web developers who are looking for a kick-start into the world of Angular and TypeScript. This course is NOT about AngularJS 1.X! This course is about the framework previously known as Angular 2. Participants of this course need to have a good understanding of JavaScript, HTML and CSS and a notion of node.js and npm.

© 2017 U2U All rights reserved.