一、AngularJS 简介

在回顾前端框架发展史时，AngularJS 始终是一个不可忽视的重要角色。它由 Google 打造，采用 MVVM 架构，是一款经典的 JavaScript 框架，原生支持数据双向绑定、依赖注入、模块化开发以及路由管理等核心特性，特别适合构建单页面应用（SPA）。需要特别说明的是，本文所讲的 AngularJS 是指 1.x 版本，与后续推出的 Angular 2+ 完全不同，初学者切勿混淆。

二、AngularJS 安装方式

2.1 使用 CDN（推荐）

最便捷的安装方法：直接在 HTML 文件中通过 CDN 地址引入 AngularJS 核心库：

若担心海外 CDN 访问速度，可使用国内镜像源：

2.2 本地引入方式

1. 前往 AngularJS 官网 https://angularjs.org/ 下载 angular.min.js 文件
2. 将文件放入项目对应目录
3. 在 HTML 中通过相对路径引用：

三、AngularJS 快速上手示例

  
  
  



  
{{ greeting }}
  
  
你好，{{ name }}！

四、核心概念说明

五、常见指令与用法

{{ 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 入门指南