补 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)





