AngularJS?安裝使用教程及常見問題
更新時間：2025年07月07日 11:51:12 作者：小奇JAVA面試
AngularJS是Google開發(fā)的前端框架,采用MVVM架構(gòu),支持?jǐn)?shù)據(jù)雙向綁定、依賴注入、模塊化與路由管理,適合構(gòu)建單頁面應(yīng)用,本文給大家介紹AngularJS安裝使用教程,感興趣的朋友一起看看吧
一、AngularJS 簡介
AngularJS 是 Google 開發(fā)的一款前端 JavaScript 框架，采用 MVVM 架構(gòu)，提供了數(shù)據(jù)雙向綁定、依賴注入、模塊化、路由管理等強大功能，適合構(gòu)建單頁面應(yīng)用（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>
國內(nèi)鏡像：
<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 應(yīng)用的根作用域 |
ng-model | 數(shù)據(jù)雙向綁定 |
ng-controller | 控制器，管理作用域數(shù)據(jù) |
ng-repeat | 列表循環(huán) |
ng-if / ng-show | 條件渲染 |
五、常見指令與用法
<!-- 綁定 -->
<p>{{ message }}</p>
<!-- 條件語句 -->
<p ng-if="isVisible">顯示這段文字</p>
<!-- 列表循環(huán) -->
<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 生命周期說明
- 配置階段：配置路由、依賴等
- 運行階段：應(yīng)用初始化
- 模型改變 → DOM 自動更新（數(shù)據(jù)綁定）
九、學(xué)習(xí)資源推薦
到此這篇關(guān)于AngularJS 安裝使用教程的文章就介紹到這了,更多相關(guān)AngularJS 安裝使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎(chǔ)資料進(jìn)行詳細(xì)介紹,并附代碼實例,有興趣的小伙伴可以參考下2016-08-08
關(guān)于Angularjs中跨域設(shè)置白名單問題
這篇文章主要介紹了Angularjs中關(guān)于跨域設(shè)置白名單問題,需要的朋友可以參考下2018-04-04
AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
這篇文章主要介紹了AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能,較為詳細(xì)的分析了JSONP的概念、功能并結(jié)合實例形式給出了AngularJS使用JSONP進(jìn)行跨域訪問數(shù)據(jù)傳輸?shù)南嚓P(guān)技巧,需要的朋友可以參考下2017-07-07
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
使用 Github Actions 自動部署 Angular 應(yīng)用到 Github Pages的方法
這篇文章主要介紹了使用 Github Actions 自動部署 Angular 應(yīng)用到 Github Pages,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
解決ng-repeat產(chǎn)生的ng-model中取不到值的問題
今天小編就為大家分享一篇解決ng-repeat產(chǎn)生的ng-model中取不到值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS的$location使用方法詳解的相關(guān)資料,希望通過本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法,結(jié)合實例形式分析了AngularJS動態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
angular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法
下面小編就為大家?guī)硪黄猘ngular 用攔截器統(tǒng)一處理http請求和響應(yīng)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下2016-09-09