javascript - 使用工厂的 Angular.JS API

Question

我已经编写了一个后端服务，它由使用工厂的 Angular.JS 前端使用，如下所示:

angular.module('app.social', ['ngResource'])
    .factory('Social', function($http) {
        return {
            me: function() {
                return $http.get('http://localhost:3000/me');
            },
            likeVideo: function(link) {
                return $http.post('http://localhost:3000/like/video', { link : link });
            },
            post: function(link) {
                return $http.post('http://localhost:3000/post', { link : link });
            },
            postVideo: function(link) {
                return $http.post('http://localhost:3000/post/video', { link : link });
            },
            friends: function() {
                return $http.get('http://localhost:3000/friends');
            },
            taggableFriends: function() {
                return $http.get('http://localhost:3000/friends/taggable');
            },
            videos: function() {
                return $http.get('http://localhost:3000/videos');
            }
        };
    });

Social.me 端点从 REST 后端接收配置文件信息。但是，此功能用于各种 Angular Controller (配置文件页面、项目详细信息页面、标题帐户按钮等)。这意味着对于每个 View ，都会从 http://localhost:3000/me 请求配置文件信息。 .这是好的做法，还是在工厂内缓存信息更好？

---

编辑:更新代码(基于@Rebornix 的回答):

angular.module('app.social', ['ngResource'])
    .service('SocialService', function() {
        var serviceData = {
            me: null
        };
        return serviceData;
    })
    .factory('Social', function($http, SocialService) {
        return {
            me: function() {
                if (SocialService.me === null) {
                    return $http.get('http://localhost:3000/me').then(function(response) {
                        SocialService.me = response.data;
                        return SocialService.me;
                    });
                } else {
                    return SocialService.me;
                }
            }
        }
    };
});

在 Controller 中，我使用:

angular.module('app.profile', [])
    .controller('ProfileCtrl', ['$window', '$scope', 'Social', function($window, $scope, Social) {
        $scope.me = Social.me();
    }])

和 View :

<div ng-controller="ProfileCtrl">
    <h1 class="profile-name">{{ me.name }}</h1>
</div>

但是 View 没有更新，因为 Facebook.me 值在第一次请求时被初始化。我想我必须以某种方式手动触发 $scope.$apply() ？

Answer 1

你可以创建一个服务作为跨 Controller 的存储

angular.module('app.social', ['ngResource'])
.service("SocialService", function() {
   var info = {
     me: null,
     friends: []
   };
   return info;
})
.factory('Social', function($http, SocialService) {
    return {
        me: function() {
               $http.get('http://localhost:3000/me').then(function(response){
               SocialService.me = response.data;
               });
        },

然后在您所有的 Controller 中，引用 infoService 而不是再次调用 API。您需要获取最新数据并刷新 infoService，所有 Controller 范围都将收到此更改的通知。

在你的 Controller 中

angular.module('app.profile', [])
    .controller('ProfileCtrl', ['$window', '$scope', 'SocialService', 'Social', function($window, $scope, SocialService, Social) {
    $scope.SocialService = SocialService;
    // Kick off social factory to update user info, you can move it into 
    // any other functions like `ng-click`.
    Social.me();
}])

那么在你看来

{{SocialService.me}}