重要提示：AngularJS vs. Angular (v2+)
在开始之前,必须明确一个非常重要的概念：
（图片来源网络，侵删）
- AngularJS (Angular 1.x)：这是一个第一代框架，发布于 2010 年左右，它使用 JavaScript 和 控制器 的概念，虽然现在很多新项目不再使用它，但维护旧项目、理解 Web 开发的历史以及学习一些基础概念（如双向数据绑定、依赖注入）时,它仍然非常有价值。
- Angular (v2 及以上)：这是一个完全重写的框架，发布于 2025 年，它使用 TypeScript，核心是 组件 和 模块,这是目前所有新项目应该使用的框架。
本教程资源主要针对 AngularJS (1.x)。
AngularJS 学习路径（循序渐进）
基础概念入门
这个阶段的目标是理解 AngularJS 的核心思想，包括指令、数据绑定、作用域和模块。
-
什么是 AngularJS？
- 它是一个由 Google 维护的前端 JavaScript 框架。
- 核心思想：通过扩展 HTML 的词汇（指令）,声明式地构建用户界面。
- 核心特性：双向数据绑定、依赖注入、指令。
-
第一个 AngularJS 应用：
ng-app和ng-model
（图片来源网络，侵删）ng-app：指令，用于告诉 AngularJS 哪个 DOM 元素是应用的根。ng-model：指令，用于将 HTML 表单元素（如<input>）与数据模型进行双向绑定。
-
数据绑定： (插值表达式)
{{ expression }}用于在 HTML 中显示表达式的值，当数据模型变化时,视图会自动更新。
-
控制器：
ng-controller- 控制器是 JavaScript 函数，用于控制 AngularJS 应用中的数据。
- 它通过
$scope对象将数据和方法附加到视图上。
-
模块：
angular.module- 模块是应用的主要容器，用于组织控制器、指令、服务等。
- 这是 AngularJS 依赖注入系统的基础。
核心进阶
掌握了基础后，需要深入学习 AngularJS 的其他核心组件。
-
指令
- 内置指令：深入学习
ng-show,ng-hide,ng-if,ng-repeat,ng-class,ng-style等。 - 自定义指令：学习如何创建自己的指令来扩展 HTML 的功能，这是 AngularJS 的强大之处。
- 内置指令：深入学习
-
作用域
- 理解作用域是连接控制器和视图的桥梁。
- 学习作用域的继承链（
$parent和$childHead）。 - 了解
$rootScope（根作用域）。
-
服务
- 服务是 AngularJS 中可复用的、单例的对象。
- 学习内置服务，如
$http(用于 AJAX 请求)、$location(用于操作 URL)、$log(用于日志)。 - 学习如何创建自定义服务。
-
过滤器
- 过滤器用于格式化显示在视图上的数据。
- 学习内置过滤器：
currency,date,filter,json,lowercase,number,uppercase。 - 学习在模板和 JavaScript 中使用过滤器。
-
依赖注入
- 理解 DI 是 AngularJS 的设计核心,它使得组件之间的解耦和测试变得非常容易。
- 学习如何在函数参数中声明依赖（如
function MyController($scope, $http)）。
项目实践与高级主题
通过构建一个完整的项目来巩固所学知识。
-
路由：
ngRoute服务- 学习如何实现单页应用 的路由功能。
- 配置路由规则,实现视图的动态加载。
-
表单
- 学习 AngularJS 的表单验证功能。
- 了解
$valid,$invalid,$dirty,$pristine等状态。
-
动画：
ngAnimate模块学习如何为 HTML 元素添加进入、离开和类变化的动画效果。
-
测试
- 学习使用 Karma 和 Jasmine 进行单元测试和端到端测试。
- 编写测试用例来保证代码质量。
免费 AngularJS 教程 PDF 资源
以下是一些经过筛选的、高质量的免费 PDF 资源,涵盖了从入门到进阶的内容。
官方文档（必读）
AngularJS 的官方文档是最好的学习资料,权威且全面。
- 链接: https://docs.angularjs.org/guide
- 简介: 这是 AngularJS 的核心指南，包含了“八步”教程，可以让你快速上手，官方文档的每一章都可以单独打印或保存为 PDF。
- 优点:
- 权威性：最准确、最官方的资料。
- 全面性：覆盖了所有 API 和概念。
- 示例丰富：每个概念都配有可运行的代码示例。
- 如何获取 PDF：你可以使用浏览器的“打印”功能，选择“另存为 PDF”,将任何一章保存下来。
书籍形式的免费 PDF
这些是作者或出版社免费分享的完整书籍,非常适合系统学习。
-
《AngularJS in 60 Minutes》
- 链接: https://www.ng-book.com/2/ (滚动到页面底部，有 "Free PDF" 下载选项)
- 简介: 这本书的前几章免费提供，内容精炼，非常适合快速入门和建立知识框架，虽然是针对 AngularJS 1.x 的旧版,但基础概念完全适用。
-
《A Better AngularJS》by Pawel Kozlowski
- 链接: https://leanpub.com/abetterangularjs/read (Leanpub 平台，可以免费在线阅读，部分章节可免费下载 PDF)
- 简介: 这本书更侧重于最佳实践、代码组织和项目架构，对于有一定基础后想写出高质量 AngularJS 代码的开发者非常有帮助。
优质社区和教程网站
这些网站提供了大量高质量的教程，很多也提供了 PDF 版本。
-
Tutorialspoint - AngularJS Tutorial
- 链接: https://www.tutorialspoint.com/angularjs/
- 简介: 非常系统化的教程，从基础到高级都有，网站提供了“下载教程”的按钮，可以将所有内容下载为一个 PDF 文件。
- 优点: 内容结构清晰，易于查找,非常适合作为速查手册。
-
W3Schools - AngularJS Tutorial
- 链接: https://www.w3schools.com/angular/
- 简介: 另一个经典的入门教程网站，简单易懂，每个概念都有“尝试一下”的在线编辑器，虽然不直接提供 PDF，但内容非常适合初学者,可以自己整理成笔记。
-
Codecademy - Learn AngularJS
- 链接: https://www.codecademy.com/learn/learn-angularjs
- 简介: 交互式学习平台，通过动手编码来学习，虽然不是 PDF,但对于动手能力强的学习者来说效果非常好。
学习建议
- 动手编码，不要只看：AngularJS 是一个实践性很强的框架，跟着教程敲代码，并尝试修改代码,观察结果。
- 从官方文档开始：把官方文档当作你的“圣经”,遇到不确定的概念就去查阅。
- 先模仿，再创造：初期可以模仿教程中的例子，然后尝试自己构建一个小项目,比如一个简单的待办事项列表或一个博客前端。
- 理解“为什么”：不仅要学会如何使用某个指令或服务，更要理解它背后的设计思想（比如为什么需要依赖注入）。
- 关注社区：可以逛逛 Stack Overflow、GitHub 上的 AngularJS 仓库,看看别人遇到的问题和解决方案。
希望这份详细的路径和资源列表能帮助你顺利学习 AngularJS！祝你学习愉快！
