Question

对不起可能的转发，但我不知道怎么写这个。我一直在使用this website使用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>'
//     };
// });

最后，这是我的文件夹层次结构：

如果我做错了已经很明显，则无需继续阅读。

现在注释掉的代码也很重要。这些都是我尝试过的其他内容，以及我想要实现的内容。我试过了：

将所有角度代码重新添加回头标记，以确保它仍然可以正常工作。除了指令之外，它的工作原理（我相信它必须是一个单独模块的一部分，但不是重点）。
移动脚本引用，它们位于正文下方，并且位于正文下方。
将脚本引用移动到正文顶部。
将所有内容移至* one *文件（myApp.module.js）。
分别将“myCtrl.component.js”和“myApp.module.js”重命名为“myCtrl.js”和“myApp.js”，以确保可能过时的angularJS命名法不属于归属。
将“type =”javascript“”添加到脚本引用。
“硬刷新”以确保旧文档未被缓存。
测试是否甚至使用节点从服务器请求文件。它看起来不像。

如果你需要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网页无法找到引用的角度模块或控制器

如果我做错了已经很明显，则无需继续阅读。

1 个答案: