gpt4 book ai didi

javascript - AngularJS 应用程序为多个 Controller 加载和处理一次 JSON 数据

转载 作者:行者123 更新时间:2023-12-03 07:51:19 24 4
gpt4 key购买 nike

我正在开发一个 Angular 应用程序,我遇到的问题与本文中的问题基本相同: AngularJS App: Load data from JSON once and use it in several controllers

我有一个读取 JSON 文件并返回整个数据对象的工厂。然后,每个 Controller 都使用此工厂(作为服务?)来获取数据,但随后每个 Controller 必须自行将其分开。必须搜索和处理 JSON 才能获取相关的有效负载,例如 $scope.currentArray = data.someThing.allItems[i];等等,我显然不想在所有 Controller 中重复这段代码。

在我看来,我可以找到某种方法来共享数据,例如,在MainController(“第一个”)完成工作之后,或者我可以添加一些新的 Controller 和工厂“之间”的模块。这个新模块——我们称之为myProcessService ? ——然后就是从工厂获取数据对象,并在那里进行所有处理......一劳永逸。那么,每个 Controller 只会处理 myProcessService (以某种方式)将准备好的格式化变量和数组等放到它们各自的作用域中(是的,这是 Angular 1)。

如果我尝试举例说明到目前为止我是如何做到这一点的,也许有人可以帮助我进行必要的改进?而且,我知道今天就开始使用 Angular 2 模式是个好主意,但请理解,在深入研究 A2 之前,我首先尝试了解 A1 的工作原理:)

var app = angular.module('myApp', ['ngRoute']);


app.factory('getDataFile', ['$http', function($http) {
function getStream(pid) {
return $http.get("data/" + pid + ".json")
.success(function(data) {
console.info("Found data for pid " + pid);
return data;
})
.error(function(err) {
console.error("Cant find data for pid " + pid);
return err;
});
}
return {getStream: getStream};
}]);


app.controller('MainController', ['$scope', 'getDataFile',
function($scope, getDataFile) {
getDataFile.getStream('10101011').success(function(data) {

// process "data" into what's relevant:
var i = getRelevantIndexForToday(new Date());
$scope.myVar = data.someField;
$scope.currentArray = data.someThing.allItems[i];
// etc... you get the drift
}
}]);

app.controller('SecondController', ['$scope', 'getDataFile',
function($scope, getDataFile) {
getDataFile.getStream('10101011').success(function(data) {

// process "data" into what's relevant:
var i = getRelevantIndexForToday(new Date());
$scope.myVar = data.someField;
$scope.currentArray = data.someThing.allItems[i];
// etc... you get the drift
}
}]);

编辑:

我的 ngRouter 设置是这样的。他们填写ng-view div 在我的index.html 中。然而——也许这会让人不悦? -- 我还有有一个直接位于index.html body 中的“MainController”标签,这样我就可以在单页应用程序的标题部分显示一些数据(来自后端)。

app.config(function($routeProvider) {

$routeProvider

.when('/:id/work/:page_id', {
controller: 'AssetController',
templateUrl: 'app/views/work.html'
})
.when('/:id/work/', {
redirectTo: '/:id/work/1'
})
.when('/:id/', {
controller: 'DashController',
templateUrl: 'app/views/dashboard.html'
})
.otherwise({
redirectTo: '/'
});

});

和index.html很像这样:

<body ng-app="myApp">

<div class="container" ng-controller="MainController">

<h1>Welcome, {{username}}</h1>

<div ng-view></div>

</div>
</body>

最佳答案

您可以在工厂中添加另一个辅助函数,该函数返回您想要在 Controller 之间共享的所需对象。

app.factory('getDataFile', ['$http', function($http) {
function getStream(pid) {
return $http.get("data/" + pid + ".json")
.success(function(data) {
console.info("Found data for pid " + pid);
return data;
})
.error(function(err) {
console.error("Cant find data for pid " + pid);
return err;
});
}

function getCurrent(pid) {
return getStream(pid).then(function() {
var i = getRelevantIndexForToday(new Date());

return {
myVar: data.someField,
currentArray: data.someThing.allItems[i];
};
});
}

return {
getStream: getStream,
getCurrent: getCurrent
};
}]);

app.controller('MainController', ['$scope', 'getDataFile',
function($scope, getDataFile) {
getDataFile.getCurrent('10101011').success(function(data) {
$scope.myVar = data.myVar;
$scope.currentArray = data.currentArray;
// etc... you get the drift
}
}]);

app.controller('SecondController', ['$scope', 'current',
function($scope, current) {
.success(function(data) {
$scope.myVar = data.myVar;
$scope.currentArray = data.currentArray;
}
}]);

建议:

此外,我建议您使用 resolve,它允许您将数据从路线传递到 Controller 。

路线:

.when('/:id/work', {
controller: 'AssetController',
templateUrl: 'app/views/work.html',
resolve: {
// you are injecting current variable in the controller with the data. You can inject this to each of your controller. you dont need to add the whole function in your next route. Just use current
current: function(getDataFile){
return getDataFile.getCurrent('10101011');
}
})

Controller :

app.controller('MainController', ['$scope', 'current', 
function($scope, current) {
$scope.myVar = current.myVar;
$scope.currentArray = current.currentArray;
}]);

app.controller('SecondController', ['$scope', 'current',
function($scope, current) {

$scope.myVar = current.myVar;
$scope.currentArray = current.currentArray;

}]);

现在你已经

关于javascript - AngularJS 应用程序为多个 Controller 加载和处理一次 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34982363/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com