3

私は Web 開発とはまったく関係のないバックグラウンドを持っていますが、mean.js が勢いを増しているのを見て、ぜひ試してみたいと思いました。

私はオンラインでチュートリアルに従ってきたので、基本的にサンプルアプリを開始、実行、変更しましたが、現在はチュートリアルから外れた何かをしようとしています. その結果、エクスプレスと角度の基本的な理解が得られました

Activator npm パッケージ ( https://www.npmjs.org/package/activator ) をアプリに統合しようとしましたが、Angular Bits にうまく収まりましたが、プラグインに問題があります。エクスプレスビット。これは非常に根本的な疑問、つまり私が実際に見つけることができなかった答えに私を導きます。Mean では、Angular コードは Express で作成された REST API を使用して Express コードに接続することを知っています。そして、それは角度のあるサービスを使用して起こると私は信じています。しかし、私は方法を理解していません。たとえば、 users モジュールには次のサービスが定義されています。

angular.module('users').factory('Users', ['$resource',
    function($resource) {
        return $resource('users', {}, {
            update: {
                method: 'PUT'
            }
        });
    }
]);

誰でもこれがどのように機能するか説明できますか?

また、エクスプレス側にコードがある場合は、次のように言います。

var sayHello = function(name){
 return "Hello"+name;
}

これをAngularで呼び出すにはどうすればよいですか? $resource を ngResource モジュールから使用していることは知っていますが、その方法がよくわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

6

これらを一緒に接続すると、少し混乱する可能性があります。理解しておくべきことは、サーバー側で Express を使用する場合、ルートを中心に API をモデル化し、渡されるreqおよびオブジェクトとの通信を処理する必要があるということです。res

最初にクライアント側で簡単な例を挙げますが、私は通常、$resource心配したくない HTTP/ajax の詳細をラップする方法として を使用します。したがって、サービスを次のように記述します。

"use strict";

angular.module("myModule").factory("UserService", ["$resource",
    function($resource) {
        var resource;

        resource = $resource("/api/users", null, {
            listUsers: {
                method: "GET",
                isArray: true
            }
        });

        return resource;
    }
]);

(ユーザーの配列が返されることを期待しているため、このリソースにパラメーターを渡していることに注意してisArrayください。これは、すべての API で常にそうであるとは限りません)。

次に、そのリソースを利用するために、おそらくコントローラーで次のようなコードを作成します。

"use strict";

angular.module("myModule").controller("UserCtrl", ["$scope", "UserService",
    function($scope, userService) {

        $scope.loadUsers = function() {
            userService.listUsers(function(resource, headers) {
                // this function is called on success, with the result
                // stored within the `resource` variable

                // ...

            }, function(response) {
                // this function is called on error

                // ...

            });
        };
    }
]);

サーバー側ですべてがうまくいっていると仮定すると、最初の関数に渡されたユーザーのリストをresource.

サーバー側では、ユーザーAPIとして機能するユーザーコントローラーを含めるようにルートを構成する必要があります（構成されている場所はどこでも）。したがって、おそらくこのアプリ内には、routesすべての Express ルートを含むディレクトリがあります (Express ルートの詳細については、app.route のドキュメントを参照してください)。またcontrollers、ルートのロジックを処理するすべての Express コントローラーを含むディレクトリもあります。「users」の例に沿って、/api/users $resource上記の Angular コードで定義したルートと一致するルートを定義します。

"use strict";

var controller = require("../controllers/user");

module.exports = function(app) {
    app.route("/api/users").get(controller.listUsers);
};

このコードは Expressappを入力として受け取り、単一のルートをHTTP リクエストとして定義します (呼び出される関数に注目して/api/usersください)。このルートのロジックは、ユーザー コントローラーで次のように定義されます。GET.get

"use strict";

exports.listUsers = function(req, res) {
    var users;

    // ...somehow populate the users to return...

    res.send(users);
};

ユーザーの配列にデータを入力する方法の詳細は残しましたが、これでアイデアが得られることを願っています。このコントローラーには、req(要求) およびres(応答) HTTP オブジェクトが入力として渡されるため、ユーザーが渡した内容の詳細について要求オブジェクトを照会し、要求/応答ループを完了するために何らかの応答をユーザーに送り返す必要があります。この例では、res.send関数を使用して JavaScript 配列 (JSON として渡されます) を単純に送り返しています。

それは理にかなっていますか？

于 2014-11-23T02:12:41.493 に答える