使用 AngularJS 服务重新加载 JSON 源

Posted 2023-02-22

【中文标题】使用 AngularJS 服务重新加载 JSON 源

【英文标题】：Reloading JSON source using AngularJS Service

【发布时间】：2019-04-01 05:18:11

【问题描述】：

我是 AngularJS 的新手，我的第一个项目需要您的帮助。

我想从 JSON 加载数据并使用 ng-repeat 将其显示在表格中，这实际上效果很好。但是我想允许用户通过重新加载 JSON 来重新加载表中的数据。

首先我加载页面。我得到了 JSON，我的桌子被填满了。然后我编辑 JSON 文件并保存它。当我点击重新加载按钮时，我收到的数据与我加载页面时得到的数据完全相同。我以为是缓存，所以我清理了浏览器缓存并在get请求中设置了cache:false，但它不起作用。

这是我的代码：

var routeApp = angular.module("app", ["ui.bootstrap", "ngRoute", "ngSanitize", "ngAnimate", "routeAppControllers"]);

routeApp.config(function ($routeProvider) 
    $routeProvider
        .when("/home", 
            templateUrl: "/SCAP/scap/resources/templates/home.html",
            controller: "ctrlHome"
        )
        .when("/dgroups", 
            templateUrl: "/SCAP/scap/resources/templates/device-groups.html",
            controller: 'ctrlDeviceGroups'
        )
        .when("/templates", 
            templateUrl: "/SCAP/scap/resources/templates/templates.html",
            controller: 'ctrlTemplates'
        )
        .otherwise(
            redirectTo: '/home'
        );
);

var routeAppControllers = angular.module('routeAppControllers', []);

routeAppControllers.controller('ctrlDeviceGroups', function ($scope, groupsService) 

    $scope.dgroups = [];

    var promise = groupsService.getGroups();
    promise.then(function(data) 
        $scope.dgroups = data;
    );

    $scope.reloadJSON = function() 
        $scope.dgroups = [];
        console.log("Cleaning all data...");
        console.log("Reloading JSON");
        var promise = groupsService.getGroups();
        promise.then(function(data) 
            $scope.dgroups = data;
            console.log("New JSON loaded");
            console.log(data);
        );
    

).service('groupsService', function($http, $q, $sce) 

    var json_file = "json.json";
    // Add to use that because it didn't trust the domain...
    var trustedUrl = $sce.trustAsResourceUrl(json_file);
    var deferred = $q.defer();
    console.log("Loading JSON...");
    $http(
        
            method: 'GET',
            url: trustedUrl,
            cache: false
        ).then(function(data) 
        deferred.resolve(data.data);
    );

    this.getGroups = function() 
        return deferred.promise;
    
);

这是 HTML（我删除了无用的行）：

<div ng-controller="ctrlDeviceGroups">
<button ng-click="reloadJSON()">Reload entire table</button>
<table>
<tbody>
<tr ng-repeat="item in dgroups">
    <!--TD-->
</tr>

</tbody>


</table></div>

如果您对如何重新加载 JSON 和视图有任何想法，我将不胜感激。我也注意到，但这不是本主题的主题，如果我在 $scope.dgroups 中推送数据，ng-repeat 不会刷新。

提前谢谢你，

【参考方案1】：

将 GET 请求移动到服务方法中：

app.service('groupsService', function($http, $sce) 

    var json_file = "json.json";
    // Add to use that because it didn't trust the domain...
    var trustedUrl = $sce.trustAsResourceUrl(json_file);

    this.getGroups = function() 
        console.log("Loading JSON...");
        var config = 
            method: 'GET',
            url: trustedUrl,
            cache: false
        ;
        return $http(config)
          .then(function(response) 
            return response.data;
        );
    ;
);

【讨论】：

现在好像可以了！！因此，如果我理解的话，我的服务只获取了一次文件，并且每次我调用 getGroups 时它都是相同的数据。

服务是单例的。它们只构建一次。 GET 请求只错误地执行了一次。它需要在 getGroups 方法中完成，以便在每次调用该方法时执行。

所以我认为我的服务现在有点没用了？我将通过将 url 作为参数传递来使用它来加载我所有的 json。