title: NodeJS: How to load HTML page after GET has returned; Angular.js not being found
body: <p>I am very new to both AngularJS and NodeJS. I am trying to get a basic application running that on page load will make a GET call that returns a JSON structure of customers, and the HTML page will then use AngularJS to display that JSON structure into a table.</p>
  
  <p>I can load my HTML with this in my <code>server.js</code>:</p>
  
  <pre><code>app.get('/', function(req, res) {
      res.sendFile(path.join(__dirname + '/../frontend/app/partials/index.html'));
  });
  </code></pre>
  
  <p>And I can make a GET call to retrieve my JSON data on page load with this in my <code>server.js</code>:</p>
  
  <pre><code>app.get('/', function(req, res) {
      fs.readFile('./testData.json', 'utf8', function(err, data) {
          res.send(data);
      });
  });
  </code></pre>
  
  <p>I want to combine those two so that the GET call returns and then the HTML uses that data. How can I do this?</p>
  
  <p>I am also getting a 404 error in the browser for angular.js. I put the path in my <code>index.html</code> just like all my other JS files. I have it in <code>app.use</code> in my <code>server.js</code>. My other JS files and my CSS file can be found fine, but not angular.js. Does anyone know why this is the case? Here is the error</p>
  
  <p><a href="https://i.stack.imgur.com/U9ns7.jpg" rel="nofollow noreferrer">angular.js not found error</a></p>
  
  <p>Here is my full code:</p>
  
  <p>Server.js:</p>
  
  <pre><code>var path = require('path');
  var express = require('express');
  var fs = require('fs');
  var app = express();
  
  // angular.js gets 404 in browser -- why?
  app.use(express.static(path.join(__dirname, '../frontend/bower_components/angular')));
  // These files load fine (SimpleController.js, main.css)
  app.use(express.static(path.join(__dirname, '../frontend/app')));
  
  // This will load the HTML page
  app.get('/', function(req, res) {
      res.sendFile(path.join(__dirname + '/../frontend/app/partials/index.html'));
  });
  
  // This will return JSON data -- How to combine this with the above GET?
  app.get('/', function (req, res) {
      fs.readFile('./testData.json', 'utf8', function(err, data) {
          if(err) {
              return console.log(err);
          }
          res.send(data);
      });
  });
  
  var server = app.listen(8081, function() {
      var port = server.address().port;                                                                                         
  
      console.log("Server listening on port ", port);
  });
  </code></pre>
  
  <p>SimpleController.js:</p>
  
  <pre><code>var app = angular.module('app', ['']);                                                                                 
  
  app.controller('SimpleController', function ($scope, $http) {
  
      $http.get('/').then(function (response) {
          $scope.customers = response.data;
      });
  
  });
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
       &lt;title&gt;CUSTOMERS&lt;/title&gt;
       &lt;link rel="stylesheet" type="text/css" href="../main.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
       &lt;h1&gt; CUSTOMERS &lt;/h1&gt;
       &lt;div ng-controller="SimpleController"&gt;
          &lt;form&gt;
             &lt;label&gt;First Name:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;Last Name:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;Age:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;Street:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;City:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;State:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;label&gt;Zip:&lt;/label&gt;
                &lt;input type="text" /&gt; &lt;br /&gt;
             &lt;input type="submit" value="Add Customer" /&gt;
          &lt;/form&gt;
  
          &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;table id="customers"&gt;
             &lt;tr&gt;
                &lt;th&gt;First Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
                &lt;th&gt;Street&lt;/th&gt;
                &lt;th&gt;City&lt;/th&gt;
                &lt;th&gt;State&lt;/th&gt;
                &lt;th&gt;Zip&lt;/th&gt;
             &lt;/tr&gt;
             &lt;tr ng-repeat="cust in customers"&gt;
                &lt;td&gt; {{ cust.firstName }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.lastName }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.age }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.address.street }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.address.city }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.address.state }} &lt;/td&gt;
                 &lt;td&gt; {{ cust.address.zip }} &lt;/td&gt;
              &lt;/tr&gt;
           &lt;/table&gt;
        &lt;/div&gt;
        &lt;!-- angular.js gets 404 in browser --&gt;
        &lt;script src="../../bower_components/angular/angular.js"&gt;&lt;/script&gt;
        &lt;!-- this loads fine --&gt;
        &lt;script src="../SimpleController.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE:
  So somehow, my index.html could not find angular.js file. I moved the angular.js file from <code>/src/frontend/bower_components/angular/</code> into <code>/src/frontend/app</code> with the rest of my javascript files. My index.html resides in '<code>/src/frontend/app/partials/</code>. I did this along side what suzo suggested of making a '/' route and '/data' route and then calling '/data' inside my controller.</p>
  
  <p>so my next question is ... why can't index.html read angular.js within the /bower_components directory, but it can read it fine within the /app directory?</p>