Node.js/Express/AngularアプリケーションのYelpへの外部API呼び出しの作成方法

Question

Node.jsアプリケーションでYelpへのAPI呼び出しをしようとしています。 Yelp APIを使用できるようにするために、このコードを使用する必要があることがわかりました。https://arian.io/how-to-use-yelps-api-with-node/私はapp.jsファイルでそのコードを使用しました。今度は結果をブラウザに表示するために、コントローラをビュー（私の場合はindex.html）に接続し、2つのファイルを$ scopeでバインドする必要があることを知っています。しかし、私は何とかコントローラーをapp.jsに接続する必要があります。私はarian.ioに続くチュートリアルは言った：あなたは、関数request_yelp（パラメータ、コールバック）を呼び出した場合

は、今では、コールバック（エラー、レスポンス、ボディ）、これらの引数にコールバックを呼び出します。 これで、YelpのAPIを最大限に活用できるようになりました。

ただし、どのようにしてその関数を呼び出しますか？私は私のコントローラでそれをやっていると仮定しますが、私はそれを試みましたが、動作しませんでした。

私の問題を要約すると、APIコールが正しい場合には、それはどこにあるのですか？次のステップはコントローラとリンクすることです。これら2つが接続されると、htmlをapiController.jsデータの結果をブラウザに表示するには、$ scopeを使用してください。私はたくさんのことを逃していることを知っていますが、私は正しいアイデアを持っていると思います。

助けを歓迎します。ありがとう！

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

まず第一に、私は私があなたの質問に答えるためにしようとする前に、一連の観察をするつもりです。

app.jsファイルが多すぎるようです。 1ページのアプリケーションを作成したいと思っていますが、いくつかの構造が役に立ちます。 app.jsファイルでアプリケーションのブートストラップロジックを処理させるといいでしょう。それはあなたが任意の外部API呼び出しの作成だけでなく、あなたのデータベースへの保存を処理し、コントローラを持っている必要があり

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

をあなたのデータベースに接続し、あなたの特急サーバーを発射されます。コントローラーファイルは、何らかの方法でAPI呼び出しを行う場所です。

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

あなたのコントローラを設定した後、あなたがそうのように、ルート上の機能を公開する必要があります。

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

次に角度にあなたはへの呼び出しを行うサービスを作成する必要がありますルートセグメントをバックエンドに追加し、応答を返します。あなたはあなたのコントローラにサービスを注入し、あなたのページでコントローラを利用できるようにしますが、より便利です。

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

その後、あなたのビューに、あなたはController as構文を使用してコントローラをロードすることができます。