核心学习路径建议

学习 AngularJS 最好遵循一个循序渐进的路径，这样可以打下坚实的基础,避免中途迷失方向。

基础入门

这个阶段的目标是理解 AngularJS 的核心思想和基本用法,能够独立构建一个简单的单页应用。

1. 什么是 AngularJS？

   • ：了解 AngularJS 的定位（一个由 Google 维护的前端 JavaScript 框架）、核心特性（双向数据绑定、依赖注入、指令、MVC/MVVM模式）以及它为什么能简化前端开发。
   • 关键概念：SPA (Single Page Application)、数据驱动、声明式编程。

2. 第一个 AngularJS 应用：ng-app

   • ：如何引入 AngularJS 库，如何使用 ng-app 指令来“启动”一个 AngularJS 应用，这是 AngularJS 的入口。
   • 动手实践：创建一个 HTML 文件，引入 AngularJS，并让页面显示 "Hello, AngularJS!"。

3. 数据绑定：ng-model 和 (插值表达式)

   • ：这是 AngularJS 最核心、最神奇的功能。
     • (插值表达式)：用于在 HTML 中显示变量的值。
     • ng-model 指令：用于在 HTML 表单元素（如 <input>, <select>）和 JavaScript 变量之间建立双向数据绑定。
   • 动手实践：创建一个输入框，用 ng-model 绑定一个变量，再用 在页面上实时显示这个变量的值,感受输入内容时页面同步更新的效果。

4. 控制器：ng-controller

   • ：理解控制器的作用，控制器是 JavaScript 函数，用于“控制” AngularJS 应用中的数据，通过 ng-controller 指令将控制器与 HTML 关联起来。
   • 关键概念：$scope 对象，控制器通过 $scope 将数据和方法暴露给视图。

5. 模块：angular.module

   • ：学习如何使用模块来组织你的应用，模块是应用的容器，可以定义控制器、服务、指令等,这是构建大型应用的基础。
   • 动手实践：将之前写在 HTML 里的控制器逻辑，用 angular.module 的方式重构到 JavaScript 文件中。

核心进阶

掌握基础后，需要深入学习 AngularJS 的核心构建模块。

1. 指令

   • ：指令是 AngularJS 的“超能力”，学习如何使用内置指令（如 ng-repeat, ng-show, ng-hide, ng-if, ng-class, ng-style）来动态操作 DOM。
   • 动手实践：用 ng-repeat 遍历一个数组，动态生成列表；用 ng-show/ng-hide 或 ng-if 控制元素的显示与隐藏。

2. 作用域 与 事件

   • ：
     • 深入理解 $scope 的层级关系（原型继承）。
     • 学习 $event 对象，如何在 HTML 中处理用户事件（如 ng-click）。
     • 学习 $scope.$apply() 的作用和何时需要手动调用它。

3. 服务

   • ：服务是 AngularJS 的另一个核心特性，它是一个单例对象，在整个应用的生命周期内只被创建一次，学习使用内置服务，如：
     • $http：用于向服务器发送请求，获取数据（实现前后端交互）。
     • $location：与浏览器地址栏进行交互。
     • $timeout 和 $interval：替代原生的 setTimeout 和 setInterval。
   • 动手实践：使用 $http 从一个公开的 API（如 JSONPlaceholder）获取数据，并用 ng-repeat 将其显示在页面上。

4. 过滤器

   • ：过滤器可以格式化显示在模板上的数据，学习使用内置过滤器（如 currency, date, number, uppercase, lowercase, filter）以及如何创建自定义过滤器。
   • 动手实践：在 ng-repeat 中使用 filter 过滤器,实现一个简单的搜索框。

项目实战与高级主题

通过构建一个完整的项目来巩固所学知识,并了解一些高级概念。

1. 构建一个完整的项目

   • 项目建议：待办事项列表、产品展示页面、简单的博客前端。
   • ：将模块、控制器、服务、指令、过滤器等所有知识点整合起来,完成一个功能完整的应用。

2. 路由：ngRoute

   • ：学习如何使用 ngRoute 模块来实现单页应用中的视图切换，理解 routeProvider 如何根据 URL 加载不同的模板和控制器。
   • 动手实践：为你的项目添加多个页面（如首页、关于我们、联系我们），并通过导航链接进行切换,页面刷新不跳转。

3. 表单

   • ：学习 AngularJS 的表单验证机制，了解 ng-form 指令，以及如何通过 $valid, $invalid, $pristine, $dirty 等状态来控制表单的提交和错误提示。

4. 动画：ngAnimate

   • ：了解如何使用 ngAnimate 模块为指令（如 ng-if, ng-repeat, ng-show）的添加、移除和样式变化添加平滑的 CSS 过渡或动画效果,提升用户体验。

优质中文视频教程推荐

以下是一些广受好评的中文视频教程资源,适合不同学习习惯的同学。

Bilibili (B站) - 最推荐

B站是学习编程的宝库,有大量免费且优质的搬运和原创教程。

• 【经典入门】AngularJS 全套教程

  • UP主：黑马程序员
  • 简介：这是一套非常经典的 AngularJS 入门教程，内容系统、全面，讲解清晰，非常适合零基础的同学，涵盖了从基础到路由、表单等大部分核心内容。
  • 链接：在 B站搜索 “黑马程序员 AngularJS” 即可找到。

• 【实战导向】尚硅谷 AngularJS 教程

  • UP主：尚硅谷
  • 简介：尚硅谷的教程以实战和项目驱动著称，这套 AngularJS 教程同样质量很高，讲解深入,适合希望快速上手并应用到项目中的学习者。
  • 链接：在 B站搜索 “尚硅谷 AngularJS” 即可找到。

• 【英文搬运】AngularJS Fundamentals in 60 Minutes

  • UP主：Fireship (或其它搬运工)
  • 简介：如果你喜欢快节奏、高信息密度的教程，可以看看这个，虽然是英文，但有中文字幕，60分钟快速带你了解 AngularJS 的核心概念,适合有一定基础或想快速概览的同学。

慕课网 / 菜鸟教程

这类平台提供图文和视频结合的教程,适合喜欢边看文档边敲代码的学习者。

• 慕课网

  • 课程：搜索 “AngularJS”，可以找到一些入门课程，如 《AngularJS实战入门》，课程通常比较短小精悍,适合快速入门。
  • 特点：在线编码环境,可以边学边练。

• 菜鸟教程

  • 教程：提供非常详细的 AngularJS 教程 (RUNOOB)以文字和代码示例为主，非常全面,适合作为查询手册和知识补充。
  • 链接：https://www.runoob.com/angularjs/angularjs-tutorial.html

重要提示：AngularJS vs Angular

在学习之前,你必须清楚一个非常重要的概念：

• AngularJS (版本 1.x)：你将要学习的是 第一代 Angular 框架，由 Google 于 2010 年发布，它是一个成熟的框架,但在很多新项目中已被淘汰。
• Angular (版本 2+)：这是 完全重写 的新一代框架，从 TypeScript 重写，于 2025 年发布，我们现在通常说的 "Angular" 指的就是这个版本，它和 AngularJS 在架构、语法、理念上都有巨大差异，两者不兼容。

你应该学哪个？

• 学习 AngularJS 的原因：

  1. 维护旧项目：如果你需要维护或开发基于 AngularJS 的遗留系统,那么必须学习它。
  2. 学习历史：了解前端框架的演进历史，理解 AngularJS 奠定的“数据绑定”、“依赖注入”等思想对后续框架的深远影响。
  3. 概念入门：对于初学者，AngularJS 的某些概念（如双向绑定）比 Angular 更容易直观理解。

• 学习 Angular 的原因：

  1. 新项目开发：99% 的新项目都应该选择学习 Angular，它更现代、性能更好、社区更活跃、工具链更完善。
  2. 职业发展：目前市场上 AngularJS 的需求量已经很小，而 Angular 的需求量依然很大。

总结建议：

• 如果你的目标是找工作或做新项目，请直接跳过 AngularJS，去学习 Angular (v2+)，网上有海量的 Angular 教程（如 B站的“尚硅谷 Angular 最新版”）。
• 如果你的目标是维护老项目或出于学习历史的目的，那么这份 AngularJS 教程路径对你非常有价值。

希望这份详细的指南能帮助你顺利开启 AngularJS 的学习之旅！