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