AngularJS模块实例化失败求助：已定义模块仍报[$injector:modulerr]错误

Hey there, let's break down and fix your problem step by step.

First, looking at your error message: it's complaining that it can't find the module myApp, but in your code, you've defined a module called myTest and set ng-app="myTest" on the body tag. That's a clear mismatch! Either you accidentally referenced myApp somewhere else (maybe old code stuck in browser cache, or a typo you missed), or there was a mix-up when pasting the error.

But wait, there's another critical issue in your code that's likely contributing to weird behavior: self-closing <script/> tags aren't valid in HTML. Browsers don't handle these correctly, which can prevent your Angular scripts from loading properly—even if the error message points to a module name issue, this syntax error could be causing unexpected initialization problems.

Here's how to fix both issues:

Step 1: Fix the script tag syntax #

Replace all self-closing <script/> tags with properly closed <script></script> tags. This ensures your Angular files are loaded correctly.

Step 2: Ensure module name consistency #

Double-check that everywhere you reference your module (the ng-app directive and the angular.module() call) uses the exact same name—myTest in your case.

Step 3: Clear browser cache #

Sometimes browsers hang onto old versions of your HTML. Do a hard refresh (Ctrl+F5 on most browsers) to make sure you're loading the updated code.

Here's your corrected full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../angular/angular-1.6.7/angular.js"></script>
    <script src="../angular/angular-1.6.7/angular-route.min.js"></script>
    <!-- 
    <script type="text/javascript" src="../modules/familyTree.js"></script>
    <script type="text/javascript" src="../controllers/mainController.js"></script>
    -->
    <script type="text/javascript">
        var test = angular.module("myTest", []);
        test.controller("main", ["$scope", function ($scope) {
            $scope.headline = "Its Started";
        }]);
    </script>
</head>
<body ng-app="myTest">
    <div ng-controller="main">
        <h1>{{headline}}</h1>
        {{1+2}}
    </div>
</body>
</html>

After making these changes, your app should load correctly: the {{headline}} binding will display "Its Started" and {{1+2}} will show 3 as expected.

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