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

时间:2018-02-22 08:40:46

标签: javascript angularjs node.js

所以我用这个撞到了墙上:

SERVER.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);
});

那么为什么app.use(express.static(...))部分不起作用呢?我尝试过这样的事情:

CONTROLLE.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

<!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>

但我甚至无法得到console.log("hello")。有帮助吗?如果有人在app.use(express.static...)中没有写server.js而告诉我如何做到这一点,我将不胜感激。或者甚至可以在不添加express.static(或其他任何内容到server.js)的情况下获取结果图?

如何通过将节点server.js写入我的git bash来实现这一点?

2 个答案:

答案 0 :(得分:1)

所以,这是获得你想要的东西的方法。

  1. 将您的HTML文件命名为index.html
  2. 将其放入public目录
  3. 将您的controller.js文件也放在公共目录中
  4. 从index.html中删除<script type="text/javascript" src="../server.js"></script>,您不希望服务器端文件发送到客户端。
  5. 现在,当您访问localhost:port时,您应该自动在浏览器中提供您的index.html文件,并且您必须在服务器端从angularjs控制器手动调用这些API。您调用/polls
  6. 的方式相同

答案 1 :(得分:0)

您需要在express上提供静态文件。为此,打开端口并指定静态文件的目录。

此代码侦听端口(3000)以提供公共目录下的文件。 index.html应该在公共目录中。并且您需要使用标记指定包含angularjs的javascript文件。

gettimeofday