AngularJS網頁找不到引用的Angular模塊或控制器

Question

抱歉可能要重新發布，但是我不知道該怎么寫。 我也一直在使用該網站來創建一個使用nodeJS的小angularJS網頁，並且我已經開始將角度代碼與視圖或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：

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

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>'
//     };
// });

最后，這是我的文件夾層次結構：

如果我做錯了事已經很明顯，則無需繼續閱讀。

現在，注釋掉的代碼也很重要。 這些都是我嘗試過的其他事情，也是我想要實現的。 我努力了：

將所有角度代碼重新添加回head標簽，以確保它仍然可以正常工作。 除了指令方面的東西外，它還是有效的（到目前為止，我相信它必須是一個單獨模塊的一部分，但不是重點）。
將位於身體下方的腳本引用移至頭部。
將腳本引用移至正文頂部。
將所有內容僅移動到一個文件（myApp.module.js）。
將“ myCtrl.component.js”和“ myApp.module.js”分別重命名為“ myCtrl.js”和“ myApp.js”，以確保不會被視為過時的angularJS命名法。
在腳本引用中添加“ type =“ javascript”“。
“硬刷新”以確保未緩存舊文檔。
測試了它是否甚至正在使用node從服務器請求文件。 看起來好像不是。

如果您需要其中的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

問題出在您的腳本標簽中

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

不應該

      type="javascript"

要么將其更改為

     type="text/javascript"

或完全刪除該類型。 由於類型錯誤，它不會將控制器和其他js文件加載到瀏覽器。

AngularJS網頁找不到引用的Angular模塊或控制器

問題描述

如果我做錯了事已經很明顯，則無需繼續閱讀。

1 個解決方案

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

AngularJS網頁找不到引用的Angular模塊或控制器

問題描述

如果我做錯了事已經很明顯，則無需繼續閱讀。

1 個解決方案

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

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