AngularJS 下载与入门教程
AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，用于构建单页面应用，虽然现在 Angular (v2+) 更为主流，但 AngularJS 仍然在一些遗留项目中广泛使用,并且是学习前端框架发展史的重要一环。
（图片来源网络，侵删）
第一步：理解 AngularJS 的核心概念
在开始之前,了解几个核心概念会帮助你更好地学习：
- MVC (Model-View-Controller)：AngularJS 将你的应用分为三个部分：
- Model (模型)：应用的数据。
- View (视图)：数据显示的 HTML 界面。
- Controller (控制器)：处理用户交互，连接 Model 和 View。
- 双向数据绑定 (Two-way Data Binding)：这是 AngularJS 最强大的特性之一，当 Model 中的数据发生变化时，View 会自动更新；反之，当 View 中的用户输入（如输入框）发生变化时，Model 中的数据也会自动同步更新。
- 指令：AngularJS 扩展了 HTML 的功能。
ng-app、ng-model、ng-bind都是指令，它们为 HTML 元素添加了特定的行为。
第二步：下载 AngularJS
AngularJS 的核心是一个 JavaScript 文件,你有以下几种方式来获取它：
直接下载 (推荐用于学习)
这是最直接的方式,适合初学者和本地开发。
- 访问官网：打开 AngularJS 的官方网站 https://angularjs.org/。
- 进入下载页面：点击页面上的 "DOWNLOAD" 按钮。
- 选择版本：
- 你会看到几个选项，对于学习和开发，推荐使用 "Latest Stable" (最新稳定版)。
- 你可以选择下载 完整版 (包含所有功能，文件较大) 或 精简版 (移除了注释和空格，文件较小，生产环境推荐)。
- 保存文件：点击链接，将
angular.js或angular.min.js文件保存到你的项目文件夹中。
使用 CDN (推荐用于在线项目和快速原型)
CDN (Content Delivery Network) 可以让你无需下载文件，直接通过链接引入 AngularJS，这是目前最流行的方式，速度快,且能利用浏览器缓存。
（图片来源网络，侵删）
- Google CDN (推荐):
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
- Microsoft CDN:
<script src="https://ajax.aspnetcdn.com/ajax/angularjs/1.8.2/angular.min.js"></script>
- jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/angular@1.8.2/angular.min.js"></script>
注意：版本号
8.2是当前最新的稳定版,你可以根据需要替换为你想要的版本。
第三步：创建你的第一个 AngularJS 应用
我们将创建一个简单的本地 HTML 文件，实现一个数据绑定的“Hello World”示例。
项目结构
在你的项目文件夹中，创建一个 index.html 文件，如果你下载了 AngularJS 文件,也把它放在这个文件夹里。
my-angular-app/
├── angular.min.js (从官网下载的文件)
└── index.html (我们将创建的HTML文件)编写 index.html 代码
打开 index.html 文件，将以下代码复制进去,代码中包含了详细的注释来解释每一部分的作用。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">My First AngularJS App</title>
<!--
1. 引入 AngularJS 库
- 如果使用本地文件，取消下面这行的注释
-->
<!-- <script src="angular.min.js"></script> -->
<!--
2. 使用 CDN 引入 AngularJS (推荐)
- 如果使用CDN，请取消下面这行的注释，并注释掉本地文件引入
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!--
3. 定义 AngularJS 应用
- ng-app 指令告诉 AngularJS <div> 元素是 "AngularJS 应用" 的根元素。
- 它会自动初始化（或 "启动"）应用。
-->
<div ng-app="myApp" ng-controller="myCtrl">
<!--
4. 数据绑定
- ng-model 指令将输入框的值绑定到名为 "name" 的变量上。
- 这个变量在 myCtrl 控制器中定义。
-->
<p>姓名: <input type="text" ng-model="name"></p>
<!--
5. 显示绑定数据
- ng-bind 指令将 <p> 元素的 innerHTML 绑定到 "name" 变量。
- 当你在输入框中输入内容时，这里的文字会实时更新。
-->
<p ng-bind="name"></p>
<!--
另一种显示绑定数据的方式是使用双大括号 {{ }}。
效果与 ng-bind 相同，但在数据加载完成前可能会显示 {{ name }}。
-->
<p>你好, {{ name }}!</p>
</div>
<script>
/*
6. 创建控制器
- var app = angular.module(...) 定义了一个名为 "myApp" 的 AngularJS 模块。
- app.controller(...) 定义了一个名为 "myCtrl" 的控制器。
- $scope 是一个 JavaScript 对象，拥有可用的属性和方法。
- $scope 对象是视图（HTML 元素）和控制器（JavaScript 函数）之间的桥梁。
*/
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "World"; // 在控制器中初始化 name 变量
});
</script>
</body>
</html>
运行你的应用
由于我们使用了 AngularJS，它需要通过 Web 服务器来运行，以避免一些浏览器安全策略（CORS）问题。
简单方法：使用 VS Code 的 Live Server 插件
- 如果你使用 Visual Studio Code，请安装 "Live Server" 插件。
- 在
index.html文件中，右键点击，选择 "Open with Live Server"。 - 你的浏览器会自动打开一个新标签页,显示你的应用。
其他方法：
- Python: 如果你安装了 Python 3，可以在项目文件夹下打开终端，运行
python -m http.server 8000，然后在浏览器中访问http://localhost:8000。 - Node.js: 可以使用
http-server等工具。
你应该能在浏览器中看到一个输入框，在输入框中输入任何文字，下面的问候语会实时跟着变化，恭喜你，你已经成功运行了第一个 AngularJS 应用！
总结与后续学习
-
- 下载：可以通过官网下载
.js文件或使用 CDN。 - 核心三要素：
ng-app(定义应用)、ng-controller(定义控制器)、ng-model(绑定数据)。 - 桥梁：
$scope对象连接了 HTML 视图和 JavaScript 控制器。 - 运行：建议使用本地 Web 服务器（如 Live Server）来运行项目。
- 下载：可以通过官网下载
-
下一步学习：
- 模块化：学习如何更好地组织代码，使用
angular.module()创建模块和依赖。 - 服务：了解
$http服务如何从服务器获取数据。 - 路由：学习
$routeProvider如何实现单页面应用的多视图切换。 - 过滤器：学习如何格式化显示数据，如
currency、date、uppercase等。 - 指令：学习如何创建自定义指令来扩展 HTML。
- 模块化：学习如何更好地组织代码，使用
希望这份详细的教程能帮助你顺利入门 AngularJS！
