一、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面試】第一時間閱讀，回復【資料】獲取福利，回復【項目】獲取項目源碼，回復【簡歷模板】獲取簡歷模板，回復【學習路線圖】獲取學習路線圖。
 視頻教程 - jieba庫分詞簡介及使用)
知識詳解)
