 Resources from Juri Strumpflohner in 2021

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Although you want full control over the creation of a service inside a factory function, you might still want to get further dependencies to be resolved via Angular’s dependency injector. In this lesson we learn how to pass in dependencies to a factory function.

Pass Dependencies to a Factory Provider in Angular

Angular's hierarchical dependency allows us to overwrite a global service with a different class implementation for just a given sub-tree of the entire component tree of your application. 

In this lesson we will take a look how this works, by registering the service on the component's child injector.

Overwrite a Service in a Component Subtree in Angular

An Angular service registered on the NgModule is globally visible on the entire application. Moreover it is a singleton instance, so every component that requires it via its constructor, will get the same instance. However this is not always the desired behavior. 

Rather you may like to get a fresh instance of a given service every time a component requests it. This is especially powerful for caching scenarios for instance. In this lesson we will learn how to achieve such behavior with Angular’s hierarchical dependency injector.

Create Multiple Angular Service Instances

As your application grows, you may have different kind of implementations of the same service structure. Take for instance a logging service with different concrete implementation flavors. Something that might immediately jump into your mind is to use an interface to abstract the concrete implementation of these specific service instances and use the interface for fetching the instance in your components. Unfortunately, TypeScript interfaces won’t work with Angular’s dependency injector. 

In this lesson we will learn why and how we can circumvent TypeScript interfaces.

Use an Abstract Class as DI Token for your Services in Angular

It always again happens (especially in real world scenarios) that you need to configure your Angular app at runtime. That configuration might be fetched from some backend API, or it might be some simple JSON configuration sitting on your deployment server. The key here is that you want to be able to dynamically modify and adjust that configuration without the need to re-compile and re-deploy your application. Also, you most probably want that configuration to be loaded and ready once your application bootstrapping is done.
In this lesson we learn how to make use of the `APP_INITIALIZER` to hook into Angular's initialization process. That will allow us to inject some configuration into our app just when it is about to start up.

Configure an Angular App at Runtime

Compile time configuration options allow you to provide different kind of settings based on the environment you're building the Angular app for. You might for instance have a development, staging and production environment. With the Angular CLI you're already perfectly set up. Whenever you compile your app, you just pass the `--env=<your-environment>` to the CLI. The according settings will then be compiled into your app. But let's take a closer look how that works and how you can define new environments by yourself

Configure an Angular App at Compile Time with the Angular CLI

If you're coming from AngularJS (v1.x) you probably remember the `ng-true-value` and `ng-false-value` directive which allowed to map custom boolean values like "yes" or "no" or whatever other value you had, onto your HTML form. In this lesson we're going to implement our own `trueFalseValue` directive for Angular, by directly hooking into Angular's form API. A nice occasion to learn about the `ControlValueAccessor` interface.

Create a custom form control using Angular's ControlValueAccessor

Every Angular CLI generated project comes already with [Karma](https://karma-runner.github.io/2.0/index.html) preinstalled as well a couple of executable Jasmine specs. The default test reporter is "progress" which simply logs out the number of passed and failed tests. In this lesson we learn how to add the Karma Mocha test reporter to our Angular CLI setup.

 Configure the Angular CLI to use the Karma Mocha test reporter

Usually our route contains some identifier as parameter which we then read in the activated component to fetch further data to be displayed. However, in some cases we might be better served to resolve that data before the actual component gets activated. The Angular router allows us to implement such thing by using a so-called route `Resolver`. In this lesson we’re going to take a closer look and implement one by ourselves.

Resolve data as part of the route transition in Angular

While route resolvers are useful fetching the data to be passed to the routed component, statically configured data is useful for configuration purposes. In this lesson we learn about the `data` property which is part of Angular's route definition and which allows us to pass in some static data that can be used from within a route resolver, route guard or even the routed component to customise it's behaviour.

Pass static data to a component as part of the route transition in Angular

Usually when defining different routes, we want to give the user the possibility to switch between them. Most often this happens through hyperlinks defined in some kind of application menu. In this lesson we will take a closer look how to define links to different application routes. Moreover we will learn how to leverage Angular’s `routerLink` directive for this job.

Create a hyperlink to an Angular route using RouterLink

When you have an application menu with a series of links pointing to different application routes, you definitely want to highlight which route is currently active by styling its corresponding link. Fortunately in Angular this is quite easy to achieve. In this lesson we will learn to leverage the `routerLink` directive and in particular its `routerLinkActive` property.

Highlight the currently active route with the `routerLinkActive` directive in Angular

Mostly all advanced routing mechanisms allow not only for top-level routes, but also to define child routes. Consider an application menu having a “People” entry and within that component we have a list of names which in turn when clicking on them open a side-view directly displaying the details of that specific person. We just pictured a multi-level route. In this lesson we will define and configure such a child route and learn how they work with the Angular router.

Create a side-by-side navigation between a list and its detail with the Angular Router

In a well structured and modularized Angular application we may not want to have our components know the entire path of a route, but rather we may just want to redirect “locally” within the current route. The Angular router allows us to specify such relative navigation which is what we’re going to learn in this lesson.

Navigate to a component relative location with the Angular router

Often we don’t have some URL we can create and have the user click on it for redirecting to another route. We simply need to do it from within our Angular component code. Say for instance you click a save button and once the record has been successfully stored on your backend, you want to redirect to another route. In this lesson we're going to take a closer look at the various router navigate functions.

Navigate to another route from within my Angular component code

When we redirect to a different route from within our component's code using the `Router.navigate` or from within a component template via a `[routerLink]` directive, we may want to preserve the current route’s query parameters and carry them on to the next route. In this lesson we'll learn about the router's `preserveQueryParams` option as well as the `[queryParams]` directive on the `[routerLink]`.

Preserve the current route’s query parameters when navigating with the Angular Router

Angular Modules can be seen as a distributable unit. They group together a set of logically connected code which can be imported and used by other modules within an Angular application. However, if you want to share them across multiple applications, you have to extract, package and distribute them accordingly. In this lesson we will learn how to extract an existing module and to use [ng-packagr](https://github.com/dherges/ng-packagr) in order to bundle it according to the Angular Package Format.

Extract an Angular Module into a separate library with ng-packagr

Shared Angular modules may export components as well as services which are meant to be reused across the entire application. Whenever you want to use an exported component, in another module, you need to import the module defining that component accordingly. Services on the other hand are globally registered, there is one instance per dependency injector. However, there is something you should be aware of: **Lazy loaded modules have their own dependency injector.** As a result, importing shared modules in a lazy loaded module, may result in multiple instances of a service being available in the app.
In this lesson we will learn about the `ModuleWithProviders` interface that helps avoid such situations.

Avoid Multiple Service Instances in Lazy Loaded Modules in Angular

Very differently to AngularJS (v1.x), Angular now has a hierarchical dependency injector. That allows to specify service definitions as well as the [service lifetime](https://egghead.io/lessons/angular-overwrite-a-service-in-a-component-subtree-in-angular) at various levels in our application. Whenever a service is requested, Angular will walk up the component tree and search for a matching definition. While in most cases that's perfectly fine, often you may want to take control over the dependency lookup. In this lesson we will learn how, by applying `@Host()`, `@SkipSelf()` and `@Optional()`.

Control the dependency lookup with @Host, @SkipSelf and @Optional

Hi, here's a short intro to my course about Angular Services and how they use the Dependency Injector in Angular.

The goal of this Angular Service Injection with the Dependency Injector course is to learn about the various ways Angular services can be created and provided with the dependency injector. While dependency injection has a broader range of applications, in this course we will mostly focus on the Angular services part and how they make use of DI.

That includes learning what a service is about, how it can be registered with the DI mechanism. We will learn about service aliases, value providers and factory functions. Also, understanding the lifetime of a service instance and how to control it, can be fundamental for creating some more advanced Angular apps. That's also when we learn about the hierarchical nature of Angular's DI.
Towards the end we'll take a look at what Angular provider shadowing is all about, and how it can cause some headache when not applied properly.

Enjoy the course!

Introducing Angular Service Injection with the Dependency Injector

One of the goals of the Angular team is to keep everyone aligned with the latest version. To allow doing so, they started to establish 6 months major release cycles, LTS support and much more. But one of the biggest innovations is for sure to introduce Angular Schematics for automatic code migrations.
In this lesson we'll take a simple Angular 5 application. The goal is to learn about the different steps that have to be applied. We will use a very simple demo application in order to easily be able to walk though the migration process. The same approach can be applied however to real world applications, with the difference that in larger apps some steps may obviously require a bit more effort.

Topics

Instructors

Content Type

Free or Pro