為幫你快速完成AngularJS的入門安裝與環(huán)境配置，以下內(nèi)容將從“安裝前提、3種安裝方式（CDN引入/本地下載/npm安裝）、環(huán)境驗(yàn)證、常見問題排查”四個(gè)維度，提供清晰易懂的步驟說明，適合零基礎(chǔ)開發(fā)者快速上手。
AngularJS（注意：非Angular，AngularJS特指1.x版本）是一款輕量級(jí)前端框架，安裝過程簡(jiǎn)單，無需復(fù)雜的構(gòu)建工具配置，核心是引入框架文件并驗(yàn)證可用性。以下是詳細(xì)安裝步驟：
一、安裝前提
AngularJS對(duì)運(yùn)行環(huán)境無特殊要求，只需滿足：
任意現(xiàn)代瀏覽器（Chrome、Firefox、Edge、Safari等，建議版本在Chrome 49+、Firefox 45+以上）；
文本編輯器（推薦VS Code、Sublime Text、WebStorm等，支持HTML/JS語法高亮即可）；
若使用npm安裝（適用于工程化項(xiàng)目），需提前安裝Node.js（推薦v14+版本，自帶npm包管理器）。
二、3種安裝方式（按需選擇）
AngularJS提供多種安裝方式，新手優(yōu)先選擇“CDN引入”（無需下載文件，直接使用），工程化項(xiàng)目可選擇“npm安裝”。
方式1：CDN引入（推薦，最快上手）
CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引入無需下載框架文件，直接通過網(wǎng)絡(luò)鏈接加載，適合快速開發(fā)和小型項(xiàng)目。
步驟：
創(chuàng)建基礎(chǔ)HTML文件（如index.html），在<head>或<body>末尾引入AngularJS的CDN鏈接；
推薦使用官方CDN或國(guó)內(nèi)穩(wěn)定CDN（如百度、阿里云），避免鏈接失效。
完整示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>AngularJS入門 - CDN安裝驗(yàn)證</title>
? ? <!-- 引入AngularJS 1.x最新穩(wěn)定版（官方CDN） -->
? ? <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
? ? <!-- 國(guó)內(nèi)備用CDN（百度）：若官方CDN加載慢，可替換為以下鏈接 -->
? ? <!-- <script src="https://apps.bdimg.com/libs/angular.js/1.8.2/angular.min.js"></script> -->
</head>
<body>
? ? <!-- ng-app：標(biāo)記AngularJS應(yīng)用的根節(jié)點(diǎn)，無需手動(dòng)初始化 -->
? ? <div ng-app="">
? ? ? ? <!-- 雙向數(shù)據(jù)綁定：輸入框內(nèi)容實(shí)時(shí)同步到頁面 -->
? ? ? ? <input type="text" ng-model="message" placeholder="請(qǐng)輸入內(nèi)容">
? ? ? ? <h3>你輸入的內(nèi)容：{{ message }}</h3>
? ? </div>
</body>
</html>
方式2：本地文件下載（適合無網(wǎng)絡(luò)環(huán)境）
若開發(fā)環(huán)境無網(wǎng)絡(luò)，可先下載AngularJS本地文件，再引入項(xiàng)目。
步驟：
下載AngularJS文件：
訪問AngularJS官方下載頁：https://angularjs.org/
選擇版本（推薦1.8.2穩(wěn)定版），下載類型：
angular.min.js：壓縮版（體積小，適合生產(chǎn)環(huán)境）；
angular.js：未壓縮版（源碼可讀，適合開發(fā)調(diào)試）。
放置文件：將下載的angular.min.js文件與你的HTML文件放在同一文件夾（或?qū)ｉT的js/lib目錄）；
本地引入：通過相對(duì)路徑引入文件。
完整示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>AngularJS入門 - 本地安裝驗(yàn)證</title>
? ? <!-- 引入本地AngularJS文件（路徑根據(jù)實(shí)際存放位置調(diào)整） -->
? ? <script src="angular.min.js"></script>
</head>
<body>
? ? <div ng-app="">
? ? ? ? <input type="text" ng-model="name" placeholder="請(qǐng)輸入姓名">
? ? ? ? <p>Hello, {{ name || '陌生人' }}!</p>
zq-mobile.zhaopin.com/moment/86358725
zq-mobile.zhaopin.com/moment/86358815
zq-mobile.zhaopin.com/moment/86358930
zq-mobile.zhaopin.com/moment/86359018
zq-mobile.zhaopin.com/moment/86359136
zq-mobile.zhaopin.com/moment/86359226
zq-mobile.zhaopin.com/moment/86359298
zq-mobile.zhaopin.com/moment/86359552
zq-mobile.zhaopin.com/moment/86359651
zq-mobile.zhaopin.com/moment/86359829
zq-mobile.zhaopin.com/moment/86359942
zq-mobile.zhaopin.com/moment/86360021
zq-mobile.zhaopin.com/moment/86360121
zq-mobile.zhaopin.com/moment/86360215
zq-mobile.zhaopin.com/moment/86360297
zq-mobile.zhaopin.com/moment/86361464
zq-mobile.zhaopin.com/moment/86361507
zq-mobile.zhaopin.com/moment/86361574
zq-mobile.zhaopin.com/moment/86361609
zq-mobile.zhaopin.com/moment/86361644
? ? </div>
</body>
</html>
方式3：npm安裝（工程化項(xiàng)目，適用于Vue/React混合開發(fā)或大型項(xiàng)目）
若你的項(xiàng)目使用npm管理依賴（如結(jié)合Webpack、Gulp等構(gòu)建工具），可通過npm安裝AngularJS，方便版本管理和工程化配置。
步驟：
安裝Node.js（已安裝可跳過）：
訪問Node.js官網(wǎng)：https://nodejs.org/，下載LTS版本（長(zhǎng)期支持版），安裝后自動(dòng)配置npm；
驗(yàn)證Node.js和npm：打開終端（CMD/終端），輸入以下命令，顯示版本號(hào)即安裝成功：
node -v? # 輸出Node.js版本（如v16.18.0）
npm -v? # 輸出npm版本（如8.19.2）
初始化項(xiàng)目（若已有項(xiàng)目可跳過）：
新建項(xiàng)目文件夾（如angularjs-demo），終端進(jìn)入該文件夾，執(zhí)行初始化命令：
npm init -y? # 快速生成package.json（項(xiàng)目依賴配置文件）
安裝AngularJS：
終端執(zhí)行安裝命令（安裝1.8.2穩(wěn)定版）：
npm install angular@1.8.2 --save? # --save將依賴寫入package.json
項(xiàng)目中引入：
在JS文件中通過require引入（適用于CommonJS模塊規(guī)范，如Webpack項(xiàng)目）：
// main.js
const angular = require('angular');
// 初始化AngularJS應(yīng)用
angular.module('myApp', [])
? ? .controller('myCtrl', function($scope) {
? ? ? ? $scope.message = 'AngularJS npm安裝成功！';
? ? });
在HTML中通過<script>引入node_modules目錄下的AngularJS文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ? <meta charset="UTF-8">
? ? <title>AngularJS入門 - npm安裝驗(yàn)證</title>
? ? <!-- 引入node_modules中的AngularJS -->
? ? <script src="node_modules/angular/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
? ? <h3>{{ message }}</h3>
</body>
<script src="main.js"></script>
</html>
三、環(huán)境驗(yàn)證：確認(rèn)AngularJS安裝成功
無論哪種安裝方式，完成后可通過以下步驟驗(yàn)證：
將上述示例HTML文件用瀏覽器打開；
若為CDN/本地安裝示例：在輸入框中輸入內(nèi)容，頁面會(huì)實(shí)時(shí)同步顯示（雙向數(shù)據(jù)綁定生效）；
若為npm安裝示例：頁面顯示“AngularJS npm安裝成功！”，且控制臺(tái)無報(bào)錯(cuò)；
驗(yàn)證核心：打開瀏覽器控制臺(tái)（F12），切換到“Console” tab，輸入angular，若輸出Object{...}（AngularJS對(duì)象），說明框架已成功加載。
四、常見問題排查
控制臺(tái)報(bào)錯(cuò)“angular is not defined”：
原因：AngularJS文件引入路徑錯(cuò)誤，或引入順序在自定義JS之后；
解決：確保<script src="angular.min.js">在自定義JS代碼之前，且路徑正確（相對(duì)路徑需對(duì)應(yīng)文件位置，CDN鏈接需能正常訪問）。
雙向數(shù)據(jù)綁定不生效（{{ message }}直接顯示在頁面）：
原因：未添加ng-app指令（AngularJS的根節(jié)點(diǎn)標(biāo)記）；
解決：在頁面根元素（如<div>、<body>）上添加ng-app=""（空值表示使用默認(rèn)模塊）。
npm安裝后找不到node_modules目錄：
原因：未在項(xiàng)目文件夾下執(zhí)行npm install，或執(zhí)行命令時(shí)權(quán)限不足；
解決：終端切換到項(xiàng)目根目錄（package.json所在目錄）重新執(zhí)行npm install，Windows系統(tǒng)可右鍵終端以管理員身份運(yùn)行。
CDN加載慢或失效：
解決：替換為國(guó)內(nèi)CDN（如百度、阿里云），或下載本地文件引入。
后續(xù)入門建議
安裝完成后，可通過以下簡(jiǎn)單步驟開啟AngularJS學(xué)習(xí)：
理解核心指令：ng-app（應(yīng)用根節(jié)點(diǎn)）、ng-model（雙向數(shù)據(jù)綁定）、ng-controller（控制器）、ng-repeat（循環(huán)渲染）；
編寫第一個(gè)控制器：實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)綁定和事件處理；
參考官方文檔：https://docs.angularjs.org/guide（英文）、https://angularjs.bootcss.com/guide（中文翻譯版）。
AngularJS的安裝門檻低，核心是先確保框架成功加載，再通過簡(jiǎn)單示例熟悉核心語法，快速進(jìn)入開發(fā)狀態(tài)。
