通过使用 $resource 从 angular 调用 c# webservice 来设置控制器变量

Question

我在使用来自服务的 JSON 数据时遇到问题。后端用c#写，前端用AngularJS.

我无法在 Angular 控制器中使用我想要的对象。

所以，这是我在 C#apirestful 中的服务

[Route("v1/environment")]
    public IHttpActionResult GetEnvironment()
    {
        var env = new Environment(WebConfigurationManager.AppSettings["Env"]);
        return this.Ok(env);
    }

那么，这是我的 angular 服务：

module.factory('Environment', [
    '$resource',
    function ($resource) {
        return $resource('/MorpheusApi/v1/environment', {}, {
            getEnv: {method: 'GET', isArray: false}
        });

    }
    ]);

然后出于测试目的，我还创建了此服务：

 module.factory('Env', [
    'Environment',
    function (Environment) {
        return {
            getEnv: function () {
                var s = Environment.getEnv();
                var e = angular.fromJson(s);
                return e;
            }
        };
    }
    ]);

然后我会像这样在控制器中使用它：

$scope.envLocal = Env.getEnv();

然后在ui，用这个

<p>Environment Local: {{envLocal}}</p>
    <p>Environment Local Env: {{envLocal.Env}}</p>

我得到以下输出，我认为这很好:)

Environment Local: {"Env":"testText"}

Environment Local Env: testText

但是当我现在想说只提供从控制器到 ui 的 testText 时，我会做这样的事情：

    var result = Env.getEnv();
$scope.envLocal = result.Env;

但是这不起作用..我也用 angular.toJson.. angular.fromJson 尝试过，但是我在 UI.. 中什么也没有得到。为什么？我如何在控制器中正确使用该对象，例如，如果我想在 if 或其他情况下使用它..

这可能吗？

Answer 1

我认为这是因为您试图在调用 getEnv 之后设置作用域变量。您可能必须使用 angular promise 才能做到这一点

这样的东西行得通吗？

var promise = Env.getEnv();
promise.then(function(res) {
    $scope.envLocal = res.Env;
}, function(err) {});

您可能还需要将 $scope.envLocal 包装在 $apply 中，但不确定...

 $scope.$apply(function () { 
    $scope.envLocal = res.Env; 
 });

Answer 2

你也可以这样写你的工厂，这样你就不需要写两个不同的服务了。

module.factory('Environment', ['$resource',
    function ($resource) {
        var api = $resource('/MorpheusApi/:action/:subaction', {}, {
            getEnv: {
                method: 'GET',
                params: {
                   action: "v1",
                   subaction:"environment"
                },
                isArray: false
            }
        });
        return {
            getEnv: function () {
                return api.getEnv().$promise;
            }
        };
    }
]);

之后你只需要将这个服务注入到控制器中，你就可以轻松调用函数了。

Environment.getEnv()
                .then(function (response) {
                    //If you wants to perform any logic on response object then you can do here and after that you can assign to scope variable
                    // You can write this logic in service too
                    $scope.envLocal = response;
                });

您可以调用我上面提到的服务，因为 $resource 正在返回承诺，您的范围对象将在成功调用 api 时设置，而无需在此处调用 $scope.$apply()。

假设你有两个不同的喜欢

/MorpheusApi/v1/environment

/MorpheusApi/v2/environment

您可以根据需要配置两条路由调用函数。

module.factory('Environment', ['$resource',
        function ($resource) {
            var api = $resource('/MorpheusApi/:action/:subaction', {}, {
                getEnv: {
                    method: 'GET',
                    params: {
                       action: "v1",
                       subaction:"environment"
                    },
                    isArray: false
                },
                getEnvV2: {
                    method: 'GET',
                    params: {
                       action: "v2",
                       subaction:"environment"
                    },
                    isArray: false
                }
            });
            return {
                getEnv: function () {
                    return api.getEnv().$promise;
                },
                getEnvV2: function () {
                    return api.getEnvV2().$promise;
                }
            };
        }
    ]);

有关配置和理解的更多信息，您可以阅读本文Explanation of configration and working of $resource

通过使用 $resource 从 angular 调用 c# webservice 来设置控制器变量

Set controller variable by calling c# webservice from angular with the use of $resource

javascript

c#

json

angularjs

angular-resource