在完成AngularJS环境配置后，入门开发的核心是掌握“数据驱动视图”的开发思想——通过模块、控制器、指令三大核心组件，实现页面与数据的联动。本文不纠结复杂理论，而是以“概念讲解+实战案例”的形式，带你快速上手AngularJS开发，最终能独立完成简单的交互功能（如表单处理、列表渲染）。
一、先搞懂3个核心概念：AngularJS的“骨架”
AngularJS的开发逻辑围绕“模块管理应用、控制器处理数据、指令连接视图”展开，这三个概念是所有开发的基础，必须先理解再动手。
1. 模块（Module）：应用的“容器”
模块是AngularJS应用的最小单位，用于封装控制器、服务、过滤器等功能，避免全局变量污染。每个应用至少需要一个“根模块”，通过ng-app指令挂载到页面上。
核心语法：创建模块
// 语法：angular.module('模块名', [依赖的其他模块])
// 示例：创建名为"myApp"的根模块，无依赖（依赖数组为空）
const myApp = angular.module('myApp', []);
关键说明：
模块名必须与页面中ng-app="模块名"的属性值一致，否则应用无法生效；
依赖数组用于引入其他模块（如angular-route路由模块），入门阶段可先留空。
2. 控制器（Controller）：数据的“处理器”
控制器是连接“数据”与“视图”的桥梁，负责定义页面所需的数据（$scope）和交互逻辑（如点击事件、数据计算）。通过ng-controller指令将控制器与页面元素绑定，实现数据渲染。
核心语法：创建控制器
// 基于已创建的"myApp"模块，添加控制器
myApp.controller('myCtrl', function($scope) {
// 1. 定义页面所需数据（挂载到$scope上，视图可直接访问）
$scope.username = 'AngularJS初学者';
$scope.age = 20;
$scope.hobbies = ['编程', '阅读', '运动'];
// 2. 定义交互逻辑（视图可通过指令触发）
$scope.increaseAge = function() {
$scope.age += 1; // 修改数据后，视图会自动更新（双向绑定）
};
// 3. 定义数据计算逻辑
$scope.getHobbyText = function() {
return $scope.hobbies.join('、'); // 将数组转为字符串，供视图显示
};
});
关键说明：
$scope是控制器与视图的“通信媒介”：控制器中挂载到$scope的数据/方法，视图可直接使用；视图中修改$scope数据（如输入框），控制器也能实时获取；
控制器名需与页面中ng-controller="控制器名"的属性值一致，绑定后该元素及其子元素可访问控制器中的数据。
3. 指令（Directive）：视图的“增强工具”
指令是AngularJS的特色功能，本质是“自定义HTML属性或标签”，用于实现“数据绑定、事件绑定、循环渲染”等交互。入门阶段需掌握以下5个高频指令：
指令作用示例
ng-app挂载根模块，标记AngularJS应用范围<body ng-app="myApp">
ng-controller绑定控制器，让视图可访问控制器数据<div ng-controller="myCtrl">
ng-model双向数据绑定（输入框/下拉框等表单元素）<input type="text" ng-model="username">
ng-click绑定点击事件，触发控制器中的方法<button ng-click="increaseAge()">年龄+1</button>
ng-repeat循环渲染列表（遍历数组/对象）<li ng-repeat="hobby in hobbies">{{ hobby }}</li>
二、实战案例1：开发一个“个人信息卡片”
结合上述核心概念，先开发一个简单的“个人信息卡片”——实现“数据渲染、点击修改数据、循环显示列表”功能，理解AngularJS的开发流程。
1. 完整代码（HTML+JS）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS实战 - 个人信息卡片</title>
<!-- 引入AngularJS（已安装，直接使用CDN或本地文件） -->
<script src="https://apps.bdimg.com/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
.card {
width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.card h3 {
margin-top: 0;
color: #333;
}
.info-item {
margin: 10px 0;
line-height: 1.5;
}
.btn {
padding: 8px 16px;
border: none;
background: #4285f4;
color: white;
border-radius: 4px;
cursor: pointer;
}
.hobby-list {
padding-left: 20px;
margin: 5px 0;
}
</style>
</head>
<!-- 1. 挂载根模块myApp -->
<body ng-app="myApp">
<!-- 2. 绑定控制器myCtrl，该div内可访问控制器数据 -->
<div class="card" ng-controller="myCtrl">
<h3>个人信息卡片</h3>
<!-- 3. 渲染控制器中的数据（{{ 数据名 }} 是插值表达式） -->
<div class="info-item">
姓名：{{ username }}
<!-- 4. 双向绑定：输入框修改后，username自动更新 -->
<input type="text" ng-model="username" style="margin-left: 10px; padding: 5px;">
</div>
<div class="info-item">
年龄：{{ age }}
<!-- 5. 绑定点击事件：触发控制器中的increaseAge方法 -->
zhiq.zhaopin.com/moment/86387543
zhiq.zhaopin.com/moment/86387545
zhiq.zhaopin.com/moment/86387547
zhiq.zhaopin.com/moment/86390891
zhiq.zhaopin.com/moment/86390949
zhiq.zhaopin.com/moment/86390989
zhiq.zhaopin.com/moment/86391003
zhiq.zhaopin.com/moment/86391045
zhiq.zhaopin.com/moment/86391075
zhiq.zhaopin.com/moment/86391146
zhiq.zhaopin.com/moment/86391165
zhiq.zhaopin.com/moment/86391176
zhiq.zhaopin.com/moment/86391214
zhiq.zhaopin.com/moment/86391226
zhiq.zhaopin.com/moment/86391260
zhiq.zhaopin.com/moment/86391274
zhiq.zhaopin.com/moment/86391318
zhiq.zhaopin.com/moment/86391426
zhiq.zhaopin.com/moment/86391570
zhiq.zhaopin.com/moment/86391588
<button class="btn" ng-click="increaseAge()" style="margin-left: 10px;">年龄+1</button>
</div>
<div class="info-item">
爱好：
<!-- 6. 循环渲染：遍历hobbies数组，生成li列表 -->
<ul class="hobby-list">
<li ng-repeat="hobby in hobbies">
{{ $index + 1 }}. {{ hobby }} <!-- $index是ng-repeat的内置变量，代表当前索引（从0开始） -->
</li>
</ul>
</div>
<div class="info-item">
爱好汇总：{{ getHobbyText() }} <!-- 调用控制器中的方法，渲染返回值 -->
</div>
</div>
<script>
// 1. 创建根模块myApp
const myApp = angular.module('myApp', []);
// 2. 给模块添加控制器myCtrl
myApp.controller('myCtrl', function($scope) {
// 定义初始数据
$scope.username = '张三';
$scope.age = 22;
$scope.hobbies = ['打篮球', '写代码', '看电影'];
// 定义点击事件方法
$scope.increaseAge = function() {
$scope.age += 1;
};
// 定义数据处理方法
$scope.getHobbyText = function() {
return $scope.hobbies.join('、');
};
});
</script>
</body>
</html>
2. 效果与核心逻辑
打开页面后，会自动渲染“姓名、年龄、爱好”数据；
修改姓名输入框内容，页面中“姓名：XXX”会实时同步（ng-model双向绑定）；
点击“年龄+1”按钮，年龄数值会自动加1并更新到页面（ng-click触发方法，数据修改后视图自动更新）；
爱好列表通过ng-repeat循环生成，无需手动拼接HTML（$index获取当前循环索引）。
三、实战案例2：开发“待办事项（Todo）列表”
掌握基础数据渲染后，再开发一个更贴近实际需求的“待办事项列表”——实现“添加待办、标记完成、删除待办、统计数量”功能，综合运用AngularJS核心能力。
1. 需求拆解
输入框输入待办内容，点击“添加”按钮新增待办项；
点击待办项，标记为“已完成”（样式变灰+删除线）；
每个待办项右侧有“删除”按钮，点击可删除该待办；
实时统计“未完成待办数量”和“总待办数量”。
2. 完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS实战 - 待办事项列表</title>
<script src="https://apps.bdimg.com/libs/angular.js/1.8.2/angular.min.js"></script>
<style>
.todo-container {
width: 500px;
margin: 50px auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
}
.todo-input {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.todo-input input {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 8px 0;
background: #f9fafb;
border-radius: 4px;
}
.todo-item.completed {
background: #f3f4f6;
color: #9ca3af;
text-decoration: line-through;
}
.delete-btn {
border: none;
background: #ef4444;
color: white;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.todo-count {
margin-top: 20px;
text-align: right;
color: #6b7280;
}
</style>
</head>
<body ng-app="todoApp">
<div class="todo-container" ng-controller="todoCtrl">
<h3>待办事项列表</h3>
<!-- 添加待办：输入框绑定newTodo，点击按钮触发addTodo -->
<div class="todo-input">
<input type="text"
ng-model="newTodo"
placeholder="请输入待办事项..."
ng-keyup="($event.keyCode === 13) && addTodo()"> <!-- 按回车键也能添加 -->
<button class="btn" ng-click="addTodo()">添加</button>
</div>
<!-- 待办列表：循环渲染todos数组，点击项触发toggleComplete，点击删除触发deleteTodo -->
<div class="todo-list">
<div class="todo-item"
ng-repeat="todo in todos"
ng-class="{ completed: todo.isCompleted }" <!-- 动态添加completed类（已完成时） -->
ng-click="toggleComplete(todo)">
<span>{{ todo.content }}</span>
<button class="delete-btn" ng-click="deleteTodo($index); $event.stopPropagation()">删除</button>
</div>
<!-- 无待办时显示提示 -->
<div ng-if="todos.length === 0" style="text-align: center; color: #9ca3af; padding: 20px;">
暂无待办事项，点击添加吧！
</div>
</div>
<!-- 统计待办数量：过滤未完成的待办（使用AngularJS内置过滤器filter） -->
<div class="todo-count">
总数量：{{ todos.length }} | 未完成：{{ todos | filter: { isCompleted: false } | length }}
</div>
</div>
<script>
// 1. 创建模块todoApp
const todoApp = angular.module('todoApp', []);
// 2. 创建控制器todoCtrl
todoApp.controller('todoCtrl', function($scope) {
// 初始待办列表（每个待办项包含content内容和isCompleted完成状态）
$scope.todos = [
{ content: '学习AngularJS核心概念', isCompleted: false },
{ content: '开发待办事项列表', isCompleted: true }
];
$scope.newTodo = ''; // 绑定输入框的待办内容
// 1. 添加待办方法
$scope.addTodo = function() {
// 校验：输入框不能为空
if (!$scope.newTodo.trim()) return;
// 新增待办项到数组
$scope.todos.push({
content: $scope.newTodo.trim(),
isCompleted: false
});
// 清空输入框
$scope.newTodo = '';
};
// 2. 标记待办完成/未完成方法
$scope.toggleComplete = function(todo) {
todo.isCompleted = !todo.isCompleted; // 切换完成状态
};
// 3. 删除待办方法（通过$index获取当前待办的索引）
$scope.deleteTodo = function(index) {
$scope.todos.splice(index, 1); // 从数组中删除该待办
};
});
</script>
</body>
</html>
3. 核心知识点拓展
动态样式（ng-class）：通过ng-class="{ 类名: 条件 }"实现“条件满足时添加类”，如待办完成时添加completed类；
**事件冒泡阻止（$$event.stopPropagation()）**：删除按钮的点击事件会触发父元素的`ng-click`，需用$$event.stopPropagation()`阻止冒泡；
内置过滤器（filter）：todos | filter: { isCompleted: false }表示“过滤出isCompleted为false的待办项”，再用| length统计数量；
条件渲染（ng-if）：ng-if="todos.length === 0"表示“当待办数组为空时，显示提示内容”（ng-if会移除/添加DOM元素，不同于ng-show的隐藏）。
四、入门开发的3个关键技巧
优先用$scope管理数据：所有需要在视图中显示或交互的数据，都挂载到$scope上，避免使用全局变量；
善用内置指令和过滤器：AngularJS提供大量内置指令（如ng-if/ng-show/ng-hide）和过滤器（如filter/orderBy），减少手动JS操作；
调试用$scope打印：遇到数据不更新时，可在控制器中用console.log($scope.数据名)查看数据是否正确，或在浏览器控制台输入angular.element(document.body).scope()获取当前$scope对象。
五、下一步学习方向
完成入门开发后，可逐步学习以下内容，提升AngularJS能力：
服务（Service）：用于封装复用逻辑（如Ajax请求、数据缓存），避免控制器代码冗余；
过滤器（Filter）：自定义过滤器，实现特殊数据处理（如日期格式化、金额保留两位小数）；
路由（angular-route）：实现多页面切换（如“待办列表页”和“待办详情页”）；
表单验证：使用AngularJS内置的表单验证指令（如`ng-required
