AngularJS入门教程该怎么学？-杰瑞科技汇

AngularJS 入门教程

什么是 AngularJS？
为什么学习 AngularJS？
环境准备：你的第一个 "Hello, AngularJS!"
核心概念详解
- 1 Module（模块）
- 2 Controller（控制器）
- 3 $scope（作用域）
- 4 Directive（指令）
- 5 Expression（表达式）
- 6 Data Binding（数据绑定）
实战：构建一个简单的任务清单
- 1 项目目标
- 2 步骤一：创建 HTML 框架和模块
- 3 步骤二：创建控制器和 $scope
- 4 步骤三：显示任务列表
- 5 步骤四：添加新任务
- 6 步骤五：标记任务完成
总结与进阶

什么是 AngularJS？

AngularJS 是一个由 Google 维护的开源 JavaScript 前端框架，它通过扩展 HTML 的功能，让你能够用声明式的方式构建动态、单页面应用。

（图片来源网络，侵删）

AngularJS 帮助你：

组织代码：通过模块和控制器，让代码结构清晰，易于维护。
双向数据绑定：自动同步 JavaScript 数据和 HTML 视图，无需手动操作 DOM。
数据驱动：视图由数据驱动，数据变化，视图自动更新。
依赖注入：轻松管理组件之间的依赖关系，提高代码的可测试性。

注意：AngularJS 通常指的是 AngularJS 1.x 版本，Google 现在主推的是完全重写的 Angular (2+)，两者在架构和 API 上有很大差异，本教程专门针对 AngularJS 1.x。

为什么学习 AngularJS？

虽然 AngularJS 已不再是主流，但它仍然是学习前端框架演进史的重要一环，并且许多遗留项目仍在使用它，学习它能帮助你：

理解 MVVM/MVC 模式：AngularJS 是学习数据绑定和组件化思想的绝佳起点。
维护旧项目：如果你需要维护一个基于 AngularJS 的项目，这是必备技能。
打下基础：AngularJS 的很多概念（如指令、依赖注入）在后续的 Angular 中得到了继承和发展。

环境准备：你的第一个 "Hello, AngularJS!"

准备工作非常简单,只需要一个文本编辑器（如 VS Code, Sublime Text）和一个浏览器。

（图片来源网络，侵删）

步骤 1：创建 HTML 文件

创建一个名为 index.html 的文件，并写入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">My First AngularJS App</title>
</head>
<body>
</body>
</html>

步骤 2：引入 AngularJS 库

从官网或 CDN 引入 AngularJS 的核心库，我们推荐使用 CDN，因为它最方便。

在 <head> 标签内添加：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

步骤 3：创建 AngularJS 应用

AngularJS 应用需要一个根元素，通常我们使用 ng-app 指令来标记它，这个指令告诉 AngularJS：“从这里开始，你负责管理这块区域”。

在 <body> 标签上添加 ng-app：

<body ng-app="myApp">

步骤 4：创建控制器和绑定数据

控制器是 JavaScript 函数，用来控制 AngularJS 应用。

在 <body> 标签内添加一个 <div>，并使用 ng-controller 指令指定控制器。
在这个 <div> 内部，使用 (花括号) 来显示控制器中的数据。

<div ng-controller="mainController">
    <h1>Hello, {{ name }}!</h1>
    <p>欢迎来到 AngularJS 的世界！</p>
</div>

步骤 5：编写控制器代码

在 <body> 标签的末尾，</div> 之后，</body> 之前，添加 <script> 标签来编写我们的控制器。

<script>
    // 1. 创建一个名为 'myApp' 的模块，它对应 HTML 中的 ng-app="myApp"
    var app = angular.module('myApp', []);
    // 2. 创建一个名为 'mainController' 的控制器，它对应 HTML 中的 ng-controller="mainController"
    app.controller('mainController', function($scope) {
        // 3. 在 $scope 上添加一个名为 'name' 的属性
        $scope.name = 'AngularJS';
    });
</script>

完整代码 (index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">My First AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="mainController">
        <h1>Hello, {{ name }}!</h1>
        <p>欢迎来到 AngularJS 的世界！</p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('mainController', function($scope) {
            $scope.name = 'AngularJS';
        });
    </script>
</body>
</html>

运行：用浏览器打开 index.html 文件，你应该能看到 "Hello, AngularJS!" 的标题。

恭喜！你已经成功运行了你的第一个 AngularJS 应用。

核心概念详解

让我们来分解上面例子中的核心概念。

1 Module（模块）

是什么：模块是 AngularJS 应用的容器，它用来组织你的应用，包括控制器、服务、指令等。
为什么用：防止全局命名空间污染，让代码结构化，便于复用和测试。

如何用：

// 创建一个名为 'myApp' 的新模块，没有依赖项
var app = angular.module('myApp', []);

2 Controller（控制器）

是什么：控制器是 JavaScript 函数，用来管理应用的数据和逻辑，它负责初始化 $scope 对象。
为什么用：将数据与视图分离，视图只负责展示，控制器只负责提供和管理数据。

如何用：

app.controller('mainController', function($scope) {
    // 控制器逻辑写在这里
});

3 `$scope`（作用域）

是什么：这是 AngularJS 中最重要的概念之一。$scope 是一个 JavaScript 对象，它连接了控制器和视图。
- 在控制器中：你可以向 $scope 添加属性和方法（如 $scope.name = '...'）。
- 在视图中：你可以直接访问 $scope 上的属性和方法（如 {{ name }}）。
为什么用：它是数据绑定的桥梁，控制器修改 $scope，视图就能自动看到变化。
如何用：通过依赖注入的方式将 $scope 对象传入控制器函数。

4 Directive（指令）

是什么：指令是 AngularJS 的核心特性，它是在 HTML 中标记的特殊属性（以 ng- 开头），用来扩展 HTML 的功能。
常用指令：
- ng-app：声明一个 AngularJS 应用。
- ng-controller：指定一个控制器。
- ng-model：将 HTML 元素（如输入框）的值绑定到 $scope 的一个属性上。这是实现双向绑定的关键！
- ng-repeat：遍历一个数组或对象，为每个元素生成一份 HTML 模板。
- ng-show / ng-hide：根据表达式的值显示或隐藏元素。
- ng-click：为元素绑定点击事件。

5 Expression（表达式）

是什么：写在中的 JavaScript 代码片段，它们可以访问 $scope 中的变量和函数。
例子：
- {{ 1 + 2 }} 会显示 3。
- {{ user.name }} 会显示 $scope.user.name 的值。

6 Data Binding（数据绑定）

AngularJS 的核心魅力在于其数据绑定机制，主要分为两种：

双向数据绑定
- 场景：用户在输入框中输入内容，页面上其他地方显示的内容实时更新。
- 实现：ng-model 指令。
- 例子：
```
<input type="text" ng-model="yourName">
<h1>Hello, {{ yourName }}!</h1>
```
  当你在输入框中输入 "张三"，<h1> 标签会立刻变成 "Hello, 张三!"。
单向数据绑定
- 场景：控制器中的数据变化，视图自动更新。
- 实现：表达式或 ng-bind 指令。
- 例子：
```
$scope.message = "你好，世界！";
```
```
<p>{{ message }}</p>

<p ng-bind="message"></p>
```

实战：构建一个简单的任务清单

我们运用上面学到的所有知识,来做一个功能完整的任务清单。

1 项目目标

显示一个任务列表。
可以通过输入框添加新任务。
可以标记任务为“已完成”。
可以删除任务。

2 步骤一：创建 HTML 框架和模块

创建 todo.html 文件，引入 AngularJS 并设置基本结构。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">AngularJS Todo List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        ul { list-style: none; padding: 0; }
        li { padding: 8px; border-bottom: 1px solid #ccc; }
        .done { text-decoration: line-through; color: #aaa; }
        input[type="text"] { padding: 5px; width: 200px; }
        button { padding: 5px 10px; }
    </style>
</head>
<body ng-app="todoApp">
    <h1>我的任务清单</h1>
    <div ng-controller="todoController">
    </div>
    <script>
        var app = angular.module('todoApp', []);
        // 控制器代码将写在这里
    </script>
</body>
</html>

3 步骤二：创建控制器和 `$scope`

在 <script> 标签中，添加控制器代码，并初始化任务列表。

app.controller('todoController', function($scope) {
    // 初始化任务列表
    $scope.tasks = [
        { name: '学习 AngularJS', done: false },
        { name: '写代码', done: true }
    ];
});

4 步骤三：显示任务列表

在 ng-controller 的 <div> 内部，使用 ng-repeat 指令来遍历 $scope.tasks。

<div ng-controller="todoController">
    <h2>任务列表</h2>
    <ul>
        <li ng-repeat="task in tasks">
            <span ng-class="{ 'done': task.done }">{{ task.name }}</span>
        </li>
    </ul>
</div>

ng-repeat="task in tasks"：遍历 $scope.tasks 数组，每次循环将当前元素赋值给 task 变量。
ng-class="{ 'done': task.done }"：这是一个动态绑定类名的技巧。task.done 为 true，则给 <span> 元素添加 done 类。

你应该能看到页面显示了两个任务,并且第二个任务有删除线。

5 步骤四：添加新任务

我们需要一个输入框和一个按钮,输入框的值用 ng-model 绑定，按钮的点击事件用 ng-click 绑定。

<div ng-controller="todoController">
    <h2>添加新任务</h2>
    <input type="text" ng-model="newTaskName">
    <button ng-click="addTask()">添加</button>
    <h2>任务列表</h2>
    <ul>
        <li ng-repeat="task in tasks">
            <span ng-class="{ 'done': task.done }">{{ task.name }}</span>
        </li>
    </ul>
</div>

然后在控制器中添加 addTask 方法：

app.controller('todoController', function($scope) {
    $scope.tasks = [
        { name: '学习 AngularJS', done: false },
        { name: '写代码', done: true }
    ];
    $scope.newTaskName = ''; // 初始化新任务输入框的值
    $scope.addTask = function() {
        if ($scope.newTaskName) { // 确保输入不为空
            $scope.tasks.push({
                name: $scope.newTaskName,
                done: false
            });
            $scope.newTaskName = ''; // 添加后清空输入框
        }
    };
});

你可以在输入框中输入任务名,点击“添加”按钮，新任务就会出现在列表里。

6 步骤五：标记任务完成和删除任务

为了完成功能,我们给每个任务项添加两个按钮。

<li ng-repeat="task in tasks">
    <input type="checkbox" ng-model="task.done">
    <span ng-class="{ 'done': task.done }">{{ task.name }}</span>
    <button ng-click="removeTask($index)">删除</button>
</li>

ng-model="task.done"：将复选框的选中状态与 task.done 属性绑定，这就是双向绑定的威力！勾选或取消勾选，task.done 的值会自动改变，done 类也会随之添加或移除。
ng-click="removeTask($index)"：点击删除按钮时，调用 removeTask 方法，并传入当前任务的索引 $index（ng-repeat 提供的）。

在控制器中添加 removeTask 方法：

$scope.removeTask = function(index) {
    $scope.tasks.splice(index, 1); // 从数组中移除指定索引的元素
};

todo.html 完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">AngularJS Todo List</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; }
        h1, h2 { color: #333; }
        ul { list-style: none; padding: 0; }
        li { padding: 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; }
        li input[type="checkbox"] { margin-right: 10px; }
        .done { text-decoration: line-through; color: #aaa; }
        .todo-controls { margin-bottom: 20px; }
        .todo-controls input { padding: 8px; width: 250px; }
        .todo-controls button { padding: 8px 15px; cursor: pointer; }
        li button { margin-left: auto; background: #ff4444; color: white; border: none; padding: 5px 10px; cursor: pointer; }
    </style>
</head>
<body ng-app="todoApp">
    <h1>我的任务清单</h1>
    <div ng-controller="todoController" class="todo-controls">
        <h2>添加新任务</h2>
        <input type="text" ng-model="newTaskName">
        <button ng-click="addTask()">添加</button>
    </div>
    <div ng-controller="todoController">
        <h2>任务列表</h2>
        <ul>
            <li ng-repeat="task in tasks">
                <input type="checkbox" ng-model="task.done">
                <span ng-class="{ 'done': task.done }">{{ task.name }}</span>
                <button ng-click="removeTask($index)">删除</button>
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module('todoApp', []);
        app.controller('todoController', function($scope) {
            $scope.tasks = [
                { name: '学习 AngularJS', done: false },
                { name: '写代码', done: true }
            ];
            $scope.newTaskName = '';
            $scope.addTask = function() {
                if ($scope.newTaskName.trim()) { // 使用 trim() 防止空格
                    $scope.tasks.push({
                        name: $scope.newTaskName,
                        done: false
                    });
                    $scope.newTaskName = '';
                }
            };
            $scope.removeTask = function(index) {
                $scope.tasks.splice(index, 1);
            };
        });
    </script>
</body>
</html>

总结与进阶

你已经掌握了 AngularJS 的核心概念，并成功构建了一个功能完整的应用，回顾一下我们学到的关键点：

Module：应用的容器。
Controller：逻辑和数据的管理者。
$scope：连接控制器和视图的桥梁。
Directive：扩展 HTML 的利器（ng-app, ng-controller, ng-model, ng-repeat 等）。
Data Binding：让开发变得简单的核心特性。

进阶学习方向

当你掌握了这些基础后,可以继续学习以下内容来构建更复杂的应用：

服务：$http 服务用于从服务器获取数据，$filter 服务用于格式化数据，你也可以创建自己的服务来复用业务逻辑。
路由：ngRoute 或 ui-router 模块可以实现单页应用的多视图切换（类似多页面的效果）。
表单验证：AngularJS 提供了强大的表单验证功能，如 required, ng-minlength, ng-pattern 等。
指令深入：学习如何创建自定义指令，封装可复用的 UI 组件。

希望这份教程能帮助你顺利入门 AngularJS！祝你学习愉快！

AngularJS入门教程该怎么学？