javascript - 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 plete files here

Here's my directory view:

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=".1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src=".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.
.4.0-beta.5/$injector/nomod?p0=app
    at REGEX_STRING_REGEXP (.4.0-beta.5/angular.js:68:12)
    at .4.0-beta.5/angular.js:1841:17
    at ensure (.4.0-beta.5/angular.js:1765:38)
    at module (.4.0-beta.5/angular.js:1839:14)
    at .4.0-beta.5/angular.js:4172:22
    at forEach (.4.0-beta.5/angular.js:328:20)
    at loadModules (.4.0-beta.5/angular.js:4156:5)
    at createInjector (.4.0-beta.5/angular.js:4082:11)
    at doBootstrap (.4.0-beta.5/angular.js:1514:20)
    at bootstrap (.4.0-beta.5/angular.js:1535:12)
.4.0-beta.5/$injector/modulerr?p0=app&p1=Error…0(https%3A%2F%2Fcode.angularjs%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

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 plete files here

Here's my directory view:

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./jquery-2.1.4.min.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="https://code.angularjs/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/1.4.0-beta.5/$injector/nomod?p0=app
    at REGEX_STRING_REGEXP (https://code.angularjs/1.4.0-beta.5/angular.js:68:12)
    at https://code.angularjs/1.4.0-beta.5/angular.js:1841:17
    at ensure (https://code.angularjs/1.4.0-beta.5/angular.js:1765:38)
    at module (https://code.angularjs/1.4.0-beta.5/angular.js:1839:14)
    at https://code.angularjs/1.4.0-beta.5/angular.js:4172:22
    at forEach (https://code.angularjs/1.4.0-beta.5/angular.js:328:20)
    at loadModules (https://code.angularjs/1.4.0-beta.5/angular.js:4156:5)
    at createInjector (https://code.angularjs/1.4.0-beta.5/angular.js:4082:11)
    at doBootstrap (https://code.angularjs/1.4.0-beta.5/angular.js:1514:20)
    at bootstrap (https://code.angularjs/1.4.0-beta.5/angular.js:1535:12)
http://errors.angularjs/1.4.0-beta.5/$injector/modulerr?p0=app&p1=Error…0(https%3A%2F%2Fcode.angularjs%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

Share Improve this question edited Dec 12, 2016 at 8:38 Smita Ahinave 1,8887 gold badges26 silver badges42 bronze badges asked Oct 10, 2015 at 17:00 Nitin Jain 272 silver badges5 bronze badges

Try restify this is good framework for node.js for the start :-) – Człowiek Fin Śpiewak Commented Oct 10, 2015 at 17:04
I'm not sure I understand. Do you have a Node server running? Are you using a web framework like Express? – azium Commented Oct 10, 2015 at 17:11
Yes. I'm using express.js and my node.js service is running – Nitin Jain Commented Oct 11, 2015 at 3:28
Can you post your node.js code? The backend of your server? – whatoncewaslost Commented Oct 11, 2015 at 4:59
@NitinJain Did the below answer help? – Garrett Commented Oct 11, 2015 at 20:10

| Show 8 more ments

1 Answer 1

Sorted by: Reset to default 3

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to call Node.js Web API from Angular JS API? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)