AngularJS 菜鸟入门教程：从零开始构建你的第一个应用
你好,未来的 AngularJS 大神！这份教程将带你一步步了解 AngularJS 的核心概念，并亲手搭建一个简单的待办事项应用。
什么是 AngularJS？
想象一下你在盖房子：
- 传统方式（原生 JavaScript/jQuery）：你需要一块砖一块砖地砌（
document.getElementById），一根钢筋一根钢筋地绑（addEventListener），你清楚地知道每一块砖的位置，但房子一复杂，你就会迷失在各种细节中，代码会变得一团糟。 - AngularJS 方式：你先拿到一份建筑蓝图（AngularJS 的指令和数据绑定），然后告诉工人：“我要一个客厅，它的大小由
livingRoomSize这个变量决定”，工人会自动根据蓝图把客厅盖好，如果以后你想改变客厅大小，只需要改一下livingRoomSize的值，工人会自动帮你把墙重新砌好。
AngularJS 是一个由 Google 维护的前端 JavaScript 框架，它的核心思想是通过 数据绑定 和 依赖注入 来扩展 HTML 的功能，让你可以用更声明式、更结构化的方式来构建动态的 Web 应用。
AngularJS 让你从 “操作 DOM” 的繁琐工作中解放出来，专注于 “管理数据”。
为什么学习 AngularJS？（虽然它有点“老”）
你可能会问：“现在不是有 Angular、React、Vue 更新的框架吗？为什么还要学 AngularJS？”
- 理解历史，看懂现在：AngularJS 是现代前端框架的奠基者之一，它的很多核心思想（如数据绑定、依赖注入、指令）在 Angular 中得到了继承和发扬，学好 AngularJS，能让你更容易理解后续框架的设计哲学。
- 维护旧项目：在现实世界中，你可能还是会遇到一些基于 AngularJS 开发的老项目，学会它能让你有饭吃。
- 概念清晰：AngularJS 的概念相对纯粹，没有像现代 Angular 那样引入复杂的模块化、装饰器等概念，非常适合初学者理解前端框架的核心思想。
准备工作
在开始之前,你只需要两样东西：
- 一个文本编辑器：VS Code、Sublime Text、HBuilderX 等，随便哪个都行。
- 一个现代浏览器：Chrome、Firefox、Edge，用来查看你的网页效果。
核心概念详解（菜鸟友好版）
在写代码之前,我们先来认识一下 AngularJS 的几个“家庭成员”，它们就像一个乐队，各自有各自的乐器，但只有在一起演奏时，才能创造出美妙的音乐。
模块
- 是什么？：模块是你的应用程序的容器，它就像一个盒子，你把所有的控制器、服务、指令等“零件”都放进去。
- 为什么？：避免全局变量污染，让代码更有组织性。
- 怎么用？：用
angular.module()来创建或获取一个模块。
// 'myTodoApp' 是模块的名称
// [] 表示这个模块没有依赖其他模块
var app = angular.module('myTodoApp', []);
控制器
- 是什么？：控制器是模块的“大脑”，它负责初始化页面的数据（
$scope）和处理用户交互（比如点击按钮）。 - 为什么？：把数据和逻辑从 HTML 视图中分离出来。
- 怎么用？：用
app.controller()来定义一个控制器。
// 'mainController' 是控制器的名字
// $scope 是 AngularJS 的一个“神奇”对象，是连接控制器和视图的桥梁
app.controller('mainController', function($scope) {
// 在这里定义视图（HTML）可以访问到的数据
$scope.message = "Hello, AngularJS World!";
// 在这里定义视图可以调用的函数
$scope.sayHello = function() {
$scope.message = "You clicked the button!";
};
});
作用域
- 是什么？：这是最关键也最容易被初学者混淆的概念，你可以把它理解为一个“数据域”或“家庭共享区”。
- 每个
ng-controller都会创建一个自己的$scope。 - 控制器里定义的所有变量和函数,都会被“存”在这个
$scope里。 - HTML 视图只能访问到它所属的控制器对应的
$scope里的数据。
- 每个
- 为什么？：它实现了数据隔离，并建立了 “MVC”（Model-View-Controller）架构中的 “V” (View) 和 “C” (Controller) 的连接。
数据绑定
这是 AngularJS 最酷的功能！它有两种形式：
-
插值表达式
- 作用：在 HTML 中显示 JavaScript 变量的值。
- 示例：
<h1>{{ message }}</h1>会显示控制器中$scope.message的值。
-
指令
ng-model- 作用：将 HTML 元素的值（比如输入框）和
$scope中的变量进行双向绑定。 - 双向意味着：你修改输入框的值，
$scope里的变量会自动更新；反之，$scope里的变量被代码修改，输入框的值也会自动更新。 - 示例：
<input type="text" ng-model="userName">，$scope.userName就会实时等于输入框里的内容。
- 作用：将 HTML 元素的值（比如输入框）和
指令
- 是什么？：指令是 AngularJS 对 HTML 的扩展，它们都是以
ng-开头的特殊属性。 - 为什么？：让 HTML 自身拥有了“智能”和“行为”，而不是干巴巴的标签。
- 常用指令：
ng-app：告诉 AngularJS：“嘿，从这里开始，你来管理我下面的所有内容！”，它是整个应用的根指令，通常放在<html>或<body>标签上。ng-controller：指定这个 HTML 区域由哪个控制器来管理。ng-model：绑定数据到变量。ng-repeat：循环渲染一个列表，就像一个“复印机”，把括号里的 HTML 模板复制多遍。ng-click：绑定一个点击事件，当用户点击元素时，执行控制器中定义的对应函数。
动手实践：构建你的第一个 To-Do（待办）应用
理论讲完了,是时候敲代码了！我们的目标是创建一个可以添加、显示和删除待办事项的小应用。
步骤 1：创建项目文件
创建一个新文件夹,angularjs-todo，在里面创建三个文件：
index.html(我们的视图)app.js(我们的模块和控制器)style.css(简单美化一下)
步骤 2：编写 index.html
打开 index.html，输入以下代码。请仔细阅读每一行旁边的注释，它们解释了 AngularJS 指令的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">AngularJS Todo App</title>
<!-- 1. 引入 AngularJS 库 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<!-- 2. 引入我们自己的 JS 文件 -->
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 3. 告诉 AngularJS 整个页面由它管理 -->
<div ng-app="myTodoApp">
<div class="container">
<h1>我的待办事项</h1>
<!-- 4. 指定这个区域由 mainController 管理 -->
<div ng-controller="mainController">
<!-- 5. 输入框，用 ng-model 将输入的值绑定到 newItem 变量 -->
<input type="text" ng-model="newItem" placeholder="输入新任务...">
<!-- 6. 按钮，点击时调用 addItem 函数 -->
<button ng-click="addItem()">添加</button>
<hr>
<!-- 7. ul 列表，用 ng-repeat 循环渲染 todos 数组中的每一项 -->
<!-- todo 是循环中每一项的临时变量，$index 是它的索引 -->
<ul>
<li ng-repeat="todo in todos">
{{ todo.text }}
<button ng-click="removeItem($index)">删除</button>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
步骤 3：编写 app.js
让我们为这个应用注入灵魂,打开 app.js，输入代码：
// 1. 创建并命名我们的应用模块
var app = angular.module('myTodoApp', []);
// 2. 创建控制器 mainController
app.controller('mainController', function($scope) {
// 初始化一个空的待办事项数组
$scope.todos = [];
// 初始化一个空字符串，用于绑定输入框
$scope.newItem = '';
// 添加待办事项的函数
$scope.addItem = function() {
// 检查输入是否为空
if ($scope.newItem !== '') {
// 将新任务添加到 todos 数组中
// { text: $scope.newItem } 创建了一个对象，可以方便地扩展
$scope.todos.push({ text: $scope.newItem });
// 清空输入框，以便输入下一个任务
$scope.newItem = '';
}
};
// 删除待办事项的函数
// $index 是 ng-repeat 提供的，表示当前循环项的索引
$scope.removeItem = function(index) {
// 使用 splice 方法从数组中移除指定索引的元素
$scope.todos.splice(index, 1);
};
});
步骤 4：简单美化 style.css
打开 style.css，添加一些基本样式，让我们的应用看起来更舒服。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
width: 25%;
padding: 10px;
border: none;
background-color: #5cb85c;
color: white;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
li button {
width: 80px;
background-color: #d9534f;
}
li button:hover {
background-color: #c9302c;
}
步骤 5：运行你的应用！
直接用浏览器打开 index.html 文件，恭喜你，你已经成功创建了你的第一个 AngularJS 应用！
你可以尝试：
- 在输入框里输入文字,然后点击“添加”。
- 观察列表是否实时更新。
- 点击列表旁边的“删除”按钮，看看项目是否被移除。
这就是 AngularJS 的数据绑定和指令的威力！ 你几乎没有写任何操作 DOM 的代码，只是声明了数据和逻辑，AngularJS 就帮你完成了所有渲染。
总结与下一步
恭喜你,已经迈出了 AngularJS 学习的第一步！你已经掌握了：
- 如何搭建 AngularJS 项目。
- 模块、控制器、作用域 的基本概念。
- 如何使用 指令 (
ng-app,ng-controller,ng-model,ng-click,ng-repeat)。 - 如何实现 数据绑定 和 列表渲染。
下一步可以学习什么？
- 过滤器：学习如何格式化显示数据，
{{ 12345 | currency }}显示为$12,345。 - 服务：学习如何创建可重用的业务逻辑模块，比如与服务器通信。
- 路由：学习如何创建多页面应用，实现页面切换而无需刷新。
AngularJS 是一个强大而优雅的框架，虽然它不再是主流，但它所蕴含的思想是前端开发的宝贵财富，继续探索吧！
