Effective Angular

Effective Angular

位教师：Packt - Course Instructors

访问权限由 New York State Department of Labor 提供

12个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

12个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将学到什么

Create scalable Angular monorepos using Nx for efficient project management
Leverage standalone components, Signals, and control flow to reduce complexity
Implement reactive programming with RxJS and manage application state effectively

您将获得的技能

您将学习的工具

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

12 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

该课程共有12个模块

This course is designed to take your Angular development skills to the next level, equipping you with the tools to build scalable, enterprise-grade applications. You'll learn to use Nx, RxJS, NgRx, and Cypress to manage complex front-end architectures and implement modern Angular techniques. With real-world applications and best practices, this course will help you master the essential concepts of Angular development.

By exploring key Angular features like dependency injection, reactive programming, and state management, you will gain the skills needed to create maintainable and high-performance applications. You’ll also learn how to implement modern tools and strategies, including Nx for monorepos, reactive programming with RxJS, and state management with NgRx. What makes this course different is its hands-on approach, where you not only learn Angular’s core features but also dive deep into advanced techniques such as building scalable Angular monorepos using Nx and testing with Cypress. Real-world case studies will help solidify your understanding. This course is ideal for front-end engineers with a basic understanding of Angular and TypeScript. By the end of the course, learners will be able to develop, test, and deploy large-scale, professional Angular applications.

In this section, we explore scalable Angular architecture using Nx, focusing on monorepo strategies, architectural patterns, and tools for enterprise-ready development.

涵盖的内容

2个视频10篇阅读材料1个作业

2个视频总计2分钟

Course Overview 1分钟
Scalable Front-End Architecture for Angular Applications - Overview Video 1分钟

10篇阅读材料总计100分钟

Introduction 10分钟
Different Approaches to Scaling Front-End Applications 10分钟
Disadvantages of Polyrepos 10分钟
The Hexagonal Architecture Pattern in Angular Applications 10分钟
Comparing the Architectural Patterns 5分钟
What Is Nx and Why Should You Use It? 5分钟
Running Tasks Effectively in a Monorepo with Nx 10分钟
Nx Dependency Management and Code Migrations 10分钟
Adding ESLint Rules to Improve Our Angular Code 20分钟
Setting Up Project Boundaries for the Angular Monorepo 10分钟

1个作业总计10分钟

Angular Architecture and Scalability Fundamentals 10分钟

In this section, we explore component communication using @Input and @Output, configure Angular routing for dynamic loading, and apply dependency injection with provider objects and tokens.

涵盖的内容

1个视频11篇阅读材料1个作业

1个视频总计1分钟

Powerful Angular Features - Overview Video 1分钟

11篇阅读材料总计120分钟

Introduction 10分钟
Dependency Injection Using the Inject Function 10分钟
Angular Control Flow 10分钟
A Deep Dive into Angular Routing 10分钟
Router Outlets and Auxiliary Routes 10分钟
Route Resolvers 10分钟
Emitting Values with the @Output() Decorator 10分钟
Component Communication with the Angular Router 20分钟
Declaring Provider Objects with UseFactory 10分钟
Using the Inject Function for Better Dependency Injection 10分钟
Dependency Instances, Injector Hierarchy, and Resolution Modifiers 10分钟

1个作业总计10分钟

Mastering Angular Fundamentals 10分钟

In this section, we explore Angular directives for DOM manipulation, custom pipes for value transformation, and reusable animations to enhance application interactivity and maintainability.

涵盖的内容

1个视频7篇阅读材料1个作业

1个视频总计1分钟

Enhancing Your Applications with Directives, Pipes, and Animations - Overview Video 1分钟

7篇阅读材料总计80分钟

Introduction 20分钟
Angular Structural Directives 10分钟
Creating Custom Structural Directives 10分钟
Angular Directive Composition 10分钟
Using AsyncPipe 10分钟
Creating and Reusing Stunning Animations 10分钟
Animation Metadata Array 10分钟

1个作业总计10分钟

Mastering Angular Directives, Pipes, and Animations 10分钟

In this section, we cover Angular forms, including template-driven and reactive forms with validation and dynamic creation.

涵盖的内容

1个视频10篇阅读材料1个作业

1个视频总计1分钟

Building Forms Like a Pro - Overview Video 1分钟

10篇阅读材料总计110分钟

Introduction 10分钟
Building Template-Driven Forms 10分钟
Configuring Template-Driven Form Fields 10分钟
Grouping Template-Driven Form Fields 10分钟
Styling the Form and Form Controls Based on Control Status Values 10分钟
Custom Validators for Template-Driven Forms 10分钟
Async Validations with Custom Validators 10分钟
Dynamically Adding Fields and FormControl Instances 20分钟
Setting and Updating Values Programmatically 10分钟
Providing Visual Feedback About the Form's State in Reactive Forms 10分钟

1个作业总计10分钟

Mastering Form Techniques in Angular 10分钟

In this section, we explore dynamic Angular components using ngComponentOutlet, content projection, and template references to enhance UI flexibility and reusability.

涵盖的内容

1个视频10篇阅读材料1个作业

1个视频总计1分钟

Creating Dynamic Angular Components - Overview Video 1分钟

10篇阅读材料总计100分钟

Introduction 10分钟
Exploring Multi-Slot Content Projection with ng-content 10分钟
Using Template References and Variables 10分钟
Using Template Variables Effectively 10分钟
Combining ng-template with *ngIf 10分钟
Creating Dynamic Components Using Templates and Context 10分钟
Rendering Components Dynamically 10分钟
Using an Injector with ngComponentOutlet 10分钟
Lazy Loading Dynamic Components 10分钟
Rendering Components Dynamically Using the Defer Control Flow 10分钟

1个作业总计10分钟

Mastering Dynamic Content in Angular 10分钟

In this section, we explore code conventions, design patterns, and best practices in Angular to improve maintainability, scalability, and testability of applications. Key concepts include HTTP interceptors, generic services, and anti-patterns.

涵盖的内容

1个视频9篇阅读材料1个作业

1个视频总计1分钟

Applying Code Conventions and Design Patterns in Angular - Overview Video 1分钟

9篇阅读材料总计100分钟

Introduction 10分钟
Structural Conventions 5分钟
Performance-Related Best Practices 10分钟
Exploring Commonly Used Design Patterns in Angular Applications 10分钟
Factory Pattern 10分钟
Decorator Pattern 10分钟
Model Adapter Pattern 5分钟
Interceptor Pattern 10分钟
Building a Generic HTTP Service Containing a Model Adapter 30分钟

1个作业总计10分钟

Angular Best Practices and Code Structure 10分钟

In this section, we explore reactive programming in Angular using RxJS and Signals. Key concepts include managing asynchronous data streams, combining RxJS with Signals, and improving application performance through efficient state management.

涵盖的内容

1个视频13篇阅读材料1个作业

1个视频总计1分钟

Mastering Reactive Programming in Angular - Overview Video 1分钟

13篇阅读材料总计125分钟

Introduction 5分钟
Reactive Programming in Angular 10分钟
Unsubscribing with the TakeUntil() Operator 10分钟
ReplaySubject 10分钟
Creating an Observable from Multiple Observable Streams 10分钟
Pipeable Operators 10分钟
ConcatMap() Operator 10分钟
Powerful and Useful RxJS Operators 10分钟
Reactive Programming Using Angular Signals 10分钟
Updating Signals 10分钟
Signal Effects 10分钟
Signal Queries 10分钟
Using toObservable 10分钟

1个作业总计10分钟

Mastering Reactive Programming in Angular 10分钟

In this section, we explore application state management using RxJS, Signals, and NgRx. We focus on efficient state partitioning, facade services, and real-world implementation strategies.

涵盖的内容

1个视频11篇阅读材料1个作业

1个视频总计1分钟

Handling Application State with Grace - Overview Video 1分钟

11篇阅读材料总计140分钟

Introduction 10分钟
Unidirectional Data Flow 5分钟
Handling Global Application State Using RxJS 10分钟
Fetching, Getting, and Selecting Expenses 20分钟
Creating the Facade Interface 10分钟
Adjusting the Expenses Overview Page 30分钟
Finishing Up the Facade Service 20分钟
The Problem with Using RxJS or Signals for Global State Management 10分钟
Creating Your First NgRx Effect 5分钟
Creating Your Initial State and First Reducer Functions 10分钟
Adjusting the Facade Service So That They Use NgRx State Management 10分钟

1个作业总计10分钟

Mastering Application State Handling 10分钟

In this section, we cover Angular change detection, performance techniques, and security measures to prevent XSS and CSRF/XSRF attacks.

涵盖的内容

1个视频8篇阅读材料1个作业

1个视频总计1分钟

Enhancing the Performance and Security of Angular Applications - Overview Video 1分钟

8篇阅读材料总计70分钟

Introduction 10分钟
Improving Change Detection Efficiency 10分钟
Enhancing the Performance of Angular Applications 5分钟
Understanding and Using the NgOptimizedImage Directive 10分钟
Understanding and Using the TrackBy and Track Functions 10分钟
Building Secure Angular Applications 10分钟
Mitigating XSS Attacks 10分钟
What CSRF/XSRF Attacks Are and How to Prevent Them 5分钟

1个作业总计10分钟

Optimizing Angular Applications 10分钟

In this section, we explore internationalization, localization, and accessibility in Angular applications. Learn to implement language support, localize data formats, and design inclusive user experiences.

涵盖的内容

1个视频7篇阅读材料1个作业

1个视频总计1分钟

Internationalization, Localization, and Accessibility of Angular Applications - Overview Video 1分钟

7篇阅读材料总计70分钟

Introduction 10分钟
Translating Content Using Transloco 10分钟
Translating Values Programmatically in Your TypeScript Files 10分钟
Localization for Angular Applications 10分钟
Localizing Dates Using the TranslocoDate Pipe 10分钟
Making Your Angular Applications Accessible to Everyone 10分钟
Adding ARIA Attributes 10分钟

1个作业总计10分钟

Angular Internationalization and Accessibility Fundamentals 10分钟

In this section, we explore unit and end-to-end testing in Angular using Jest and Cypress, emphasizing test strategies to ensure code reliability and maintainability.

涵盖的内容

1个视频10篇阅读材料1个作业

1个视频总计1分钟

Testing Angular Applications - Overview Video 1分钟

10篇阅读材料总计110分钟

Introduction 10分钟
Understanding End-to-End Tests 10分钟
Understanding Integration Tests 10分钟
Fixing the Generated Spec Files 10分钟
The beforeEach() Function 10分钟
The Second It() Function 10分钟
Writing the Test Cases 10分钟
Running Unit Tests for One or More Projects 20分钟
Defining Page Objects for E2E Testing 10分钟
Using Fixtures in Your E2E Tests 10分钟

1个作业总计10分钟

Testing Strategies in Angular Applications 10分钟

In this section, we deploy Angular applications to GitHub Pages using Nx, analyze build outputs for optimization, and configure GitHub Actions for automated CI/CD workflows.