How to write frontend (angularjs) to backend (nodejs)?

Question

So I'm hitting my head against the wall with this:

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

So why isn't the part app.use(express.static(...)) not working? I've tried something like this:

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>

But I can't even get the console.log("hello") out. 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. Or is it even possible to get the result-map out without adding the express.static (or anything else to the server.js)?

And how can I get this working by just writing node server.js to my git bash?

I mean, you need to start your server to serve files etc. Something like app.listen(3000, () => console.log('Example app listening on port 3000!')) — Muhammad Usman
– Muhammad Usman, Commented Feb 22, 2018 at 8:57
Good. How are you accessing your server in browser ? to see the output you want ? — Muhammad Usman
– Muhammad Usman, Commented Feb 22, 2018 at 9:10

Muhammad Usman · Accepted Answer · 2018-02-22 09:25:58Z

1

So, this is the way to get what you want.

Name your HTML file as index.html
Put it in public directory
Place your controller.js file in public directory as well
Remove <script type="text/javascript" src="../server.js"></script> from index.html you don't want your server side file to client.
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

answered Feb 22, 2018 at 9:25

Muhammad Usman

10.1k26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BlackOwl Over a year ago

Hi! Thanks for your answer! Now I can see the html and controller.js files in the localhost:port/8081. But how can I get the html to be visible in the localhost:port/8081/polls?

BlackOwl Over a year ago

Hi! I still don't get it. I tried using routers and all, but should I use them?

Ahmet Can Kepenek · Accepted Answer · 2018-02-22 09:07:22Z

0

You need to serve your static files on 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. index.html should be in public directory. And you need to specify your javascript file which includes angularjs using tags.

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'));

answered Feb 22, 2018 at 9:07

Ahmet Can Kepenek

11 bronze badge

1 Comment

BlackOwl Over a year ago

Hi! I just added a snippet of code to the end, where the port is set. The problem is that I can't edit the server.js.

Collectives™ on Stack Overflow

How to write frontend (angularjs) to backend (nodejs)?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related