Angular, TypeScript, JavaScript, Reactive

Programming Angular

Angular is the number 1 framework to create SPA spplications. Making use of TypeScript, dependency injection with the hiearchical container coming with Angular, and the ReactiveX library for JavaScript (RxJS), Angular has a focus on creating modular, testable, easy enhanceable SPA applications.

This training gives you an introduction to Angular, TypeScript, Reactive Programming, and the tools used to create Web applications.

Topics

  • Introduction to Angular and Web Tools
  • Programming with TypeScript
  • Building Blocks of Angular Applications
  • Navigation with the Angular Router
  • Dependency Injection
  • Binding, Observables, and Pipes
  • Communication between Components
  • Creating Forms
  • Accessing Servers with HTTP and WebSockets
  • Unit Testing and E2E Testing with Angular

Introduction to Angular and Web Tools

You learn what's behind Single Page Applications (SPA), the advantages of Angular, and you learn about tools that are used to create Web applications. You'll make use of Git and get the course samples from GitHub, compare NuGet with NPM, and learn about packages with WebPack. You get an overview of task runners using NPM scripts, Grunt, and Gulp, make use of code analyzers like TSLint, and get an overview of unit testing and end-to-end (E2E) testing with Jasmine, Karma, and Protractor. For scaffolding, you learn using Yeoman as well as the Angular CLI. The command line interface for Angular, Angular CLI, will also be used while you learn the different features of Angular.

Introduction to TypeScript

TypeScript was the language of choice for the Angular team, and it will also be used writing the labs. You learn the differences to JavaScript, how TypeScript relates to the ECMA standard. You'll learn using the TypeScript Compiler tsc, syntax features from TypeScript such as using types, creating classes, interfaces, and namespaces, and you also learn creating and using decorators and modules.

Building Blocks of Angular

As you know TypeScript, you learn the main building blocks of Angular applications, and how they relate to each other. You learn creating and using modules, build components with metadata and templates, connect templates to components with property binding and event binding, and access services with the help of the injector.

Navigation with the Angular Router

Here you learn to configure root and child routes using the RouterModule, decide between the hash-based navigation and the History API navigation, define router links with routerLink, and implement lazy loading techniques for loading modules on demand.

Dependency Injection

With dependency injection you get an overview of the Dependency Injection pattern, and how it is implemented by Angular. You learn creating and injecting services, and taking advantage of the hierarchy of injectors.

Binding, Pipes, and Observables

Now we get into the details of binding. You learn one-way property- and event-binding, and two-way binding, as well as structural directives such as ngFor and ngIf, as well as using and creating pipes to transform values into desired output for the user interface. Here you also get an introduction to reactive programming and Observables that are used a lot with the APIs from Angular.

Communication between Components

Angular components are loosely coupled. You can communicate between components using clearly defined interfaces. You learn the communication with components in different ways. You learn communication between parent- and child components with input and output properties, and taking advantage of the Mediator pattern. You also learn how communication can be done using services, and change templates at runtime with ngContent.

Forms

Angular gives two approaches creating forms: template-driven, and reactive. You learn both approaches, the easier template-driven forms, and the reactive forms giving you more programatic control. You also learn using standard validators, and creating custom validators.

Observables, Promises und Aufrufe von Services

After doing all stuff locally on the client, the application continuous with communication on the server. You learn using the HttpModule with the Http object for making requests to an ASP.NET Web API service. The public members of the Http class return Observable objects, so we dig more into reactive programming. You'll also get information how to make communication using promises, and get an introduction to WebSockets.

Unit Testing and E2E Testing

The workshop closes creating unit tests and E2E tests. You learn creating unit tests with Jasmine, and running the tests with Karma. You'll use Protractor for creating E2E tests.

Flexible Content

This workshop is offered as company-based workshop and occasionaly with open course dates. I'm flexible in adapting this workshop to your specific needs. Get in contact to discuss the knowledge you already have and the goals of your project.

Interested in this workshop?