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
(291)
Level
Intermediate
Updated
Jan 15, 2019
Duration
5h 21m
Table of contents
Course Overview
Course Overview 2m
Introduction
Introduction 2m Prerequisites to Maximize Learning 1m Key Concepts and Learning Goals 6m Sample Application and Software Requirements 2m Course Overview 4m
Planning the Application Architecture
Introduction 2m Architecture Considerations 8m Architecture Planning Template 5m Architecture Planning Template Example - Part 1 7m Architecture Planning Template Example - Part 2 6m The Angular Style Guide 3m Other Considerations 4m Summary 3m
Organizing Features and Modules
Introduction 2m Organizing Features 9m Feature Modules 7m Core and Shared Modules 4m Core and Shared in Action 9m Creating a Custom Library 6m Consuming a Custom Library 5m Putting All the Modules Together 5m Summary 3m
Structuring Components
Introduction 2m Container and Presentation Components 8m Container and Presentation Components in Action 6m Passing State with Input and Output Properties 4m Input and Output Properties in Action 8m Change Detection Strategies 7m Reference vs. Value Types 5m Cloning Techniques 1m Cloning in Action 8m Cloning with Immutable.js 4m Component Inheritance 2m Component Inheritance in Action 5m Summary 3m
Component Communication
Introduction 2m Component Communication 5m Understanding RxJS Subjects 8m RxJS Subjects in Action - Part 1 3m RxJS Subjects in Action - Part 2 8m Creating an Event Bus Service 7m Using an Event Bus Service 5m Creating an Observable Service 5m Using an Observable Service 3m Unsubscribing from Observables 4m Summary 2m
State Management
Introduction 2m The Need for State Management 4m State Management Options 3m Angular Services 4m NgRx 5m NgRx in Action 7m ngrx-data 3m ngrx-data in Action 8m Observable Store 5m Observable Store in Action 5m State Management Review 6m Summary 2m
Additional Considerations
Introduction 3m Functions vs. Pipes 3m Functions and Pipes in Action 6m Using a Memo Decorator 6m HttpClient and RxJS Operators 11m Key Security Considerations 9m HTTP Interceptors 4m Summary 3m
Course Summary
Course Summary 4m
Description
Course info
Rating
(291)
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
Building and Orchestrating Containers with Docker Compose
Intermediate
1h 37m
May 3, 2021
Building and Running Your First Docker App
Beginner
2h 9m
Mar 22, 2021
Kubernetes for Developers: Core Concepts
Beginner
4h 36m
Jan 27, 2021
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