脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS 安装使用

AngularJS 安装使用教程及常见问题

 更新时间：2025年07月07日 11:51:12   作者：小奇JAVA面试  
AngularJS是Google开发的前端框架,采用MVVM架构,支持数据双向绑定、依赖注入、模块化与路由管理,适合构建单页面应用,本文给大家介绍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 本地引入方式

  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 自动更新（数据绑定）

九、学习资源推荐

到此这篇关于AngularJS 安装使用教程的文章就介绍到这了,更多相关AngularJS 安装使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • AngularJS实现在ng-Options加上index的解决方法

    AngularJS实现在ng-Options加上index的解决方法

    这篇文章主要介绍了AngularJS实现在ng-Options加上index的解决方法,结合实例形式分析了AngularJS在ngOptions添加索引的操作步骤与相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • AngularJS实现表单验证功能详解

    AngularJS实现表单验证功能详解

    这篇文章主要为大家详细介绍了AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • AngularJS学习第一篇 AngularJS基础知识

    AngularJS学习第一篇 AngularJS基础知识

    这篇文章主要介绍了AngularJS学习第一篇，分享了有关AngularJS的基础知识，主要包括指令、过滤器等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Angular应用tsconfig.json中的lib属性示例解析

    Angular应用tsconfig.json中的lib属性示例解析

    这篇文章主要介绍了Angular应用tsconfig.json中的lib属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 使用Angular CLI生成 Angular 5项目教程详解

    使用Angular CLI生成 Angular 5项目教程详解

    这篇文章主要介绍了使用Angular CLI生成 Angular 5项目的教程详解 ,需要的朋友可以参考下
    2018-03-03
  • angular *Ngif else用法详解

    angular *Ngif else用法详解

    这篇文章主要介绍了angular *Ngif else用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 深入理解Angular中的依赖注入

    深入理解Angular中的依赖注入

    本篇文章主要介绍了深入理解Angular中的依赖注入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下
    2016-11-11
  • Angular设置别名alias的方法

    Angular设置别名alias的方法

    这篇文章主要介绍了Angular设置别名alias及打包命令的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • AngularJS实现星星等级评分功能

    AngularJS实现星星等级评分功能

    这篇文章主要为大家详细介绍了AngularJS实现星星等级评分功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论