AngularJS 安装使用教程
一、AngularJS 简介
AngularJS 是 Google 开发的一款前端 JavaScript 框架，采用 MVVM 架构，提供了数据双向绑定、依赖注入、模块化、路由管理等强大功能，适合构建单页面应用（SPA）。注意：AngularJS（1.x）不同于后来的 Angular 2+ 版本。
二、AngularJS 安装方式
2.1 使用 CDN（推荐）
在 HTML 文件中引入 AngularJS：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
国内镜像：
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
2.2 本地引入方式
- 下载地址：https://angularjs.org/
- 下载
angular.min.js并放入项目目录 - 在 HTML 中引用：
<script src="js/angular.min.js"></script>
三、AngularJS 快速上手示例
<!DOCTYPE html>
<html lang="zh-CN" ng-app="myApp">
<head><meta charset="UTF-8"><title>AngularJS 示例</title><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
</head>
<body><div ng-controller="MainCtrl"><h1>{{ greeting }}</h1><input type="text" ng-model="name"><p>你好，{{ name }}！</p>
</div><script>var app = angular.module('myApp', []);app.controller('MainCtrl', function($scope) {$scope.greeting = "欢迎使用 AngularJS！";$scope.name = "小奇";});
</script></body>
</html>
四、核心概念说明
| 概念 | 说明 |
|---|---|
ng-app | 定义 Angular 应用的根作用域 |
ng-model | 数据双向绑定 |
ng-controller | 控制器，管理作用域数据 |
ng-repeat | 列表循环 |
ng-if / ng-show | 条件渲染 |
五、常见指令与用法
<!-- 绑定 -->
<p>{{ message }}</p><!-- 条件语句 -->
<p ng-if="isVisible">显示这段文字</p><!-- 列表循环 -->
<ul><li ng-repeat="item in items">{{ item }}</li>
</ul><!-- 表单控制 -->
<form><input type="text" ng-model="user.email"><button ng-click="submit()">提交</button>
</form>
六、模块与控制器
var app = angular.module('myApp', []);app.controller('MainCtrl', function($scope) {$scope.message = "你好，AngularJS！";
});
七、常见问题
Q1: {{}} 不渲染？
- 检查是否声明了
ng-app和正确绑定的控制器
Q2: 控制台报错 “angular is not defined”？
- 检查是否正确引入 angular.js 文件
- 确保引用顺序正确（Angular 在自定义脚本之前加载）
八、AngularJS 生命周期说明
- 配置阶段：配置路由、依赖等
- 运行阶段：应用初始化
- 模型改变 → DOM 自动更新（数据绑定）
九、学习资源推荐
- AngularJS 官网
- W3School AngularJS 教程
- 菜鸟教程 AngularJS
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
