 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

One of the most common patterns is to read some kind of ID from a URL parameter and invoke an Angular Service which in turn fetches the data based  on the parameters. In this lesson we’ll take a look how we can get the data from the URL and forward it to the Angular service. We will also learn how to leverage RxJS operators to make our code more readable.

Forward URL parameters to an Angular Service to retrieve the desired data

Sometimes in big applications, it might simply not be feasible to have the user download it entirely at startup. After all, not all of the application modules might be used with the same frequency, or even not be accessible at all based on user rights. In this lesson we will therefore explore how to lazy load application modules with the Angular router and hence optimize the time to interactive of our application

Lazy load a route with the Angular router

Lazy loading your Angular modules has some substantial performance benefits at application startup. However, when the user then activates a lazy loaded route, there’s the cost of having to wait for that Angular module to be fetched and fully loaded. To mitigate this issue, the Angular router gives us the possibility to preload a lazy loaded route at runtime.

Avoid delays for lazy modules by applying a preloading strategy with the Angular router

While Angular's built-in `PreloadAllModules` strategy works well, in a larger application you might want to get a bit more fine-grained control over which route to preload and which to only load once the user clicks the corresponding link. In this lesson we're creating a custom preloading strategy to exactly do that.

Define a custom preloading strategy for the Angular router

Security has to be done at the API level on the server side. However, for a better user experience we may want to prevent the user from entering areas of our application he’s not authorized to access. By using the `CanActivate` route guard we make this happen.

Prevent a route activation based on user permissions with the Angular router

What if we have a lazy loaded application module behind some route and we want to prevent an unauthorized user from accessing it? We can directly implement a `CanLoad` route guard to even prevent the lazy loaded module from being downloaded. That’s what we are going to do in this lesson.

Prevent a route from being lazy loaded based on user permissions with the Angular router

Sometimes we want to be able to prevent the user from navigating away from a given screen. Especially if some data has been modified but not yet saved. The `CanDeactivate` guard allows us to do exactly this. In this lesson we will take a closer look by implementing one by ourselves.

Notify user about unsaved data when leaving a component using the Angular Router

Fetching data over the network can be costly which is why you might want to introduce caching to prevent unnecessary network calls from happening. In this lesson you will learn how to implement a simple caching strategy combining Angular's `HttpClient` and RxJS operators.

_(Note, this video lesson is highly inspired by Thoughtram's article on [Advanced caching with RxJS](https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html))_

Topics

Instructors

Content Type