学 Angular: 编程课程 应用图标

学 Angular: 编程课程

教育 · 免费 · iOS & Android · CoddyKit

学 Angular: 编程课程 — 编写组件,在手机上实时查看渲染效果

学 Angular: 编程课程 是一款面向初学者、学生以及从 JavaScript 转向 Angular、希望在手机上学习 Angular 的用户的免费 iOS 和 Android 应用。其实时三栏工作台——component.ts、template.html 和 styles.css会在你输入代码时即时渲染结果,38 门课程从第一个独立组件讲起,涵盖 signals、RxJS、NgRx 和服务端渲染。

App Store — 免费下载Google Play — 免费下载
价格
免费,支持升级至 Pro
平台
iOS 和 Android
语言
22
年龄分级
4+
需要
iOS 15.1 或更高版本
学 Angular: 编程课程 主屏幕(阿拉伯语界面),包含 Angular Academy 卡片、每日目标、World Coding Challenge、Ask Mentor、Generate Your Lesson 和快速提问按钮学 Angular: 编程课程 课程路径(阿拉伯语界面),包含 144 节课,开篇课程为 Welcome to Angular、Angular CLI and Project Structure、Built-in Control Flow 和 Angular 19 Fundamentals
38课程,A1 至 C1
实时三栏工作台
60TypeScript 编程任务
修改类中的值,看着模板随之更新。

Angular 的核心理念,是通过一个框架让组件的类、模板和视图始终保持同步。工作台让你能在手机屏幕上直观看到这一点:编辑 component.ts,预览就会重新渲染。相比阅读依赖注入和 signals 的定义,这是实际感受它们工作方式最快的方法。

这是什么

学 Angular: 编程课程 是一款适用于 iOS 和 Android 的免费教育应用,带你从第一个独立组件开始,完整学习 Angular 前端开发路径。应用提供实时三栏工作台(component.ts、template.html、styles.css),并配有能在你编写代码时实时渲染结果的预览区域。38 门课程涵盖 signals、RxJS、路由、表单、NgRx 状态管理和服务端渲染,并配有 60 个 TypeScript 编程任务,以及可解答疑惑的 AI Mentor。

应用内

界面展示

学 Angular: 编程课程 主屏幕(阿拉伯语界面),包含 Angular Academy 卡片、每日目标、World Coding Challenge、Ask Mentor、Generate Your Lesson 和快速提问按钮
首页首页显示 Angular 课程卡片,其中包含开始按钮、你的等级和每日目标、World Coding Challenge,以及一键使用 Ask Mentor 和 Generate Your Lesson 的按钮(此处展示的是阿拉伯语界面)。
学 Angular: 编程课程 课程路径(阿拉伯语界面),包含 144 节课,开篇课程为 Welcome to Angular、Angular CLI and Project Structure、Built-in Control Flow 和 Angular 19 Fundamentals
课程路径该课程路径共包含 144 节课,开篇为 Welcome to Angular、Angular CLI and Project Structure、Built-in Control Flow 和 Angular 19 Fundamentals,且每门课程都标记为 Beginner。
学 Angular: 编程课程 的第一课(阿拉伯语界面),配有简短的讲解卡片,并提示 AI Mentor 按钮的位置
一节课一节课会从简短、每张只讲一个要点的卡片开始——这里介绍的是 Angular,最后还会提示每节课中都提供的 AI Mentor 按钮。
AI chat screen asking How can I help you, with suggested prompts to explain key concepts, give tips, quiz you and create a learning roadmap
AI chatThe AI chat answers coding questions and starts from suggestions: explain the key concepts, share tips, quiz you or build a learning roadmap.
Coding Challenges screen with a challenge search, Join with Code, category filters and the active Angular course challenge
ChallengesCoding Challenges: search challenges, join a match with a code, filter by area and start one from your active Angular course.

课程

Angular 课程涵盖哪些内容

共 38 门课程、144 节课,内容取自应用自身的课程列表——从第一个 standalone component,到 signals、NgRx 和 server-side rendering。

  1. 组件与项目基础

    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。

  2. Signals 与响应式状态

    Angular Signals Fundamentals、Signals: Computed and Effects、Signal Inputs and Queries、Signal-Based State Management,以及 NgRx SignalStore——这是当前推荐的保存和派生组件状态的方式。

  3. 服务、指令与模板

    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。

  4. 路由与表单

    Angular Routing and Navigation、Angular Router Advanced、Working with Forms、Reactive Forms Advanced,以及 Custom Form Controls。

  5. RxJS 与 HTTP

    RxJS Fundamentals for Angular、RxJS Operators in Depth、HttpClient Interceptors,以及 HTTP and API Integration——连接组件与真实后端的这一层。

  6. 状态管理与测试

    State Management with NgRx、Angular Unit and Component Testing,以及 End-to-End Testing for Angular。

  7. 性能与生产环境

    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 概念和使用它的代码出现在同一个屏幕上,而不是留到之后再做单独的练习。

  1. 先阅读概念,再打开工作台

    简短课程会介绍一个概念——signal、指令或路由守卫——然后将 component.ts、template.html 和 styles.css 并排交给你使用,同时提供一个预览面板,实时渲染你编写的内容。

  2. 修改代码,看着组件响应

    编辑类中的值,预览中的模板就会更新;破坏一个绑定,预览也会准确显示相应结果。这是静态代码示例无法做到的部分,也是课程依赖工作台,而不是只提供阅读型代码片段的原因。

  3. 完成 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 维护和发布的方式讲解该框架,但应用本身是第三方课程,并非官方产品。

开始使用

今天就构建你的第一个 Angular 组件

在 iOS 和 Android 上免费开始学习,支持 22 种语言。

App Store — 免费下载Google Play — 免费下载
最近审核日期 · 由 CoddyKit 发布 · 隐私政策
可在 iOS 和 Android 上使用。