CODEWITHSUNDEEP
javascriptjsonangularjsnode.js
Nitin Jain
Nitin Jain

Reputation: 27

How to call Node.js Web API from Angular JS API?

I want to convert the whole of HTML into JADE but ((record.name}} is not working. And hence value cannot be fetched and printed. I'm posting complete files here

Here's my directory view:

enter image description here

Here's my JSON file (customerList.json):

[{"name":"Rohan","add":"Sec 49, Noida"}, 
{"name":"Sam","add":"Sec 63, Noida"},
{"name":"Jack","add":"Sec 15, Noida"}]

Here is my view (index.html)

<!DOCTYPE html>
<html data-ng-app="myApp">

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.0-beta.5/angular.js" data-semver="1.4.0-beta.5" data-require="angular.js@*"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="/js/customerController.js"></script>
    <script src="/js/dataService.js"></script>
    <script src="/json/customerList.json"></script>
  </head>

  <body>
    <div data-ng-controller="CustomerController as vm">
      <table class="table table-striped table-hover">
        <tbody>
          <tr data-ng-repeat="record in vm.data">
            <td>{{record.name}}</td>
            <td>{{record.add}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

Here's my controller (customerController.js):

  (function(){

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

app.controller('CustomerController', CustomerController);

CustomerController.$inject = ["dataService"];

function CustomerController( dataService) {
  var vm = this;

  activate();

    function activate() {
      dataService.GetData()
        .then(function(results) {
          vm.data = results;
        },
          function(error) {})
        .finally(function() {

        });
    }
  }
})();

Here's my Service (dataService.js):

 (function() {
      'use strict';


      angular.module('myApp')
        .factory('dataService', dataService);

      dataService.$inject = ['$q', '$timeout', '$http'];

      function dataService($q, $timeout, $http) {
      var data = [];

      console.log("Number of table entries is: " + data.length);

        var promise = $http.get('customerList.json');
        promise.then(function(response) {
        data = response.data;
        console.log("Number of table entries is now: " + data.length);
        });

        return {
          GetData: getData
        };

        function getData() {

          return $q(function(resolve, reject) {
            $timeout(function() {
              resolve(data);
            }, 3000);

          });

        }
      }
  })();

I've to convert this index.html into index.jade and also this should be a Node.js API with Express.js. But I've done using Angular.js. Kindly help.

I'm getting following error: 

GET http://localhost:3000/js/customerController.js 
localhost/:1 GET http://localhost:3000/js/dataService.js 
localhost/:1 GET http://localhost:3000/json/customerList.json 
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.0-beta.5/$injector/nomod?p0=app
    at REGEX_STRING_REGEXP (https://code.angularjs.org/1.4.0-beta.5/angular.js:68:12)
    at https://code.angularjs.org/1.4.0-beta.5/angular.js:1841:17
    at ensure (https://code.angularjs.org/1.4.0-beta.5/angular.js:1765:38)
    at module (https://code.angularjs.org/1.4.0-beta.5/angular.js:1839:14)
    at https://code.angularjs.org/1.4.0-beta.5/angular.js:4172:22
    at forEach (https://code.angularjs.org/1.4.0-beta.5/angular.js:328:20)
    at loadModules (https://code.angularjs.org/1.4.0-beta.5/angular.js:4156:5)
    at createInjector (https://code.angularjs.org/1.4.0-beta.5/angular.js:4082:11)
    at doBootstrap (https://code.angularjs.org/1.4.0-beta.5/angular.js:1514:20)
    at bootstrap (https://code.angularjs.org/1.4.0-beta.5/angular.js:1535:12)
http://errors.angularjs.org/1.4.0-beta.5/$injector/modulerr?p0=app&p1=Error…0(https%3A%2F%2Fcode.angularjs.org%2F1.4.0-beta.5%2Fangular.js%3A1535%3A12)REGEX_STRING_REGEXP @ angular.js:68(anonymous function) @ angular.js:4195forEach @ angular.js:328loadModules @ angular.js:4156createInjector @ angular.js:4082doBootstrap @ angular.js:1514bootstrap @ angular.js:1535angularInit @ angular.js:1429(anonymous function) @ angular.js:27245n.Callbacks.j @ jquery-2.1.4.min.js:2n.Callbacks.k.fireWith @ jquery-2.1.4.min.js:2n.extend.ready @ jquery-2.1.4.min.js:2I @ jquery-2.1.4.min.js:2

Upvotes: 0

Views: 8772

Answers (1)

Garrett
Garrett

Reputation: 709

Not too sure how you have your node server setup, but I have a small working example here that you can probably integrate into your code:

Server (server.js):

var express = require('express');
var app = express();
var morgan = require('morgan');
var bodyParser = require('body-parser');

app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(morgan('dev'));

app.all('/*', function(request, response, next) {
      response.header("Access-Control-Allow-Origin", "*");
      response.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
      response.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
      if (request.method == 'OPTIONS') {
            response.status(200).end();
      } else {
            next();
      }
});

app.use('/', require('./routes.js'));

app.use(function (error, request, response, next) {
      console.error(error.stack);
      response.status(400).send(error.message);
});

app.set('port', process.env.PORT || 5001);

var server = app.listen(app.get('port'), function() {
  console.log('Node server listening on port ' + server.address().port + ".");
});

Routes (routes.js):

var express = require('express');
var router = express.Router();
var test = require('./test.js');

router.get('/test', test.get);

module.exports = router;

Logic (test.js):

var fs = require('fs');
var path = require('path');

module.exports = {
    get: function(request, response) {
        fs.readFile(path.join(__dirname, './data.json'), 'utf8', function (error, data) {
            if (error) {
                throw error;
            }
            response.send(JSON.parse(data));
        });
    }
}

In your package.json I am assuming you have: 

  "dependencies": {
    "body-parser": "^1.13.2",
    "express": "^4.13.1",
    "morgan": "^1.6.1"
  },

Although you don't need morgan for this to work, it's nice to be able to see your http requests coming through the console for testing.

This solution also assumes you have everything in the root directory and you have your JSON saved in a file called 'data.json', so adjust folder structure and naming as needed. With this, you can just send a GET request to http://localhost:5001/test and you will receive back your JSON data.

Update:

Here is some additional angular code:

First of all, I would suggest some restructure / refactoring of your code. Declare your app separately from your controller. I would suggest using three files: your module (app.js), your controller (customerController.js), and your service (dataService.js).

Module (app.js):

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

Controller (customerController.js):

angular.module('myApp').controller('CustomerController', ['DataService',
    function(DataService) {
          var vm = this;
          activate();

          function activate() {
               DataService.test()
               .then(function(results) {
                    vm.data = results;
               }, function(error) {})
               .finally(function() {

               });
          }
    }
]);

Service (dataService.js):

angular.module('myApp').factory("DataService",[ '$q', '$timeout', '$http',
    function($q, $timeout, $http) {
        return {
            test: function() {
                return $http({
                    url: 'test',
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).success(function(data, status, headers, config) {
                    console.log("Success!");
                    return data;
                }).error(function(data, status, headers, config) {
                    console.log("Error.");
                });
            }
        };
    }
]);

Include these files in this order:

<script src="/js/app.js"></script>
<script src="/js/customerController.js"></script>
<script src="/js/dataService.json"></script>

Also, do not include script files in your head tags, include them at the very bottom of your body. If you include them in the head, then they will prevent your page from rendering until they have fully loaded.

Upvotes: 3

Related Questions