AngularJS 安装使用教程

发布于:2025-07-02 ⋅ 阅读:(44) ⋅ 点赞:(0)

一、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 本地引入方式

  1. 下载地址:https://angularjs.org/
  2. 下载 angular.min.js 并放入项目目录
  3. 在 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 自动更新(数据绑定)

九、学习资源推荐


本文由“小奇Java面试”原创发布,转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读,回复【资料】获取福利,回复【项目】获取项目源码,回复【简历模板】获取简历模板,回复【学习路线图】获取学习路线图。

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到