求助：AngularJS网页无法找到引用的Angular模块或控制器

嘿，我太懂把AngularJS代码从HTML里抽离后功能突然失效的挫败感了——我当初刚做分离的时候也踩过好几个坑！咱们一步步来排查和解决这个问题，先从最常见的原因说起：

1. 模块与控制器的注册、引用必须完全匹配 #

分离代码后，最容易犯的错就是模块/控制器名称不对应，或者没正确把控制器挂载到模块上。

举个正确的例子：

• 你的自定义JS文件（比如app.js）里要先定义模块，再挂载控制器：

// 定义Angular模块，名称是myApp
var myApp = angular.module('myApp', []);

// 把控制器注册到这个模块上，名称是HomeController
myApp.controller('HomeController', function($scope) {
  // 这里写你的控制器逻辑，比如初始化数据
  $scope.welcomeText = "Hello from separated controller!";
});

• 然后在Home.html里，要确保ng-app和ng-controller的名称和JS里完全一致（大小写敏感！），同时正确引入JS文件：

<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <!-- 一定要在Angular核心库之后引入自定义JS -->
  <script src="/app.js"></script>
</head>
<body ng-controller="HomeController">
  <!-- 测试数据绑定是否生效 -->
  <h1>{{ welcomeText }}</h1>
</body>
</html>

2. 检查JS文件的加载顺序与托管状态 #

• 加载顺序不能乱：AngularJS核心库必须在你的自定义JS之前加载，不然浏览器会报错angular is not defined——你可以打开浏览器F12的Console面板看有没有这类错误。
• NodeJS要正确托管静态文件：如果你用Express做服务器，必须设置静态文件目录，不然浏览器会找不到你的app.js（报404错误）。比如：

const express = require('express');
const app = express();
// 假设你的app.js放在项目根目录的public文件夹里
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/Home.html');
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

可以通过F12的Network面板查看app.js的请求状态，确认它被正确加载了。

3. 用开发者工具定位具体错误 #

别忽略浏览器的开发者工具！Console面板里的错误信息是定位问题的关键：

• Module 'myApp' is not available：要么模块名称写错了，要么自定义JS没加载到
• Controller 'HomeController' is not registered：控制器没挂载到对应的模块上
• 404 Not Found：JS文件路径不对，或者NodeJS没托管该文件

完整可运行的示例参考 #

项目结构 #

your-project/
├── server.js
├── Home.html
└── public/
    └── app.js

server.js #

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'Home.html'));
});

app.listen(3000, () => {
  console.log('Server up at http://localhost:3000');
});

Home.html #

<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Separate Angular Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="/app.js"></script>
</head>
<body ng-controller="HomeController">
  <h1>{{ greeting }}</h1>
  <input type="text" ng-model="username" placeholder="Enter your name">
  <p>Hi there, {{ username }}!</p>
</body>
</html>

public/app.js #

var myApp = angular.module('myApp', []);

myApp.controller('HomeController', function($scope) {
  $scope.greeting = "Welcome to Separated AngularJS!";
  $scope.username = "";
});

运行node server.js后访问http://localhost:3000，应该就能看到正常工作的Angular功能了。

内容的提问来源于stack exchange，提问作者Skello