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

Modules, Services & Dependency Injection

At Angular's core, you'll find an excellent dependency injection system based around services and their providers. These ideas steer developers toward maintainable, loosely-coupled code while giving them a pragmatic and flexible set of tools, with which they can control sharing and encapsulation.

  • Modules, Services & Dependency InjectionWelcome & Tech Check

    We'll all get to know each other, discuss some learning objectives for the workshop, and begin to describe Angular's philosophy (what makes it different from other modern web frameworks).

  • Modules, Services & Dependency InjectionNgModule

    Creating NgModules to group our JavaScript modules together allows us to create logical "layers" of code, each of which have requirements, provide things to the outside world, and establish a "compilation context". We'll compare this concept to other modular architecture patterns found in mature programming systems, and highlight the benefits of organizing our code this way.

  • Modules, Services & Dependency InjectionServices & Dependency Injection

    Services are a simple and incredibly flexible concept -- we could even think of them as the "core primitive" of Angular's dependency injection system. We'll look at how the concept of dependency injection improves extensibility, flexibility and testability, and then study Angular's implementation in detail. In our discussion around injectors, we'll look at patterns for service instances that act as singletons, that are shared among a hierarchy of components and more!

  • Modules, Services & Dependency InjectionBasic Components

    Angular's component model aligns closely with precedents set by the W3C web component specification. We'll look at how we can pass values into components, how we can get events out, and a technique of combining the two together to create two-way data binding.

  • Modules, Services & Dependency InjectionExercise: Auto Maintenance

    We'll build a simple app for tracking a fleet of corporate vehicles across several parking lots, using our newfound knowledge around components, services and content projection.

  • Modules, Services & Dependency InjectionComponents: Content Projection

    Continuing our discussion around components, we'll look at the idea of content projection, whereby we can provide a block of Angular template to a component. We'll start with some simple applications of this technique, and move on to techniques for dissecting and reorganizing the template within the component. Along the way, we'll look at the concept of View Encapsulation, and how our component's styles are affected by operating in different encapsulation modes.

  • Modules, Services & Dependency InjectionValidating Input

    We'll build a text field component that validates user input against one or more regular expressions, conditionally applying styles to indicate valid/invalid state. Within this example, we'll find clear opportunities to apply what we've learned about one-way and two-way data binding and emitting events.

  • Modules, Services & Dependency InjectionLunch

    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.