带有工厂服务的 Angular js 控制器

Question

是否可以从位于不同 js 文件中的控制器调用工厂服务（一个示例会很好），或者控制器和工厂服务必须在同一个文件中？

谢谢

Answer 1

您可以在 index.html 中包含这两个脚本，然后在您的控制器中使用该服务：

index.html

<script src="js/pictures/picture.service.js"></script>
<script src="js/pictures/controllers/pictures.js"></script>

这里是服务图片.service.js：

(() => {
    angular.module('gallery').factory('Picture', ['$http', 'Upload', function ($http, Upload) {

        return {
            all: () => {
                return $http.get('/api/pictures');
            },
            findById: (id) => {
                return $http.get(`/api/pictures/${id}`);
            },
            create: (picture) => {
                return Upload.upload({
                    url: '/api/pictures/create',
                    data: picture
                });
            }
        };
    }]);
})();

这是我注入服务的控制器：

(() => {
    angular.module('gallery').controller('Pictures', ['Picture', function (Picture) {
        let pictures = this;
        // You might want to use .then instead of .success (deprecated)
        Picture.all().success((data) => {
            pictures.pictures = data;
        });

    }]);
})();

这是一个带有简单 MEAN 堆栈项目的示例 github 存储库。 https://github.com/NikolayKolibarov/MEAN-Simple-Gallery