简体   繁体   English

如何将前端(angularjs)写入后端(nodejs)?

[英]How to write frontend (angularjs) to backend (nodejs)?

So I'm hitting my head against the wall with this:所以我把头撞在墙上:

SERVER.JS服务端JS

const express = require('express');
const app = express();
//const app = require('express')();
const cors = require('cors')
const bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));
//Enable CORS
app.use(cors());

const polls = [
  {
   ... 
  }
];

//Enable CORS
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.use(bodyParser.json());

app.get('/polls', (req, res) => {
  let result = {polls:polls.map(function(p){
    return {id: p.id, title: p.title};
  })};
  res.json(result);
});


app.get('/polls/:id', (req, res) => {
  let id = req.params.id-1;
  res.json(polls[id]);
});

const port = process.env.PORT ? process.env.PORT : 8081;
const server = app.listen(port, () => {
  console.log("Server listening  port %s", port);
});

So why isn't the part app.use(express.static(...)) not working?那么为什么app.use(express.static(...))不起作用? I've tried something like this:我试过这样的事情:

CONTROLLE.JS控件.JS

var app = angular.module('app',[]);

app.controller('AppCtrl',['$scope','$http',function($scope,$http) {
  console.log("hello");


  var polls = function() {
    $http.get('/polls').then(function(response) {
      $scope.result = response;
    });
  };
}]);

index.html索引.html

<!DOCTYPE>
<html>
<head>
  <title>myapp</title>
  <meta
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script type="text/javascript" src="../server.js"></script>
  <script type="text/javascript" src="controller.js"></script>
  <script>
  </script>
</head>
<body>
  <div ng-app="app" ng-controller="AppCtrl">
  </div>
</body>
</html>

But I can't even get the console.log("hello") out.但我什至无法得到console.log("hello") Any help?有什么帮助吗? I would appreciate if someone would tell me how to do this without writing the app.use(express.static...) in the server.js .如果有人能告诉我如何在不编写app.use(express.static...)server.js做到这一点,我将不胜感激。 Or is it even possible to get the result-map out without adding the express.static (or anything else to the server.js )?或者甚至可以在不添加express.static (或其他任何内容到server.js )的情况下获取结果映射?

And how can I get this working by just writing node server.js to my git bash?我怎样才能通过将 node server.js写入我的 git bash 来server.js工作?

So, this is the way to get what you want.所以,这是获得你想要的东西的方式。

  1. Name your HTML file as index.html将您的 HTML 文件命名为index.html
  2. Put it in public directory放到public目录
  3. Place your controller.js file in public directory as well将您的controller.js文件也放在 public 目录中
  4. Remove <script type="text/javascript" src="../server.js"></script> from index.html you don't want your server side file to client.从 index.html 中删除<script type="text/javascript" src="../server.js"></script>你不希望你的服务器端文件到客户端。
  5. Now when you'll access localhost:port you should get your index.html file served in browser automatically and you'll have to call those APIs on your serverside manually from angularjs controller in the same way you are calling /polls现在,当您访问localhost:port您应该在浏览器中自动获取index.html文件,并且您必须以与调用/polls相同的方式从 angularjs 控制器手动调用服务器端的这些 API

You need to serve your static files on express.您需要在 express 上提供静态文件。 For this open the port and specify directory of your static files.为此,打开端口并指定静态文件的目录。

This code listens the port(3000) to serve files which under public directory.此代码侦听端口(3000)以提供公共目录下的文件。 index.html should be in public directory. index.html 应该在公共目录中。 And you need to specify your javascript file which includes angularjs using tags.并且您需要使用标签指定包含 angularjs 的 javascript 文件。

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

// Define the port to run on
app.set('port', 3000);

// Listen for requests
let server = app.listen(app.get('port'), onHttpConnection);

function onHttpConnection(req, res){
    console.log("starting on " + server.address().port);
}
app.use(express.static('public'));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM