AngularJS菜鸟教程如何快速入门？-杰瑞科技汇

AngularJS 菜鸟教程：从零开始的前端框架

第一部分：什么是 AngularJS？

想象一下，你正在用纯 HTML 和 JavaScript 开发一个网页，当用户点击一个按钮，你需要手动找到页面上对应的元素，然后修改它的内容或样式，当数据变多时，你的 JavaScript 代码会变得非常混乱，需要频繁操作 DOM（文档对象模型），这被称为“命令式编程”。

AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，它的核心思想是“声明式编程”，你只需要告诉 AngularJS “我想要什么”，而不需要关心 “如何实现”，它会帮你自动处理数据变化、DOM 操作等繁琐工作。

一个简单的比喻：

纯 HTML/CSS/JS：像一个手工作坊，你需要亲自切割、打磨、组装每一个零件（DOM 元素）。
AngularJS：像一个自动化工厂，你只需要下达指令（数据绑定），工厂的机器（AngularJS 引擎）就会自动完成所有组装工作。

第二部分：为什么选择 AngularJS？（核心优势）

数据绑定：这是 AngularJS 最强大的特性，你只需要在 JavaScript 中修改数据，页面上所有绑定了该数据的地方都会自动更新，反之亦然，你再也不用写 document.getElementById('...').innerHTML = ... 这样的代码了。
指令：AngularJS 扩展了 HTML 的功能，你可以创建自己的标签或属性（如 <my-directive></my-directive>）来封装可复用的 UI 组件和逻辑。
依赖注入：这是一种设计模式，让组件（如控制器）更容易测试和维护，你只需要声明你需要什么服务（如 $http 用于网络请求），AngularJS 会自动“注入”给你。
模块化：你可以将应用拆分成多个模块，每个模块负责一部分功能，使代码结构清晰、易于管理。
服务：用于封装可复用的业务逻辑，比如与服务器通信、数据缓存、工具函数等。

第三部分：第一个 AngularJS 应用 - "Hello, World!"

让我们动手写第一个 AngularJS 程序,感受一下它的魅力。

目标：在页面上显示 "Hello, AngularJS!"，并且当用户在输入框中输入新名字时,欢迎语会实时更新。

步骤 1：准备工作

引入 AngularJS 库：从官网下载或使用 CDN 链接，我们这里使用 CDN,最简单。
创建 HTML 文件：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">我的第一个 AngularJS 应用</title>
    <!-- 1. 引入 AngularJS 库 -->
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <!-- 2. 指定 AngularJS 应用管理的范围 -->
    <div ng-app="myApp">
        <!-- 3. 定义控制器，并管理内部的数据 -->
        <div ng-controller="myCtrl">
            <!-- 4. 使用数据绑定，显示变量 name 的值 -->
            <h1>{{ greeting }}, {{ name }}!</h1>
            <!-- 5. 使用 ng-model 指令，将输入框的值绑定到变量 name -->
            <p>请输入你的名字: <input type="text" ng-model="name"></p>
        </div>
    </div>
    <!-- 6. 编写 AngularJS 的 JavaScript 代码 -->
    <script>
        // 7. 获取 AngularJS 模块 "myApp"
        var app = angular.module('myApp', []);
        // 8. 为模块 "myApp" 创建控制器 "myCtrl"
        app.controller('myCtrl', function($scope) {
            // $scope 是控制器和视图之间的桥梁
            $scope.greeting = "Hello";
            $scope.name = "AngularJS";
        });
    </script>
</body>
</html>

代码详解：

ng-app="myApp"：这是一个指令，它告诉 AngularJS：“这个 <div> 及其内部的所有内容都由名为 myApp 的 AngularJS 模块来管理。” 这是应用的入口点。
ng-controller="myCtrl"：这也是一个指令，它指定了当前区域的逻辑由名为 myCtrl 的控制器来处理。
{{ greeting }}, {{ name }}!：这是 AngularJS 的表达式，它会显示 greeting 和 name 变量的值，当这两个变量的值改变时,这里会自动更新。
ng-model="name"：这是一个核心指令，用于数据绑定，它将输入框的 value 与控制器中的 $scope.name 变量连接起来，你在输入框里输入什么，$scope.name 就变成什么；反之，$scope.name 被程序改变,输入框的值也会更新。
angular.module('myApp', [])：创建或获取一个 AngularJS 模块。'myApp' 是模块名，[] 表示该模块没有依赖其他模块。
app.controller('myCtrl', function($scope) { ... })：为 myApp 模块创建一个名为 myCtrl 的控制器。
$scope：这是作用域对象，是连接控制器（后端逻辑）和视图（前端HTML）的桥梁，在控制器中，我们将数据（如 greeting, name）赋值给 $scope,这样视图中的表达式就能访问到它们。

第四部分：核心概念详解

模块

模块是应用的主要容器，它负责组织控制器、服务、指令等。

创建模块：angular.module('moduleName', [dependencies])
使用模块：在 HTML 中用 ng-app="moduleName" 来指定。

控制器

控制器是 JavaScript 的构造函数或函数,用于为你的视图添加额外的功能。

作用：初始化 $scope 对象，为视图提供数据和行为（方法）。

示例：

app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    // 在控制器中定义一个方法
    $scope.getFullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});

在视图中可以这样调用：<p>{{ getFullName() }}</p>

指令

指令是 AngularJS 的“超能力”，它通过在 HTML 中添加新的属性或标签来增强其功能。

指令	描述	示例
`ng-app`	定义 AngularJS 应用的根元素。	`<body ng-app="myApp">`
`ng-model`	将 HTML 表单元素（如 input, select）的值绑定到应用数据。	`<input ng-model="name">`
`ng-bind`	将应用数据绑定到 HTML 元素的 innerHTML。	`<p ng-bind="name"></p>` (效果同 `{{name}}`)
`ng-repeat`	遍历一个集合（数组或对象），为每个元素克隆一份 HTML 模板。	`<li ng-repeat="x in names">{{ x }}</li>`
`ng-if`	根据表达式的值来添加或移除 HTML 元素。	`<p ng-if="showWelcome">欢迎!</p>`
`ng-click`	为 HTML 元素添加点击事件。	`<button ng-click="count = count + 1">点我</button>`

作用域

$scope：是连接控制器和视图的对象,它包含了在视图中可以访问的模型数据。
作用域层级：作用域是嵌套的。ng-app 创建一个根作用域，ng-controller 会在这个根作用域下创建一个子作用域。

过滤器

过滤器用于格式化显示在视图上的数据，可以在表达式中或指令中使用，通过符号添加。

使用方式：{{ expression | filter }} 或 {{ expression | filter:parameter }}

过滤器	描述	示例
`uppercase`	转换为大写。	`<p>{{ name \| uppercase }}</p>`
`lowercase`	转换为小写。	`<p>{{ name \| lowercase }}</p>`
`currency`	格式化数字为货币格式。	`<p>{{ price \| currency }}</p>` ( $100.00)
`filter`	从数组中选择一个子集。	`<li ng-repeat="x in names \| filter:'i'">{{ x }}</li>` (筛选包含 'i' 的名字)

第五部分：实战小项目 - 待办事项列表

让我们用学到的知识做一个简单的 To-Do List。

功能：

在输入框中输入新任务,按回车或点击按钮添加到列表。
每个任务旁边有一个删除按钮,点击可删除。
任务列表可以清空。

代码 (todo.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">AngularJS Todo List</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        ul { list-style-type: none; padding: 0; }
        li { background: #f4f4f4; margin: 5px 0; padding: 10px; border: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
        input[type="text"] { padding: 8px; width: 70%; }
        button { padding: 8px; cursor: pointer; }
    </style>
</head>
<body>
<div ng-app="todoApp" ng-controller="todoCtrl">
    <h2>我的待办事项</h2>
    <!-- 添加新任务 -->
    <div>
        <input type="text" ng-model="newTask" ng-keypress="($event.which === 13) && addTask()">
        <button ng-click="addTask()">添加</button>
    </div>
    <!-- 显示任务列表 -->
    <ul>
        <!-- ng-repeat 遍历 tasks 数组 -->
        <li ng-repeat="task in tasks">
            <span>{{ task }}</span>
            <!-- 点击删除按钮调用 removeTask 方法 -->
            <button ng-click="removeTask($index)">删除</button>
        </li>
    </ul>
    <!-- 清空按钮 -->
    <button ng-click="clearAll()" ng-show="tasks.length > 0">清空所有</button>
</div>
<script>
// 创建应用模块
var app = angular.module('todoApp', []);
// 创建控制器
app.controller('todoCtrl', function($scope) {
    // 初始化任务数组
    $scope.tasks = ["学习 AngularJS", "买菜", "散步"];
    // 添加任务的方法
    $scope.addTask = function() {
        // 检查输入是否为空
        if ($scope.newTask !== "") {
            $scope.tasks.push($scope.newTask);
            // 清空输入框
            $scope.newTask = "";
        }
    };
    // 删除任务的方法
    // $index 是 ng-repeat 提供的当前项的索引
    $scope.removeTask = function(index) {
        $scope.tasks.splice(index, 1);
    };
    // 清空所有任务
    $scope.clearAll = function() {
        $scope.tasks = [];
    };
});
</script>
</body>
</html>

项目解析：

ng-model="newTask"：将输入框与 $scope.newTask 绑定。
ng-repeat="task in tasks"：遍历 $scope.tasks 数组，为每个任务创建一个 <li>。
ng-click="addTask()"：点击“添加”按钮时，调用 addTask 方法。
ng-keypress="..."：监听键盘事件，当按下回车键（$event.which === 13）时，也调用 addTask 方法。
ng-click="removeTask($index)"：点击“删除”按钮时，调用 removeTask 方法，并传入当前任务的索引 $index。
ng-show="tasks.length > 0"：只有当任务列表不为空时，才显示“清空所有”按钮。

第六部分：进阶与学习资源

当你掌握了基础后,可以继续学习：

服务：学习 $http 服务如何从服务器获取数据（AJAX）。
路由：学习 $routeProvider 如何实现单页应用的不同视图切换。
自定义指令：学习如何创建自己的、可复用的组件。
表单验证：学习 AngularJS 强大的表单验证功能。

学习资源：

官方文档：AngularJS 官方文档 (最权威,但可能对初学者稍显复杂)
菜鸟教程 - AngularJS 教程：菜鸟教程 AngularJS (非常适合快速入门和查阅)
W3Schools - AngularJS Tutorial：W3Schools AngularJS (英文，内容清晰,有大量在线示例)
视频教程：在 B站、YouTube 上搜索 "AngularJS 入门",有很多视频课程。

最后的重要提醒：AngularJS vs Angular

AngularJS (v1.x)：我们今天学习的这个版本，也叫 Angular 1，它是一个成熟、稳定但已停止维护的框架,适合维护旧项目或学习前端框架的基本思想。
Angular (v2+)：由 Google 重写的新一代框架，也叫 Angular 2+，它使用 TypeScript（JavaScript 的超集），性能更好，功能更强大，但学习曲线也更陡峭。所有新项目都应该选择 Angular (v2+)，而不是 AngularJS。

AngularJS 是一个优秀的前端框架，能让你深刻理解数据绑定、模块化等现代前端开发的核心思想，虽然它已不再是主流，但作为学习的第一步，它依然非常有价值,祝你学习愉快！

AngularJS菜鸟教程如何快速入门？

AngularJS 菜鸟教程：从零开始的前端框架

第一部分：什么是 AngularJS？

第二部分：为什么选择 AngularJS？（核心优势）

第三部分：第一个 AngularJS 应用 - "Hello, World!"

第四部分：核心概念详解

模块

控制器

指令

作用域

过滤器

第五部分：实战小项目 - 待办事项列表

第六部分：进阶与学习资源

最后的重要提醒：AngularJS vs Angular

99ANYc3cd6

Linux内核视频教程该怎么学？

Python HTTPHandler如何实现自定义请求处理？

Excel VBA视频教程怎么学更高效？

Python多进程如何高效实现并行计算？

Java中double转int有哪些方法？

男士瑜伽入门，哪些基本动作必学？

URLClassLoader如何动态加载Java类？

Python AsyncResult如何获取异步任务结果？

CentOS下MySQL与Python如何连接？

UIAutomator Python 怎么用？

numpy的append是原地操作还是返回新数组？

3dsmax教程百度云资源哪里找？

excel vba基础教程

Java中fillPolygon方法如何使用？

Python rasterstats如何实现栅格统计？

autocad mac教程

AngularJS菜鸟教程如何快速入门？

AngularJS 菜鸟教程：从零开始的前端框架

第一部分：什么是 AngularJS？

第二部分：为什么选择 AngularJS？（核心优势）

第三部分：第一个 AngularJS 应用 - "Hello, World!"

第四部分：核心概念详解

模块

控制器

指令

作用域

过滤器

第五部分：实战小项目 - 待办事项列表

第六部分：进阶与学习资源

最后的重要提醒：AngularJS vs Angular

相关推荐

男士瑜伽入门，哪些基本动作必学？