补 AngularJS 基础:从双向绑定到控制器逻辑

很多人前端履历里有一块空白:只懂 jQuery 的 DOM 操作,遇到单页应用或组件化思维就发懵。AngularJS 虽然版本较老,但它提出的依赖注入、双向绑定、指令系统依然是现代前端框架的思想源头。这门课专门填补这个缺口——它不讲宏大架构,而是把 AngularJS 的核心机制拆碎,带你从写出一个 "Hello World" 开始,逐步理解数据如何驱动视图、控制器如何组织逻辑。

适合零基础但已掌握 HTML/CSS/JavaScript 基础的同学。如果你连 var 和 let 的区别都模糊,建议先补 JS 基础;如果你已经熟悉 Vue 或 React,这门课可以作为对比学习的参考,理解现代框架的演进脉络。课程从表达式语法讲起,再到控制器中属性和方法的定义,最后过渡到视图与事件的绑定,层层递进。

学习路径建议:先啃透模块一,再动手练模块二

建议先把第一章 [初识 Angular] 完整过完。这一章只有六节,每节都在解决一个具体问题:比如如何把两个数相加并在页面上格式化显示,如何实现输入框和文本的双向同步。这些看似简单的例子,其实是在建立你对 scope 和表达式语法的直觉。别跳着看,第一章是后续所有概念的基石。

之后进入第二章 [表达式、控制器及模板],重点看控制器中属性和方法的定义、视图元素与事件的绑定。这里的练习很关键——你需要亲手写出控制器代码,并观察页面如何响应数据变化。如果某个视频你听了两遍还是不理解,不要急着往下赶,停下来对着代码复现一遍。控制器内的方法调用、事件绑定机制,只有通过反复调试才能真正掌握。

学完能独立做什么?配套资料怎么用?

课程资料包里有完整的示例代码和练习项目。建议你把代码 clone 下来,先跑通,再尝试修改参数,观察变化。学完后,你应该能独立回答这些问题:如何用 AngularJS 实现表单数据的实时回显?控制器之间如何通过 scope 传递数据?简单单页应用的页面结构该如何组织?

配套练习包括计算求和、双向绑定演示、表达式求值等小项目,每个项目都对应一个核心概念。建议你按章节顺序完成所有练习,不要只看不写。如果你未来想转学 Angular 或 React,这门课帮你建立的“数据驱动视图”思维会非常有用。记住:AngularJS 不是终点,而是你理解前端生态的一把钥匙。

课程目录

1-1 [初识Angular] angular简介 (15:02)
1-2 [初识Angular] 一个显示hello world的angular应用 (13:08)
1-3 [初识Angular] 实现计算并带格式显示两个数值的和 (09:27)
1-4 [初识Angular] 实现页面元素数据双向绑定的功能 (14:23)
1-5 [初识Angular] 实现页面中多项数据绑定显示的功能 (14:48)
1-6 [初识Angular] angular中表达式的概念 (17:10)
2-1 [表达式和控制器及模板的介绍] 控制器中的属性使用 (15:31)
2-2 [表达式和控制器及模板的介绍] 控制器中方法的使用 (10:42)
2-3 [表达式和控制器及模板的介绍] 视图元素中事件与方法的绑定 (11:49)
2-4 [表达式和控制器及模板的介绍] 模板的基础和使用方法 (19:33)
3-1 [过滤器功能的介绍和运用] 过滤器的定义和分类及排序使用 (15:00)
3-2 [过滤器功能的介绍和运用] 视图页面中隔行变色功能的实现 (06:02)
3-3 [过滤器功能的介绍和运用] 匹配过滤器功能的实现 (11:43)
3-4 [过滤器功能的介绍和运用] 自定义过滤器功能的实现 (13:35)
3-5 [过滤器功能的介绍和运用] 过滤器的应用——表头排序功能的实现 (13:35)
3-6 [过滤器功能的介绍和运用] 过滤器的应用——字符查找功能的实现 (07:51)
4-1 [依赖注入的介绍与使用] 依赖注入的定义和功能原理 (21:54)
4-2 [依赖注入的介绍与使用] 自定义服务的方法和注入过程 (19:40)
4-3 [依赖注入的介绍与使用] 依赖注入的方式——推断式注入 (08:25)
4-4 [依赖注入的介绍与使用] 依赖注入的方式——标记式注入 (07:44)
4-5 [依赖注入的介绍与使用] 依赖注入的方式——行内式注入 (05:57)
5-1 [MVC模式的介绍与应用] MVC模式简单与隐式模型数据定义 (22:04)
5-2 [MVC模式的介绍与应用] 控制器中定义和使用可传参数的方法 (19:08)
5-3 [MVC模式的介绍与应用] 控制器中属性和方法的继承 (17:23)
5-4 [MVC模式的介绍与应用] View组件中模板的切换 (20:00)
5-5 [MVC模式的介绍与应用] 页面切换参数的传递 (19:27)
6-1 [服务的介绍与使用] 服务的基础知识与创建方法 (24:56)
6-2 [服务的介绍与使用] 使用factory方法自定义服务 (15:48)
6-3 [服务的介绍与使用] 使用service方法自定义服务 (18:33)
6-4 [服务的介绍与使用] 使用constant和value方法自定义服务 (20:45)
6-5 [服务的介绍与使用] 服务的装饰器 (19:01)
6-6 [服务的介绍与使用] 服务的多例性 (12:22)
7-1 [视图层与服务端的交互] 服务端交互的基础和$http快捷方法以GET方式请求服务端API (26:07)
7-2 [视图层与服务端的交互] $http快捷方法以POST方式请求服务端API (11:01)
7-3 [视图层与服务端的交互] 使用$http对象的方法请求服务端API (13:57)
7-4 [视图层与服务端的交互] 缓存的基础概念和使用$cacheFactory服务创建缓存对象 (21:11)
7-5 [视图层与服务端的交互] $http服务中的缓存 (21:18)
7-6 [视图层与服务端的交互] 自定义$http服务中的缓存 (10:29)
8-1 [angular中的指令] 指令的基础概念和定义的方法 (19:08)
8-2 [angular中的指令] 指令对象中的replace和templateUrl属性 (17:08)
8-3 [angular中的指令] 指令对象中的transclude属性 (11:52)
8-4 [angular中的指令] 指令对象中的link属性 (11:40)
8-5 [angular中的指令] 指令对象中的compile属性 (11:53)
9-1 [angular中的$location对象] 调用$location对象的只读方法 (13:12)
9-2 [angular中的$location对象] 调用$location对象的读写类方法 (14:35)
9-3 [angular中的$location对象] 捕捉$locationChangeStart事件 (14:50)
9-4 [angular中的$location对象] 捕捉$locationChangeSuccess事件 (11:29)
9-5 [angular中的$location对象] 路由对象方法的双向绑定 (09:10)
10-1 [angular中需要注意的事项] 解决setTimeout改变属性的无效 (13:35)
10-2 [angular中需要注意的事项] 注意ng-repeat 中过滤后的索引号 (10:14)
10-3 [angular中需要注意的事项] 解决点击按钮事件中的冒泡现象 (13:06)
10-4 [angular中需要注意的事项] 释放多余的$watch监测函数 (11:06)
10-5 [angular中需要注意的事项] 解决ng-if中ng-model值无效的问题 (08:04)
11-1 [经典案例讲解] 案例一:tab无JS代码切换——需求分析与效果展示 (11:03)
11-2 [经典案例讲解] 案例一:tab无JS代码切换——实现代码与源码分析 (19:32)
11-3 [经典案例讲解] 案例二:list与grid无JS切换——需求分析与效果展示 (03:19)
11-4 [经典案例讲解] 案例二:list与grid无JS切换——实现代码与源码分析 (15:20)
11-5 [经典案例讲解] 案例三:search查询页面的实现——需求分析与效果展示 (03:01)
11-6 [经典案例讲解] 案例三:search查询页面的实现——实现代码与源码分析 (19:49)
11-7 [经典案例讲解] 案例四:todolist任务管理页面的实现——需求分析与效果展示 (03:14)
11-8 [经典案例讲解] 案例四:todolist任务管理页面的实现——实现代码与源码分析 (11:31)
12-1 [数据库与页面交互应用] 页面与数据库API交互过程 (19:13)
12-2 [数据库与页面交互应用] 调用数据库API展示新闻页数据 (10:23)
12-3 [数据库与页面交互应用] 调用数据库API删除指定ID号的新闻数据 (04:51)
12-4 [数据库与页面交互应用] 调用数据库API增加新闻数据 (08:35)