Wie externe API-Aufruf an Yelp in Node.js/Express/Angular-App

Question

Ich versuche, eine API-Aufruf an Yelp in meiner Node.js App. Ich sah von hier aus, dass ich diesen Code verwenden sollte, um die Yelp-API verwenden zu können: https://arian.io/how-to-use-yelps-api-with-node/. Ich habe diesen Code in meiner app.js-Datei verwendet. Nun, damit es die Ergebnisse im Browser anzeigt, weiß ich, dass ich den Controller mit der Ansicht verbinden muss (in meinem Fall index.html) und die beiden Dateien mit $ scope binden muss. Aber ich würde auch irgendwie den Controller mit app.js verbinden müssen. Das Tutorial, das ich auf arian.io gefolgt sagte:

Nun, wenn Sie die Funktion request_yelp (params, Rückruf) nennen es den Rückruf mit diesen Argumenten aufrufen, Rückruf (Fehler, Antwort, Körper). Das ist es, jetzt sind Sie bereit, die API von Yelp vollständig zu nutzen.

aber wie oder wo nenne ich diese Funktion? Ich nehme an, ich würde es in meinem Controller tun, aber ich habe es versucht, aber es hat nicht funktioniert.

Um mein Problem zusammenzufassen, wenn der API-Aufruf richtig ist und es ist, wo es sein sollte, dann ist mein nächster Schritt, dies mit meinem Controller zu verknüpfen, sobald diese beiden verbunden sind, muss ich HTML mit apiController.js binden mit $ scope, um meine Datenergebnisse im Browser anzeigen zu lassen. Ich weiß, ich vermisse viele Dinge, aber ich denke, ich habe die richtige Idee.

Jede Hilfe ist willkommen. Vielen Dank!

My app's tree 
 

 
>.git 
 
>bower_components 
 
>client 
 
    >controllers 
 
     -apiControllers (My one and only controller) 
 
    >css 
 
    >views    (This is empty) 
 
    app.js 
 
    index.html (This is my one and only page/ my app is a one page app) 
 
    package.json 
 
>models 
 
>node_modules 
 
app.js (This is where I am trying to make the API call) 
 

 

 
<-- ================================================== --> 
 

 
//This is my app.js file 
 

 

 
    //Call packages needed 
 
    var express = require('express'); 
 
    var app = express();     
 
    var bodyParser = require('body-parser'); 
 
    var mongoose = require('mongoose'); 
 
    var dotenv = require('dotenv').config(); 
 
    var oauthSignature = require('oauth-signature'); 
 
    var n = require('nonce')(); 
 
    var request = require('request'); 
 
    var qs = require('querystring'); 
 
    var _ = require('lodash'); 
 

 
    // Function for yelp call 
 
    var request_yelp = function(set_parameters, callback) { 
 

 
     var httpMethod = 'GET'; 
 

 
     var url = 'http://api.yelp.com/v2/search'; 
 

 
     var default_parameters = { 
 
     location: 'New+York', 
 
     sort: '2' 
 
     }; 
 

 
     var required_parameters = { 
 
     oauth_consumer_key : process.env.yelp_consumer_key, 
 
     oauth_token : process.env.yelp_token, 
 
     oauth_nonce : n(), 
 
     oauth_timestamp : n().toString().substr(0,10), 
 
     oauth_signature_method : 'HMAC-SHA1', 
 
     oauth_version : '1.0' 
 
     }; 
 

 
     var parameters = _.assign(default_parameters, set_parameters, required_parameters); 
 

 
     var consumerSecret = process.env.yelp_consumer_secret; 
 
     var tokenSecret = process.env.yelp_token_secret; 
 

 
     var signature = oauthSignature.generate(httpMethod, url, parameters, consumerSecret, tokenSecret, { encodeSignature: false}); 
 

 
     parameters.oauth_signature = signature; 
 

 
     var paramURL = qs.stringify(parameters); 
 

 
     var apiURL = url+'?'+paramURL; 
 

 
     request(apiURL, function(error, response, body){ 
 
     return callback(error, response, body); 
 
     }); 
 

 
    }; 
 

 
    app.use(express.static(__dirname+'/client')); 
 

 
    app.get('/', function request_yelp(params, callback){ 
 
     res.send('This is the main page'); 
 
    }); 
 

 
    app.listen(3000); 
 
    console.log('Running on port 3000'); 
 

 

 
<-- ================================================== --> 
 
<!-- This is index.html. Here I would like to display my YELP responses. I am using Bootstrap 
 

 
<div class="container-fluid"> 
 
    <div class="row-fluid"> 
 
     <!-- <div class="container-fluid"> --> 
 
     <!-- <div class="jumbotron"> --> 
 
        <div class="row-fluid"> 
 
         <!-- <div ng-controller="MainCtrl"> --> 
 
          <p><date-input name="info.name" message="info.message"></date-input></p> 
 
       <div data-ng-repeat="business in businesses"> 
 
          <!-- <div class="col-lg-offset-1"> --> 
 
          <div class="col-lg-2 col-lg-offset-2 col-md-3 col-sm-2 col-xs-6 text-center"> 
 
            <p>Breakfast</p> 
 
           <div class="thumbnail"> 
 
            <img class="img-responsive img-circle" src="{{business.image_url}}"> 
 
            <h5>{{business.name}}</h5> 
 
            <h5>{{business.rating}}</h5> 
 
            <h5>"{{business.snippet_text}}"</h5> 
 
            <h5>{{business.categories[0]}}</h5> 
 
            <p><a class="btn btn-link btn-sm" href="{{business.url}}">View details &raquo;</a></p> 
 
            <p><a class="btn btn-xs btn-info" id="breakfast" role="button" onClick="refreshPage()">I don't like this one!</a></p> 
 
           </div><!-- End thumbnail --> 
 
          </div><!-- End col-md-4 --> 
 

 

 
<-- ================================================== --> 
 

 
// Finally this is my apiController.js. What code do I need here to connect the API call to my view? 
 

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

 
myApp.controller('MainCtrl', ['$scope'function($scope) { 
 
    $scope.total = []; 
 
    $scope.businesses = []; 
 

 
}])

Answer 1

Zunächst einmal, ich werde eine Reihe von Beobachtungen machen, bevor ich Ihre Frage zu beantworten versuchen.

Ihre app.js Datei scheint zu viel zu tun. Ich verstehe, dass Sie eine einzelne Seite App erstellen möchten, aber einige Struktur könnte helfen. Es wird nett sein, wenn Sie Ihre app.js Datei behandeln die Anwendung Bootstrapping-Logik. Das ist eine Verbindung zu Ihrer Datenbank und Brennen Ihrer ausdrücklichen Server

var express = require('express'), 
    routes = require('./routes'), 
    app = express(); 

    /*load application middleware here */ 

    /*Connect to databse, if needed */ 

    /* load routes */ 
    routes(app) 

    /*Fire up the server */ 
    app.listen(3000, function(){ 
     console.log('Server listening on port 3000'); 
    }); 

Sie benötigen einen Controller haben, der die Herstellung von einem externen API behandelt Anrufe sowie auf Ihre Datenbank zu speichern. Die Controller-Datei ist der Ort, an dem Sie Ihren API-Aufruf in einer Art von Methode ausführen.

module.exports = { 
     makeApiCall: function(req, res) { 
      /* return response after call */ 
     } 
    } 

Nachdem Sie Ihre Controller einrichten, müssen Sie die Funktionalität auf einer Route belichten, etwa so:

var controller = require('./controller'); 
    module.exports = function(){ 
     app.get('routes/segment', controller.method); 
     /* load more routes if any */ 
    } 

Dann in Winkel Sie einen Dienst erstellen müssen, die einen Aufruf an die macht Routensegment auf Ihrem Backend und gibt die Antwort zurück. Sie werden den Service in Ihren Controller injizieren und den Controller auf Ihrer Seite verfügbar machen, ist jedoch für Sie bequemer.

Ex. Filename.service.js

angular.module('MyModule') 
    .service('ServiceName', ['$http', 'anotherDependency', ServiceFunction]); 

function serviceFunction ($http, anotherDependency) { 
    return { 
     $http.get('route/segment').then(function (res) { 
      /*return response, promises are better */ 
     }, function (err) { 
      /* Return error if any */ 
     }); 
    } 
} 

FileName.controller.js

angular.module('MyModule') 
    .controller('MyController', ['ServiceName', ControllerFunction]); 

    function controllerFunction(ServiceName){ 
     var vm = this; 
     ServiceName.makeCall().then(function (res){ 
     //set result on vm to make it accessible on your view. 
     }).catch(function (err)) { 
     //report error if any 
     } 
    } 

Dann auf Ihrer Ansicht nach können Sie den Controller mit der Controller as Syntax laden.