angular.js - Under angular, remote json data is requested only once and can be used in multiple controllers.

Question

1.Purpose: It is expected that the remote data (json.json) needs to be reused. It is hoped that the json.json data will only be requested once and can be used repeatedly in multiple controllers
2.Problem:Every time the route jumps, 'json.json' will be requested again

3. The code is as follows
<script>

angular.module("myApp",[])
        .factory("$remoteData",['$http',function($http){
            return $http.get("../json/json.json").then(function(response){
                //获取 远程数据 服务
                //目的：期望该远程数据(json.json)需要重复利用，希望只请求一次json.json数据，可以在多个控制器中反复使用
                //问题：路由每跳转一次，就会重新请求一次'json.json'
                console.log(response.data);
                var myData = "";
                return myData = response.data;
            })
        }])
        .factory("$localData",function(){
            return {"name":"wenwu","age":"26"};
        })
        .controller("FirstController",function($scope,$remoteData,$localData){
                //远程请求的数据 --获取失败(如果这里能够获取json.json的数据，应该就成功了)
                $scope.remoteData = $remoteData;
                console.log('$scope.remoteData',$scope.remoteData);//返回 $scope.remoteData d {$$state: Object}
                console.log('$scope.remoteData.$$state.value',$scope.remoteData.$$state.value);//返回undefined

                //本地制作的数据 -- 获取成功
                $scope.localData = $localData;
                console.log($scope.localData);//返回 Object {name: "wenwu", age: "26"}
        })

</script>

Answer 1

You can try this:

factory("$remoteData",['$http', '$q', function($http, $q){
    var self = this;
    
    function getData() {
        if (self.myData) {
            return $q(function(resolve, reject) {
                resolve(self.myData);
            });
        } else {
            return $http.get("../json/json.json").then(function(response){
                self.myData = response.data;
                return self.myData;
            });
        }
    }
    return {getData: getData}
}]);

Use it like this in the controller:

.controller("FirstController",function($scope,$remoteData,$localData){
    $remoteData.getData().then(function(myData) {
        //use myData
    });
});

Answer 2

Use service singleton, hang the object reference on the service object, and fetch this object directly later

Answer 3

Angular has the root scope $rootScope. You can persist the data common to each controller to the root scope and obtain it only once through appropriate methods.