Course Code: angular16bespoke
Duration: 21 hours
Course Outline:

Concepts in TypeScript

  • TypeScript is the language that Angular is based on. It is a superset of JavaScript and is compiled (transpiled) to JavaScript. We assume that you already have experience with a programming language and therefore focus here on the differences to well-known mainstream languages like C#, JAVA, C or PHP as well as pitfalls.
    • Object-oriented concepts
    • Functional concepts
    • Differences to other languages like C# or JAVA
    • Pitfalls
    • Asynchronous programming

First steps with Angular

  • Already on the first day we develop together a first functional Angular application. The following aspects will be highlighted:
    • Creating an Angular application with the CLI.
    • Project structure and conventions
    • A first component
    • Data binding
    • HTTP access
    • Observables and RxJS (RxJs has to be covered but basics only)

Services und Dependency Injection (DI)

  • To improve our Angular application, we introduce services and use dependency injection to increase testability:
    • Understanding ideas behind DI
    • Provide reusable business logic via services
    • Tokens and Providers
    • Types of providers
    • Hierarchical DI and Scopes
    • Tree-shakable providers

Angular components

  • Then we’ll look at the many details of components, learning how data binding really works for components. We use the knowledge we gain to create more components that communicate with each other. This will make our application modular and more maintainable:
    • Templates
    • Communication between components
    • Property bindings
    • Event bindings
    • Two-way bindings
    • How data binding works in Angular
    • Cycles and other pitfalls
    • Lifecycle hooks

Angular 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:
    • Using Template-Driven Forms
    • Using Reactive (Imperative) Forms
    • Checking input with predefined validators
    • Writing your own validators
    • Asynchronous validators
    • Multifield validators

Angular modules

  • Even though Angular modules are optional in the era of Standalone Components, they still appear in many Angular solutions. In this section, we take a look at the pros and cons of this feature, as well as how it interacts with Standalone Components.
    • Understanding the Angular module system
    • Root Modules
    • Feature Modules
    • Shared Modules
    • Core Module
    • Modules and Dependency Injection
    • Combining Angular modules and standalone components

Routing

  • The router is the hub of most Angular applications. It simulates pages within a single-page application and allows deep linking:
    • Create navigational structures with routing
    • Configure the router
    • Pass and read routing parameters
    • Performance optimization with lazy loading

Testing

  • Another great feature of Angular is the built-in support for automated testing. These are isolated unit tests on the one hand and integration or end-2-end tests on the other:
    • 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

Continuing topics

  • We use the remaining time to answer questions that arise, to discuss further topics and to test them on the basis of our case study. As with all items on the agenda, we can take your individual project situation into account:
    • RxJS and Observables and Reactive Architectures.
    • Performance tuning
    • Authentication