0

When I run this server, “/“ will run index.html, but index.html cannot reach controller.js in order to populate the 'item' variables using data.json.

However, when I copy controller.js as a script inside index.html, the item variables are populated with the data.json contents.

In both cases, index.html cannot access the css and image files, even though the right path is supplied.

How can index.html access a seperate controller.js as well as the other files without error? Why is this happening? I’m trying to do this without express first, if it's possible. Any ideas would be appreciated.

JS/CONTROLLER.JS

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

myApp.controller("MyController", function MyController($scope, $http) {
$http.get('/api').success(function(data) {
    $scope.artists = data; 
})
})

INDEX.HTML

<!doctype html>
<html leng="en" ng-app="myApp">
  <head>
  <meta charset="UTF-8">
<title>My AngularJS App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <script src="js/controller.js"></script>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h2> Welcome {{name}} </h2>
  <div ng-controller = "MyController">
      <ul class="artistlist">
          <li class="artist cf" ng-repeat="item in artists">
              <img ng-src="public/images/{{item.shortname}}_tn.jpg" alt="photo of {{item.name}}">
              <div class = "info">
                  <h2> {{item.name}} </h2>
                  <h2> {{item.reknown}}</h2>
              </div>
          </li>
      </ul>
  </div>
  </div>
</body>
</html>

DATA.JSON

[
{
  "name":"Barot Bellingham",
  "shortname":"Barot_Bellingham",
  "reknown":"Royal Academy of Painting and Sculpture"
},
{
  "name":"Jonathan G. Ferrar II",
  "shortname":"Jonathan_Ferrar",
  "reknown":"Artist to Watch in 2012"
} … ]

SERVER.JS

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

var server = http.createServer(handleRequest);

var PORT = 3000;
server.listen (PORT, function() {
    console.log("listening on ", PORT)
})

function handleRequest(req, res) {

      var urlParts = url.parse(req.url);

      switch (urlParts.pathname) {
        case "/":
          index(urlParts.pathname, req, res);
          break;
        case "/api":
          api(urlParts.pathname, req, res);
          break;
        default:
          display404(urlParts.pathname, req, res);
      }
    }

    function index(url, req, res){
        fs.readFile("./index.html", "UTF-8", function(err, html) {
            res.writeHead(200, {"Content-Type": "text/html"});
            res.end(html);
        });
    }

    function api(url, req, res) {
        fs.readFile("./data.json", "utf8", function(err, data) {
            res.writeHead(200, {"Content-Type": "text/json"});
            res.end(data)            
        });
    }

    function display404(url, req, res) {
      res.writeHead(404, {
        "Content-Type": "text/html"
      });
      res.write("<h1>404 Not Found </h1>");
      res.end("The page you were looking for: " + url + " can not be found ");
    }

One way of loading two files; however, how would this flow if each file were of a different content-type (one html, and the other js)? from: LINK

function css(response) {
response.writeHead(200, {"Content-Type": "text/css"});

var count = 0;
var handler = function(error, content){
  count++;
if (error){
  console.log(error);
}
else{
  response.write(content);
}

if (count == 2) {
  response.end();
}
}

fs.readFile('css/bootstrap.css', handler);
fs.readFile('css/bootstrap-responsive.css', handler);
}
mac
  • 318
  • 4
  • 16
  • Well, read your server: it serves index.html on /, data.json on /api, and returns a 404 for everything else. So how could the browser download a JS file, since the server doesn't serve it? – JB Nizet Sep 12 '17 at 16:34
  • Are you suggesting I serve controller.js from server.js alongside index.html? – mac Sep 12 '17 at 16:47
  • Well, yes, of course. .js files need to be downloaded by the browser, over http, too. So if the server doesn't serve the JS files, the browser can't download them. – JB Nizet Sep 12 '17 at 16:49
  • what is the easiest way to do this with the present script? would I include a second fs.readFile line along side the first, or some variation of this? Is it possible to list the files in the single line, or pass in a variable that contains such a list? – mac Sep 12 '17 at 16:58
  • I don't use NodeJS to write servers. But I guess using something a bit more sophisticated like expressjs would allow serving all your static resources without having to write a new case in your switch and a new function to handle the new file. https://expressjs.com/en/starter/static-files.html – JB Nizet Sep 12 '17 at 17:01
  • Thanks - I'll take a look at express then. I did find a link (edited into the question) that shows a way of serving two files, but the example shows two files of the same rather than of different content-types. I'm wondering if this would be on the right track for a non-express solution. – mac Sep 12 '17 at 17:32

0 Answers0