Angular 6 Fundamentals

Google's flagship web framework leverages the power of TypeScript and RxJS Observables to make building component-driven web applications easy! In this course, we'll start with the core ideas around routing, templates, components and services, and then move on to practical patterns for modular app architecture.

Angular 6 Fundamentals

Routing & Modular Architecture

Angular's take on a Single-Page App router is a "light touch" approach, where URL path expressions are mapped to components. We'll study how components can get information about the routing state, and how to organize our app using root & child routing modules. Finally, we'll take a close look at how route guards encourage developers to keep their components simple by moving code that deals with fetching data and entry validation to our services.

  • Routing & Modular ArchitectureDefining Routes & Links

    We'll take a close look at the role that a Single-Page App's router plays in a typical app and then introduce Angular's "light touch" implementation, which relies heavily on services to do the heavy lifting. What begins as a simple mapping of URL expressions to components can quickly become a dependable finite state machine that readies our app for rendering a particular screen.

  • Routing & Modular ArchitectureExercise: Simple Routing

    We'll build two flavors of a multi-URL application, each of which involves a list of records, and a "detail view" of a single record. Through examining the consequences of re-organizing our hierarchy of routes, we'll clearly understand how an application's URL, route handlers and their respective components work in concert to create the illusion of a server-rendered app experience.

  • Routing & Modular ArchitectureEntry and Exit Guards

    Guards are a special type of service that we can include with our route definitions. In essence, what these guards provide us with is akin to lifecycle hooks for a given transition, giving us the ability to customize entry and exit validation (and more!). We'll study a few common use cases, and lead up to building a route guard of our own

  • Routing & Modular ArchitectureExercise: Is Authenticated?

    Create a guard that kicks users out to the /login page if they're not authenticated. Preserve the user's original intent, so that if they complete the login process, they're redirected to where they were originally trying to go.

  • Routing & Modular ArchitectureResolve Guards

    Resolve guards allow us to contain asynchrony within our routing layer, by loading the data our components need before rendering. This greatly simplifies our components, in that they can be designed to receive objects and arrays, instead of promises or observables that resolve to the values of interest.

  • Routing & Modular ArchitectureExercise: Loading In Routes

    Begin with the solution to our "course list" routing exercise, and replace the hard-coded fixture data with real HTTP requests to the Mike Works API. Despite the fact that data is now asynchronously obtained, you should be able to get your app working again without touching anything outside of the routing layer.

  • Routing & Modular ArchitectureLunch

    Break for lunch

Scalable Patterns

We'll skip the impractical "demo-ware" apps, and jump straight to working with Angular the way successful teams do every day. Our examples take advantage of framework features like server-side rendering and code splitting with little or no alteration required.

Learn how to decide

Rather than leave you with only a list of rules to follow, we focus on ensuring you understand the "why" behind our advice. Not only will we leave you starting off down a path of success, but we'll also empower you to make good decisions down the road.

Tomorrow's Angular Today!

We take great pride in keeping up with the latest developments in the open source technologies we teach. Expect to be working with the latest stable release of Angular, and to be led through exercises that focus on the latest best practices.