Question

当我运行此服务器时，“/”将运行index.html，但index.html无法访问controller.js，以便使用data.json填充“item”变量。

但是，当我将controller.js复制为index.html中的脚本时，项目变量将填充data.json内容。

在这两种情况下，即使提供了正确的路径，index.html也无法访问css和图像文件。

index.html如何在没有错误的情况下访问单独的controller.js以及其他文件？为什么会这样？如果可能的话，我试图在没有先表达的情况下这样做。任何想法，将不胜感激。

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 ");
    }

加载两个文件的一种方法;但是，如果每个文件都是不同的内容类型（一个html和其他js），这将如何流动？来自：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);
}

如何使用角度1和简单的服务器加载控制器？

0 个答案: