web-dev-qa-db-ja.com

ノードjsを使用してhtmlファイルを実行する方法

次のようにangular 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は初めてです。システムにノードjsサーバーをインストールしましたが、ノードjsを使用して簡単なhtmlファイルを実行する方法がわかりませんか？

javascriptangularjsnode.js
12
Satyadev

組み込みの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ページはURL http://localhost:8080で利用できます

21
JILeXanDR

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

10
Vijaya Simha

Index.htmlをエントリポイントとしてnodejsでWebアプリを実行する必要があるこのようなシナリオにも直面しました。これが私がしたことです：

  • 実行node initアプリのルートで（これによりpackage.jsonファイルが作成されます）
  • アプリのルートにExpressをインストールします：npm install --save express（saveはpackage.jsonを明示的な依存関係で更新します）
  • アプリのルートにパブリックフォルダーを作成し、エントリポイントファイル（index.html）とそのすべての依存ファイルを配置します（これは単純化のためであり、大規模なアプリケーションでは適切なアプローチではない場合があります）。
  • アプリのルートにserver.jsファイルを作成します。ここで、現在のディレクトリからパブリックフォルダーを提供するノードのエクスプレスモジュールを使用します。

  • 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：「8000のサーバー」を出力する必要があります

  • start http：// localhost：8000 / ：index.htmlが呼び出されます

ファイル構造は似たようなものになります

8
TylerDurden

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」を実行します

4
Ved Prakash

最も単純なコマンド：

npx http-server

これには、このコマンドを実行するディレクトリに既存のindex.htmlが必要です。

これは、ヴィジャヤ・シマによってすでに言及されましたが、私はそれを少し短くすると思いました。

0
codepleb

これは、node.jsファイルと同じフォルダーに格納されている単純なhtmlファイル「demo.htm」です。

<!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ファイルを開始すると、メッセージ「Server running at http://127.0.0.1:8081/ 」が表示されます。ブラウザに「 http：// 127.0.0.1:8081/demo.html "。

0
Divyasshree

フレームワークを使用するか、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);
0
Matthias