1

私は AngularJS の初心者であり、フレームワークがニーズに合っているかどうかをテストするために、単純な webapp をセットアップしようとしています。API リファレンスを読み、チュートリアルを実行しました。残念ながら、パスと場所が $resource で設定および処理される方法は、そこでは十分に説明されていません。

私が直面している問題は、チュートリアルで説明されているように $resource に相対パスを指定すると、常に 404 が返されることです。

これが私のセットアップです：

私はAngularJS の電話猫アプリを複製し、電話関連のものを捨てましたが、その構造を利用して独自のロジックを取り入れました。私の index.html は次のようになります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>testapp</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
</head>
<body ng-app="testapp">
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">Testapp using AngularJS</a>
        </div>
    </div>

    <div ng-view></div>

</body>

最初の問題は、AngularJS が RESTful API に対して oauth する方法について何のアドバイスもしていないようで、彼らのチュートリアルはハードコーディングされた JSON を配信するサーバーの「夢のシナリオ」しか与えていないことでした。 .js を使用して、node.js サーバーが API 呼び出しを処理し、結果の JSON を返すようにします。oauth では成功しましたが、それ以上の API 呼び出しでは機能しません。

これが私のハックです：

StaticServlet.prototype.handleRequest = function(req, res) {
  var self = this;
  var path = ('./' + req.url.pathname).replace('//','/').replace(/%(..)/g, function(match, hex){
    return String.fromCharCode(parseInt(hex, 16));
  });
  var parts = path.split('/');
  if (parts[parts.length-1].charAt(0) === '.')
    return self.sendForbidden_(req, res, path);

  /* Hack for RESTful API calls. */
    var post = '';
    var query = qs.parse(req.url);

    if (req.method === 'POST') {
        var body = '';
        req.on('data', function(data) {
            body += data;
        });
        req.on('end', function () {
            post = JSON.parse(body);
            console.log(post);
            // method name is part of the parameters
            // apiRequests is the module handling the API requests
            apiRequests[post.method](post, res);
        });
    } else if (query.api === 'api') {
        var query = qs.parse(queryString);
        // method name is part of the parameters
        // apiRequests is the module handling the API requests
        apiRequests[query.method](queryString, res);
    } else {
            fs.stat(path, function(err, stat) {
            if (err)
              return self.sendMissing_(req, res, path);
            if (stat.isDirectory())
              return self.sendDirectory_(req, res, path);
            return self.sendFile_(req, res, path);
        });
    }
}

それは本当に醜いハックですが、とにかく。ログイン POST リクエストは oauth 呼び出しに委譲され、API GET リクエストは適切な API リクエスト メソッドに委譲されます。残りは web-server.js が以前行ったのと同じ方法で処理されます。

問題は、handleRequest メソッドが呼び出されないことです。

呼び出しを行うクライアント側のサービス コードは次のとおりです。

return {
        fetchCommunications : function ($scope) {
            var parameters = {
                'api': 'api',
                'method': 'communications',
                'bearer':userData["access_token"],
                'chiffre':userData["chiffre"]
            }
            var resource = {
                r : $resource('communications', {}, {
                    query: {method:'GET', params:parameters}
                })
            }
            var d = resource.r.query();
            console.log("Communications: " + d);
            return d;
}

そして、これはサーバー コンソールからのエラー メッセージです。

GET /app/communications?api=api&bearer=d6a348ea-0fe5-46fb-9b5e-13d3343c368d&chiffre=0000006F&method=communications Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
404 Not Found: /app/communications

これはまさに私が呼び出されることを期待するパスですが、なぜ 404 なのですか?

$resource を次のように構成することで、404 を回避できます。

var resource = {
    r : $resource('index.html#/communications', {}, {
    query: {method:'GET', params:parameters}
})

ハッシュの後のすべてがパスから省略されるため、どちらも機能しません。さらに、パス内に index.html が必要なのはなぜですか?

ここでかなり明白な何かが欠けていると感じているため、かなりばかげたことをしています。アイデアのある人はいますか？これは node.js の構成に関連するものですか (以前にこの問題が発生したことはありません)?

よろしくお願いします！

4

0 に答える 0