首页 > angular下,只请求一次远程json数据,便可在多个控制器下使用

angular下,只请求一次远程json数据,便可在多个控制器下使用

1.目的:期望该远程数据(json.json)需要重复利用,希望只请求一次json.json数据,可以在多个控制器中反复使用
2.问题:路由每跳转一次,就会重新请求一次'json.json'

3.代码如下
<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>


Angular拥有根作用域$rootScope,你可以将各个控制器公用的数据持久化到根作用域里,并通过适当的方式让其只获取一次。


用service 单例的,把对象引用挂在service对象上,后面直接取这个对象


可以尝试一下这样:

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}
}]);

再controller中这么用:

.controller("FirstController",function($scope,$remoteData,$localData){
    $remoteData.getData().then(function(myData) {
        //use myData
    });
});
【热门文章】
【热门文章】