Angular Workshop – Structured Introduction

Concepts in TypeScript

TypeScript is the language behind Angular. It is a surplus of JavaScript and is compiled (transpiled) according to JavaScript.

We assume that you already have experience with a programming language and therefore focus here on the differences to known mainstream languages ​​such as C # or JAVA and on pitfalls.

• Object oriented concepts
• Functional concepts
• Differences to other languages ​​like C # or JAVA
• Pitfalls
• Asynchronous programming

Get started with Angular

We develop the first functional application on the first day. The following aspects are examined:

• Build an Angular application using the CLI
• Project structure and conventions
• Standalone Components
• A first component
• Data binding
• HTTP access
• Observables and RxJS

Services Dependency Injection (DI)

To improve our application, we introduce services and use dependency injection to increase testability:

• Understand the ideas behind DI
• Provide reusable business logic through services
• Token and provider
• Types of providers
• Hierarchical DI and scopes
• Tree-shakable provider

Components

Then we look at the many details of components and find out how data binding really works for components.

We use the knowledge gained to create additional components that communicate with each other. This makes our application modular and easier to maintain:

• Templates
• Communication between components
• Property bindings
• Event bindings
• Two-way bindings
• How data binding works in Angular
• Cycles and other traps
• Lifecycle hooks

Forms

Angular is particularly strong when dealing with forms. There are even two object models for this: template-driven forms and reactive forms.

Here we look at these two variants and find out when which option is the better one. We also look at the many different types of validation:

• Use template-driven forms
• Use reactive (imperative) forms
• Check values with predefined validators
• Write your own validators
• Asynchronous validators
• Multifield validators

Angular-Modules and Standalone Components

Although Angular modules are optional since the introduction of Standalone Components, they still appear in many Angular solutions. In this part, we take a look at the pros and cons of this feature and how it interacts with standalone components:

• Understanding the Angular modular system
• Root modules
• Feature modules
• Shared modules
• Core modules
• Modules and dependency injection
• Combining Modules with Standalone Components

Routing

The router is the linchpin of most Angular applications. It simulates pages within a single page application and allows deep linking:

• Create navigation structures with routing
• Configure the router
• Transfer and read out routing parameters
• Performance optimization with lazy loading

Testing

Another great feature of Angular is the built-in support for automated testing. These are, on the one hand, isolated unit tests and, on the other hand, integration or end-2-end tests:

• Unit tests with Jasmine and Karma
• End-2-end tests with Jasmine and Protractor
• Use of dependency injection, mocks and spies to increase testability
• Integrated auxiliary constructs for testing
  Test coverage

Further Topics

We use the rest of the time to discuss further topics and to test them on the basis of our case study. As with all items on the agenda, we can also take your individual project situation into account:

• RxJS and Observables and Reactive Architectures
• Performance tuning
• Authentication
• State management

By the way, we have a lot to tell about these and other advanced topics. That is why we also offer our advanced workshop with a focus on enterprise solutions and architectures with Angular.