Angular Architecture and Best Practices

By Dan Wahlin
Learn how to build a solid Angular application architecture that is easy to refactor and maintain. Topics covered include code/component/module organization, component communication, RxJS, state management, best practices, and more.
Play course overview
Course info
Rating
(197)
Level
Intermediate
Updated
Jan 15, 2019
Duration
5h 21m
Table of contents
Course Overview
Course Overview 2m
Introduction
Course Overview 4m Introduction 2m Sample Application and Software Requirements 2m Key Concepts and Learning Goals 6m Prerequisites to Maximize Learning 1m
Planning the Application Architecture
The Angular Style Guide 3m Other Considerations 4m Summary 3m Architecture Planning Template Example - Part 1 7m Architecture Planning Template Example - Part 2 6m Architecture Planning Template 5m Introduction 2m Architecture Considerations 8m
Organizing Features and Modules
Organizing Features 9m Core and Shared in Action 9m Summary 3m Consuming a Custom Library 5m Putting All the Modules Together 5m Introduction 2m Core and Shared Modules 4m Creating a Custom Library 6m Feature Modules 7m
Structuring Components
Cloning Techniques 1m Introduction 2m Input and Output Properties in Action 8m Container and Presentation Components 8m Container and Presentation Components in Action 6m Component Inheritance 2m Cloning in Action 8m Component Inheritance in Action 5m Passing State with Input and Output Properties 4m Summary 3m Change Detection Strategies 7m Reference vs. Value Types 5m Cloning with Immutable.js 4m
Component Communication
Using an Event Bus Service 5m Component Communication 5m Understanding RxJS Subjects 8m Summary 2m RxJS Subjects in Action - Part 1 3m Introduction 2m Creating an Event Bus Service 7m Unsubscribing from Observables 4m RxJS Subjects in Action - Part 2 8m Using an Observable Service 3m Creating an Observable Service 5m
State Management
The Need for State Management 4m Observable Store 5m Observable Store in Action 5m ngrx-data 3m NgRx 5m Summary 2m State Management Options 3m State Management Review 6m Introduction 2m ngrx-data in Action 8m NgRx in Action 7m Angular Services 4m
Additional Considerations
HttpClient and RxJS Operators 11m Functions and Pipes in Action 6m Introduction 3m Using a Memo Decorator 6m Functions vs. Pipes 3m Key Security Considerations 9m Summary 3m HTTP Interceptors 4m
Course Summary
Course Summary 4m
Description
Course info
Rating
(197)
Level
Intermediate
Updated
Jan 15, 2019
Duration
5h 21m
Description

There's a lot of questions out there about the core concepts of Angular, including: are you following established best practices? How easy will it be to maintain and refactor the application in the future? If you're starting a new application from scratch, what application architecture should be used? In this course, Angular Architecture and Best Practices, you'll learn architectural concepts, best practices, and how to solve some of the more challenging tasks that come up. First, you'll discover component communication techniques. Next, you'll learn state management and code organization. Finally, you'll explore general best practices, performance considerations, and more. When you're finished with this course, you'll have the skills and knowledge of Angular application architecture needed to think through the process of building a solid application architecture that is easy to refactor and maintain.

About the author
Dan Wahlin
About the author

Dan Wahlin founded Wahlin Consulting, which provides consulting and training services on JavaScript, Angular, Node.js, C#, ASP.NET MVC, Web API, and Docker. He is a Google GDE, Microsoft MVP and Regional Director, and speaks at conferences and user groups around the world.

More from the author
Docker for Web Developers
Beginner
5h 38m
Jun 30, 2020
Seminar: Getting Started with a Career in Web Development
Beginner
7h 26m
Jun 25, 2020
Kubernetes for Developers: Moving from Docker Compose to Kubernetes
Beginner
2h 20m
May 29, 2020
More courses by Dan Wahlin
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
(Music) Welcome to the Angular Architecture and Best Practices course. My name's Dan Wahlin, and I'm a software developer, architect, and trainer specializing in web technologies. Over the years, I've had the opportunity to work with many companies around the world on front end and back-end architecture, and I'm really excited to share some of the information I've learned with you. Application architecture is a big topic, and one that can be very subjective, so the overall goal of this course is to provide you with solid, proven guides that can be used as you plan and build your applications. The course starts out by discussing key architecture considerations to take into account when doing initial planning of your application. Over the years, I've created a simple architecture planning template that I use with companies, and I'll show you how you can get started using it. From there, you'll learn how to structure features and modules in a self-contained manner that allows team members to develop and deploy features independently. Sharing functionality across an application or across multiple applications is also key as you plan any architecture, and you'll learn about the role that custom Angular libraries can play there. As the course progresses, you'll learn about the container presentation pattern and how it can be used to structure components, component communication techniques, and the importance of RxJS subjects, and learn about the need for state management and the different options that exist. Finally, additional considerations such as pipes versus functions and different RxJS operators that can be used with HTTP calls will also be covered. So, let's get started and jump right in.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT