一、AngularJS 简介
在回顾前端框架发展史时，AngularJS 始终是一个不可忽视的重要角色。它由 Google 打造，采用 MVVM 架构，是一款经典的 JavaScript 框架，原生支持数据双向绑定、依赖注入、模块化开发以及路由管理等核心特性，特别适合构建单页面应用（SPA）。需要特别说明的是，本文所讲的 AngularJS 是指 1.x 版本，与后续推出的 Angular 2+ 完全不同，初学者切勿混淆。
二、AngularJS 安装方式
2.1 使用 CDN（推荐）
最便捷的安装方法：直接在 HTML 文件中通过 CDN 地址引入 AngularJS 核心库：
若担心海外 CDN 访问速度，可使用国内镜像源：
2.2 本地引入方式
- 前往 AngularJS 官网 https://angularjs.org/ 下载
angular.min.js文件 - 将文件放入项目对应目录
- 在 HTML 中通过相对路径引用：
三、AngularJS 快速上手示例
AngularJS 示例
{{ greeting }}
你好，{{ name }}！
四、核心概念说明
| 概念 | 说明 |
|---|---|
ng-app | 定义 Angular 应用根作用域，声明应用起始 |
ng-model | 实现数据双向绑定，视图与模型自动同步 |
ng-controller | 控制器，负责管理作用域内的数据与逻辑 |
ng-repeat | 列表循环渲染，遍历数组或对象生成 DOM |
ng-if / ng-show | 条件渲染，根据表达式控制元素显示或隐藏 |
五、常见指令与用法
{{ message }}
显示这段文字
- {{ item }}
六、模块与控制器
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.message = "你好，AngularJS！";
});
七、常见问题
Q1: {{}} 插值表达式不渲染？
- 请检查页面中是否正确定义了
ng-app指令，以及控制器是否已正确绑定。
Q2: 控制台报错 "angular is not defined"？
- 检查 AngularJS 脚本文件是否已正确加载，并确保引用顺序正确（Angular 库需在自定义脚本之前加载）。
八、AngularJS 生命周期说明
- 配置阶段：完成路由、依赖注入等应用配置
- 运行阶段：应用初始化启动
- 模型改变 → DOM 自动更新（数据绑定机制驱动视图刷新）
九、学习资源推荐
- AngularJS 官方文档
- W3School AngularJS 教程
- 菜鸟教程 AngularJS 入门指南
