学 Angular: 编程课程
学 Angular: 编程课程 — 编写组件,在手机上实时查看渲染效果
学 Angular: 编程课程 是一款面向初学者、学生以及从 JavaScript 转向 Angular、希望在手机上学习 Angular 的用户的免费 iOS 和 Android 应用。其实时三栏工作台——component.ts、template.html 和 styles.css会在你输入代码时即时渲染结果,38 门课程从第一个独立组件讲起,涵盖 signals、RxJS、NgRx 和服务端渲染。
- 价格
- 免费,支持升级至 Pro
- 平台
- iOS 和 Android
- 语言
- 22
- 年龄分级
- 4+
- 需要
- iOS 15.1 或更高版本


修改类中的值,看着模板随之更新。
Angular 的核心理念,是通过一个框架让组件的类、模板和视图始终保持同步。工作台让你能在手机屏幕上直观看到这一点:编辑 component.ts,预览就会重新渲染。相比阅读依赖注入和 signals 的定义,这是实际感受它们工作方式最快的方法。
这是什么
学 Angular: 编程课程 是一款适用于 iOS 和 Android 的免费教育应用,带你从第一个独立组件开始,完整学习 Angular 前端开发路径。应用提供实时三栏工作台(component.ts、template.html、styles.css),并配有能在你编写代码时实时渲染结果的预览区域。38 门课程涵盖 signals、RxJS、路由、表单、NgRx 状态管理和服务端渲染,并配有 60 个 TypeScript 编程任务,以及可解答疑惑的 AI Mentor。
应用内
界面展示





课程
Angular 课程涵盖哪些内容
共 38 门课程、144 节课,内容取自应用自身的课程列表——从第一个 standalone component,到 signals、NgRx 和 server-side rendering。
组件与项目基础
Welcome to Angular、Angular CLI and Project Structure、Angular 19 Fundamentals、Standalone Components Deep Dive、Built-in Control Flow、Component Styling and Encapsulation,以及 Component Lifecycle Hooks。
Signals 与响应式状态
Angular Signals Fundamentals、Signals: Computed and Effects、Signal Inputs and Queries、Signal-Based State Management,以及 NgRx SignalStore——这是当前推荐的保存和派生组件状态的方式。
服务、指令与模板
Dependency Injection Basics、Pipes: Built-in and Custom、Two-Way Binding and Model Inputs、Content Projection and Templates、Directive Composition API,以及 Advanced Components and Directives。
路由与表单
Angular Routing and Navigation、Angular Router Advanced、Working with Forms、Reactive Forms Advanced,以及 Custom Form Controls。
RxJS 与 HTTP
RxJS Fundamentals for Angular、RxJS Operators in Depth、HttpClient Interceptors,以及 HTTP and API Integration——连接组件与真实后端的这一层。
状态管理与测试
State Management with NgRx、Angular Unit and Component Testing,以及 End-to-End Testing for Angular。
性能与生产环境
Change Detection and Performance、Server-Side Rendering with Angular SSR、Hydration and Performance、Angular Animations、Internationalization (i18n)、Micro Frontends with Module Federation、Building Angular Libraries,以及 Angular Security Essentials。
工作原理
工作台中的一次学习过程
每节课程都会将简短讲解与实时工作台结合起来,让你刚读到的 Angular 概念和使用它的代码出现在同一个屏幕上,而不是留到之后再做单独的练习。
先阅读概念,再打开工作台
简短课程会介绍一个概念——signal、指令或路由守卫——然后将 component.ts、template.html 和 styles.css 并排交给你使用,同时提供一个预览面板,实时渲染你编写的内容。
修改代码,看着组件响应
编辑类中的值,预览中的模板就会更新;破坏一个绑定,预览也会准确显示相应结果。这是静态代码示例无法做到的部分,也是课程依赖工作台,而不是只提供阅读型代码片段的原因。
完成 TypeScript 任务,遇到困难时随时提问
课程之后还有 60 个编程任务,分为三个难度等级;如果任务进展不下去,你可以查看提示和完整解答。对于仍然无法理解的问题——例如不会更新的 signal,或注入后返回 undefined 的服务——AI Mentor 会在课程自带的聊天界面中为你讲解。
包含内容
应用包含的内容
38
课程,A1 至 C1
38 门课程共包含 144 节课,从独立组件和 signals 一直讲到 RxJS、表单、路由、NgRx 状态管理、测试、服务端渲染和微前端。
实时
三栏工作台
component.ts、template.html 和 styles.css 可并排编辑,并配有能在你输入时实时渲染 Angular 代码的预览区域——运行需要连接网络。
60
TypeScript 编程任务
三个难度等级,提供提示和完整解答;此外还有 Projects 标签页,包含多文件工作区、引导式项目路径和版本历史记录。
AI
AI 导师(Pro)
在课程聊天界面中询问错误、概念或你自己的代码;Pro 还提供 AI 课程生成器,可针对你尚未掌握的特定主题生成课程,以及一个能将文字描述的页面构建为代码的 AI playground。
世界
World Coding Challenge
所有人的解答都会显示在同一个共享题目下,同时提供连续学习记录、XP、排行榜和每日提醒。
证书
结业证书
完成期末考试即可获得印有你名字的证书,此外还有小测验、闪卡复习,以及一页式语法、装饰器和指令速查表。
背景
Angular 是什么?实际应该按什么顺序学习?
Angular 是由 Google 维护、使用 TypeScript 编写的前端框架,用于构建大型 Web 应用中的交互式单页界面。与需要自行组装的库不同,它已经为你预先确定并提供了一整套方案:组件、路由器、表单系统、依赖注入,以及用于处理事件流的 RxJS。实际的学习顺序通常是先学组件和模板,再学 signals 和服务,接着学习路由和表单,最后学习负责与真实后端通信的 RxJS 和 HTTP 层。
独立组件构建模块
界面中一个自包含的部分——拥有自己的类、模板和样式,并自行声明依赖,而不是归属于共享模块。现代 Angular 应用由这些组件组成一棵树,这也是课程从这里开始,而不是从旧式的基于模块的模式开始的原因。
Signal当前的状态管理方式
使用 signal() 创建的响应式值,模板的任何部分都可以读取它;computed() 用于从一个 signal 派生出另一个 signal,而 effect() 会在某个 signal 发生变化时运行代码。Signals 减少了大量手动变更检测工作,如今也是保存组件状态的推荐方式。
依赖注入组件之间的连接方式
组件无需自行创建所需的服务,而是提出请求,由 Angular 提供这些服务。这是初学者第一次接触时最容易卡住的概念,也是让大型代码库具备可测试性的关键,因为在测试中,可以轻松用一个模拟服务替换真实服务。
RxJS 和 observables数据流
这是一个用于处理随时间陆续到达、而非一次性全部到达的值的库,例如 HTTP 响应、路由参数,以及不断变化的表单输入。Angular 的 HttpClient 和路由器会直接返回 observables,因此无论你是否原本计划学习,最终都需要掌握 map 和 switchMap 等操作符。
是否适合
适合哪些人——不适合哪些人
如果你符合以下情况,就很适合
- 你正在从零开始学习 Angular,并想先看到组件产生响应,再记忆背后的理论
- 你已经了解 JavaScript 或 TypeScript,正在学习自己的第一个框架
- 你目前使用 React 或 Vue,因工作需要转向 Angular,希望了解对应术语,而不是从头重新学习一遍
- 你想完成 TypeScript 编程任务,并使用真正的多文件项目工作区,而不只是回答选择题
- 你是学生或转行者,正在准备 frontend developer 面试
如果你符合以下情况,这不是适合你的工具
- 你需要工作台完全无需连接网络即可运行——但实时预览明确需要网络连接
- 你希望所有内容都免费:第一门课程和工作台免费,Pro 解锁其余内容,包括 AI 工具
- 你已经在构建用于生产环境的 Angular 应用,需要的是深入的架构或 API 参考资料,而不是课程
- 你需要获得认证资格——这里的证书是课程完成证书,并非正式资质证明
问题
常见问题
Angular 应用的实时工作台究竟会显示什么?
三个可编辑窗格——用于 TypeScript 类的 component.ts、用于标记的 template.html,以及用于样式的 styles.css——旁边是一个预览窗格。无论你编辑其中哪一个,预览都会渲染组件。你可以在类中修改 signal 的值,并立即看到模板更新;这是书中的静态代码示例无法展示的具体效果,也是课程围绕这一点展开,而不是围绕只能阅读的示例展开的原因。
学习 Angular 之前需要了解 JavaScript 或 TypeScript 吗?
掌握一些 JavaScript 会有帮助,但不是必须先完成的前置条件。Angular 使用 TypeScript 编写,而 TypeScript 是添加了类型系统的 JavaScript。课程会在需要时介绍类型注解和接口,而不是假定你已经了解它们。学 Angular: 编程课程 从第一个 standalone component 开始,同时讲解相关的 TypeScript 知识。
Angular signals 是什么?为什么课程一开始就讲它们?
signal 是通过 signal() 创建的响应式值,模板可以直接读取它;computed() 会根据现有 signal 派生出新的 signal,而 effect() 会在它所依赖的 signal 发生变化时自动运行代码。Signals 是当前 Angular 推荐的保存组件状态的方式,取代了旧版本中大量手动进行变更检测的工作,因此 Signals Fundamentals 课程在课程路径中安排得较早,而不是作为高级主题出现。
Angular 和 React 有什么区别?
React 是一个渲染库;你需要围绕它自行选择路由、表单处理、HTTP 客户端和状态管理方案。Angular 是一个完整框架,这些选择已经内置其中——包括组件、依赖注入、路由器、RxJS,以及现在内置的 signals。React 通常更容易上手,而 Angular 的体量更大;但在大型团队中,不同公司的 Angular 代码库往往更相似,这也是大型组织持续使用它的部分原因。
2026 年学习 Angular 仍然值得吗?
值得,尤其是当你的目标是就业而不是开发个人项目时。Angular 在大型企业和企业级工具中被广泛使用,在这些场景中,它明确的结构、内置的测试支持和长期支持计划比新颖性更重要,因此相关招聘信息通常较为稳定。本课程中的 signals 和 SignalStore 内容也反映了框架实际的发展方向,而不是停留在过时的版本快照上。
要学多久 Angular,才能达到可以构建应用的程度?
持续学习比总学习时长更重要。大多数初学者每天在工作台中完成简短课程,坚持几周后,就能构建并连接几个组件,使用 signals 在组件之间传递数据,并调用 API。依赖注入、RxJS operators 和 NgRx 状态管理通常需要再学习一遍,因此课程会把它们安排在基础内容之后,而不是一开始就讲。
学 Angular: 编程课程 支持 iPhone 和 Android 吗?适合哪些人?
学 Angular: 编程课程 可在 App Store 上用于 iPhone 和 iPad,也可在 Google Play 上用于 Android,界面支持 22 种语言,年龄分级为 4+。它适合完全没有基础的初学者、学生、转行者,以及了解一些 JavaScript、希望把 Angular 作为第一个框架来学习,或想从 React 或 Vue 转向 Angular 的开发者。
学 Angular: 编程课程 免费吗?
该应用可在 App Store 和 Google Play 免费下载。第一门课程和实时工作台免费。Pro 是付费升级版本:它会解锁所有课程、全部 60 个编程任务,以及 AI tutor、lesson generator 和 playground,并移除广告。
实时预览在离线状态、地铁上或飞机上能运行吗?
不能,至少实时预览不行——实时渲染组件需要网络连接,应用对此明确说明,而不是悄悄降低功能。课程和阅读材料在网络不稳定时仍可加载并正常使用;但如果你需要完全离线的工作台,这款应用的实时预览无法满足需求。
这款应用与 Google 或官方 Angular 团队有关联吗?
没有。学 Angular: 编程课程 是 CoddyKit 独立推出的学习课程,与 Google 或 Angular 团队没有关联,也未获得它们的认可。它按照 Google 维护和发布的方式讲解该框架,但应用本身是第三方课程,并非官方产品。
更多 CoddyKit 产品
可在 iOS 和 Android 上使用。