CODEWITHSUNDEEP
javascripthtmlangularjsnode.js
Skello
Skello

Reputation: 383

AngularJS Webpage Can't Find Referenced Angular Module or Controller

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. What I've found was that when I tried to separate them nothing worked any more.

Here's my code so far:

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

Finally, here's my folder hierarchy:

enter image description here

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:

  1. Re-adding all the angular code back to the head tag to make sure it was still working at all. 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).
  2. Moving the script references, which are, and were, located below the body, to the head.
  3. Moving the script references to the top of the body.
  4. Moving everything into just *one* file (myApp.module.js).
  5. 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.
  6. Adding "type="javascript"" to the script references.
  7. "Hard refreshing" to make sure old documents weren't cached.
  8. Tested to see if it was even requesting the files from the server using node. It doesn't look like it is.

If you need the nodeJS part of it, it's here as well (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);

Upvotes: 0

Views: 48

Answers (1)

sridhar..
sridhar..

Reputation: 2133

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.

Upvotes: 0

Related Questions