AngularJS网页找不到引用的Angular模块或控制器

Question

Sorry for the possible repost, but I don't know how else to write this. 抱歉可能要重新发布，但是我不知道该怎么写。 I've been using this website to create a small angularJS webpage using nodeJS as well, and I've gotten to the part of separating the angular code from the view, or HTML. 我也一直在使用该网站来创建一个使用nodeJS的小angularJS网页，并且我已经开始将角度代码与视图或HTML分开。 What I've found was that when I tried to separate them nothing worked any more. 我发现，当我尝试分离它们时，不再起作用。

Here's my code so far: 到目前为止，这是我的代码：

Home.html: Home.html：

<!DOCTYPE html>
<html lang="en-US">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <!-- <script>
        var myApp = angular.module('myApp', []).controller('myCtrl', function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.myColor = "red";
        });
    </script> -->
</head>

<body>


    <!-- <script>
        myApp.directive('myDirective', function() {
            return {
                template: "This is a test directive."
            };
        })
    </script> -->


    <h2>myApp Test</h2>
    <div ng-app="myApp" ng-controller="myCtrl" ng-init="quantity = 10; cost = 5">
        <p>Color: <input type="text" style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}"></p>
        <p>Total in dollar (raw exp): {{quantity * cost}}</p>
        <p>Total in dollar (span): <span ng-bind="quantity * cost"></span></p>
        <p> First Name: <input type="text" ng-model="firstName"></p>
        <p> Last Name: <input type="text" ng-model="lastName"></p>
        <h1>Hello, {{firstName + " " + lastName}}</h1>
    </div>
    Are you even changing?!
</body>
<script type="javascript" src="../JS/myApp.js"></script>
<!-- <script type="javascript" src="../JS/myApp.module.js"></script> -->
<script type="javascript" src="../JS/myCtrl.js"></script>
<!-- <script type="javascript" src="../JS/myCtrl.component.js"></script> -->


</html>

myApp.js / myApp.module.js: myApp.js / myApp.module.js：

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

myCtrl.js / myCtrl.component.js : myCtrl.js / myCtrl.component.js ：

myApp.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.myColor = "red";
});

// app.directive('myDirective', function() {
//     return {
//         template: '<p><h3>This is a test directive.<h3></p>'
//     };
// });

Finally, here's my folder hierarchy: 最后，这是我的文件夹层次结构：

If what I've done wrong is already evident, there's no need for you to continue reading. 如果我做错了事已经很明显，则无需继续阅读。

Now the commented-out code is important as well. 现在，注释掉的代码也很重要。 These are both the other things I've tried, and what I wanted to implement. 这些都是我尝试过的其他事情，也是我想要实现的。 I have tried: 我努力了：

Re-adding all the angular code back to the head tag to make sure it was still working at all. 将所有角度代码重新添加回head标签，以确保它仍然可以正常工作。 It worked, aside from the directive stuff (which, at point, I believe would have to be part of a separate module, but not the point, nonetheless). 除了指令方面的东西外，它还是有效的（到目前为止，我相信它必须是一个单独模块的一部分，但不是重点）。
Moving the script references, which are, and were, located below the body, to the head. 将位于身体下方的脚本引用移至头部。
Moving the script references to the top of the body. 将脚本引用移至正文顶部。
Moving everything into just *one* file (myApp.module.js). 将所有内容仅移动到一个文件（myApp.module.js）。
Renaming both "myCtrl.component.js" and "myApp.module.js" to "myCtrl.js" and "myApp.js", respectively, to ensure possibly-antiquated angularJS nomenclature wasn't an attribution. 将“ myCtrl.component.js”和“ myApp.module.js”分别重命名为“ myCtrl.js”和“ myApp.js”，以确保不会被视为过时的angularJS命名法。
Adding "type="javascript"" to the script references. 在脚本引用中添加“ type =“ javascript”“。
"Hard refreshing" to make sure old documents weren't cached. “硬刷新”以确保未缓存旧文档。
Tested to see if it was even requesting the files from the server using node. 测试了它是否甚至正在使用node从服务器请求文件。 It doesn't look like it is. 看起来好像不是。

If you need the nodeJS part of it, it's here as well ( index.js ): 如果您需要其中的nodeJS部分，它也位于此处（ index.js ）：

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');

http.createServer(function(req, res) {
    var myUrl = url.parse(req.url);
    var basename = path.basename(myUrl.path);
    console.log('request url: ' + req.url);
    console.log('url path: ' + myUrl.path);
    console.log('basename: ' + basename);
    fs.readFile('../HTML/Home.html', function(err, data) {

        res.writeHead(200, { 'ContentType': 'text/html' });
        res.write(data);
        res.end();

    });
    }).listen(8080);

Answer 1

The problem is in your script tag 问题出在您的脚本标签中

<script type="javascript" src="../JS/myCtrl.js"></script>

It should not be 不应该

      type="javascript"

Either change it to 要么将其更改为

     type="text/javascript"

or remove the type totally. 或完全删除该类型。 Due to incorrect type , it is not loading controller and other js files to browser. 由于类型错误，它不会将控制器和其他js文件加载到浏览器。

AngularJS网页找不到引用的Angular模块或控制器

问题描述

If what I've done wrong is already evident, there's no need for you to continue reading. 如果我做错了事已经很明显，则无需继续阅读。

1 个解决方案

解决方案1
0 2018-04-25 03:01:54

AngularJS网页找不到引用的Angular模块或控制器

问题描述

If what I've done wrong is already evident, there's no need for you to continue reading. 如果我做错了事已经很明显，则无需继续阅读。

1 个解决方案

解决方案1 0 2018-04-25 03:01:54

解决方案1
0 2018-04-25 03:01:54