Question

我有一个带角度js的简单html页面如下：

    //Application name
    var app = angular.module("myTmoApppdl", []);

    app.controller("myCtrl", function ($scope) {
        //Sample login function
        $scope.signin = function () {
            var formData =
                    {
                        email: $scope.email,
                        password: $scope.password
                    };
        console.log("Form data is:" + JSON.stringify(formData));
    };
});

HTML文件：

<html>
    <head>
        <link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
    </head>

    <body ng-app="myTmoApppdl" ng-controller="myCtrl">
        <div class="container">
            <div class="form-group">
                <form class="form" role="form" method="post" ng-submit="signin()">
                    <div class="form-group col-md-6">
                        <label class="">Email address</label>
                        <input type="email" class="form-control" ng-model="email" id="exampleInputEmail2" placeholder="Email address" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label class="">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword2" ng-model="password" placeholder="Password" required>
                    </div>
                </form>
                <button type="submit" class="btn btn-primary btn-block">Sign in</button>
            </div>
        </div>
    </body>

    <script src="angular.min.js" type="text/javascript"></script>

    <!--User defined JS files-->
    <script src="app.js" type="text/javascript"></script>
    <script src="jsonParsingService.js" type="text/javascript"></script>
</html>

我是节点js的新手。我在我的系统中安装了node js server但是我不确定如何使用node js运行一个简单的html文件？

Answer 1

您可以使用内置的nodejs Web服务器。

例如，添加文件server.js并输入以下代码：

var http = require('http');
var fs = require('fs');

const PORT=8080; 

fs.readFile('./index.html', function (err, html) {

    if (err) throw err;    

    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(PORT);
});

在使用命令node server.js从控制台启动服务器之后。您的index.html页面将在网址http://localhost:8080

上提供

Answer 2

只需在全球范围内安装 http-server

npm install -g http-server

无论你需要运行html文件，都要运行命令http-server 例如：您的html文件位于/home/project/index.html中你可以做/home/project/$ http-server

这会为您提供访问您网页的链接： http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.106:8080

Answer 3

我也遇到过这种情况，我必须在nodejs中运行一个web应用程序，其中index.html是入口点。这是我做的：

在app的根目录中运行node init（这将创建一个package.json文件）
在app的根目录中安装express：npm install --save express（保存会以明确的依赖关系更新package.json）
在你的应用程序的根目录中创建一个公共文件夹并放入你的入口点文件（index.html）及其所有相关文件（这只是为了简化，在大型应用程序中这可能不是一个好方法）。
在app的根目录中创建一个 server.js 文件，我们将在其中使用节点的express模块，该模块将从当前目录提供公共文件夹。

server.js

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public')); //__dir and not _dir
var port = 8000; // you can use any port
app.listen(port);
console.log('server on' + port);

执行node server：它应该输出＆＃34;服务器在8000＆＃34;
开始http://localhost:8000/：您的index.html将被调用

File Structure would be something similar

Answer 4

为了通过 Node JS 项目部署 html 页面，例如部署一个 Angular 构建文件，其中所有请求都需要重定向到 index.html，在这种情况下，我们可以使用 node js 的通配符路由来为 Angular 项目提供服务，但我们需要确保 Angular 路由和 Node js API 路由没有命名冲突。

app.js

//Angular App Hosting Production Build
app.use(express.static(__dirname + '/dist/ShoppingCart'));

// For all GET requests, send back index.html (PathLocationStrategy) (Refresh Error)
app.get('*', (req,res) => {
  res.sendFile(path.join(__dirname, '/dist/ShoppingCart/index.html'));
});

Answer 5

要么使用框架，要么使用nodejs编写自己的服务器。

简单的文件服务器可能如下所示：

import * as http from 'http';
import * as url from 'url';
import * as fs from 'fs';
import * as path from 'path';

var mimeTypes = {
     "html": "text/html",
     "jpeg": "image/jpeg",
     "jpg": "image/jpeg",
     "png": "image/png",
     "js": "text/javascript",
     "css": "text/css"};

http.createServer((request, response)=>{
    var pathname = url.parse(request.url).pathname;
    var filename : string;
    if(pathname === "/"){
        filename = "index.html";
    }
    else
        filename = path.join(process.cwd(), pathname);

    try{
        fs.accessSync(filename, fs.F_OK);
        var fileStream = fs.createReadStream(filename);
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        response.writeHead(200, {'Content-Type':mimeType});
        fileStream.pipe(response);
    }
    catch(e) {
            console.log('File not exists: ' + filename);
            response.writeHead(404, {'Content-Type': 'text/plain'});
            response.write('404 Not Found\n');
            response.end();
            return;
    }
    return;
    }
}).listen(5000);

Answer 6

这是一个简单的html文件“demo.htm”，存储在与node.js文件相同的文件夹中。

<!DOCTYPE html>
<html>
  <body>
    <h1>Heading</h1>
    <p>Paragraph.</p>
  </body>
</html>

以下是调用此html文件的node.js文件。

var http = require('http');
var fs = require('fs');

var server = http.createServer(function(req, resp){
  // Print the name of the file for which request is made.
  console.log("Request for demo file received.");
  fs.readFile("Documents/nodejs/demo.html",function(error, data){
    if (error) {
      resp.writeHead(404);
      resp.write('Contents you are looking for-not found');
      resp.end();
    }  else {
      resp.writeHead(200, {
        'Content-Type': 'text/html'
      });
      resp.write(data.toString());
      resp.end();
    }
  });
});

server.listen(8081, '127.0.0.1');

console.log('Server running at http://127.0.0.1:8081/');

在命令提示符和消息中启动上述nodejs文件显示“在http://127.0.0.1:8081/运行的服务器”。现在在您的浏览器中输入“http://127.0.0.1:8081/demo.html”。

Answer 7

将HTML文件移动到文件夹“ www”中。用代码创建文件“ server.js”：

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/www'));

app.listen('3000');
console.log('working on 3000');

创建文件后，运行命令“ node server.js”

Answer 8

到目前为止最简单的命令：

npx http-server

这需要在执行此命令的目录中已有一个index.html。

Vijaya Simha已经提到了这一点，但我想我把它缩短一点。

文档：https://www.npmjs.com/package/http-server

Answer 9

http访问并获取在8080上投放的html文件：

>npm install -g http-server

>http-server

如果有公用（./public/index.html）文件夹，它将成为服务器的根目录，否则将成为您运行服务器的根目录。您可以将文件夹作为paramenter发送，例如：

http-server [path] [options]

预期结果：

*>启动http服务器，为./public提供服务。

http：// LOCALIP：8080

http://127.0.0.1:8080

按CTRL-C停止服务器

http服务器已停止。*

现在，您可以运行： http：// localhost：8080

将在./public文件夹中打开index.html

引用：https://www.npmjs.com/package/http-server

如何使用节点js运行html文件

9 个答案: