Как правильно передать данные из пользовательского сервиса в угловой контроллер
Я начинаю писать приложение Angular, которое взаимодействует с Flask API. В моем приложении у меня есть контроллер с именем 'dashboard.js'. В этом контроллере у меня есть следующая функция:
function getSignedContractsFromServer() {
return datacontext.getSignedContractsFromServer()
.then(function (data) {
$scope.americasPriorWeekThree = data[0].americasPriorWeekThree;
$scope.ameaPriorWeekThree = data[0].ameaPriorWeekThree;
$scope.australiaPriorWeekThree = data[0].australiaPriorWeekThree;
$scope.europePriorWeekThree = data[0].europePriorWeekThree;
$scope.nordicsPriorWeekThree = data[0].nordicsPriorWeekThree;
$scope.ukiPriorWeekThree = data[0].ukiPriorWeekThree;
$scope.americasPriorWeekTwo = data[0].americasPriorWeekTwo;
$scope.ameaPriorWeekTwo = data[0].ameaPriorWeekTwo;
$scope.australiaPriorWeekTwo = data[0].australiaPriorWeekTwo;
$scope.europePriorWeekTwo = data[0].europePriorWeekTwo;
$scope.nordicsPriorWeekTwo = data[0].nordicsPriorWeekTwo;
$scope.ukiPriorWeekTwo = data[0].ukiPriorWeekTwo;
$scope.americasPriorWeekOne = data[0].americasPriorWeekOne;
$scope.ameaPriorWeekOne = data[0].ameaPriorWeekOne;
$scope.australiaPriorWeekOne = data[0].australiaPriorWeekOne;
$scope.europePriorWeekOne = data[0].europePriorWeekOne;
$scope.nordicsPriorWeekOne = data[0].nordicsPriorWeekOne;
$scope.ukiPriorWeekOne = data[0].ukiPriorWeekOne;
$scope.americasCurrentWeek = data[0].americasCurrentWeek;
$scope.ameaCurrentWeek = data[0].ameaCurrentWeek;
$scope.australiaCurrentWeek = data[0].australiaCurrentWeek;
$scope.europeCurrentWeek = data[0].europeCurrentWeek;
$scope.nordicsCurrentWeek = data[0].nordicsCurrentWeek;
$scope.ukiCurrentWeek = data[0].ukiCurrentWeek;
assignChartData();
return vm.signedContracts = data[0];
});
}
Эта функция использует пользовательский сервис с именем "datacontext.js", который содержит следующую соответствующую функцию:
function getSignedContractsFromServer(){
$http.get('/signed_contracts').
success(function(data, status, headers, config) {
console.log("success retrieving data from server: " + data.contracts);
return data.contracts;
}).
error(function(data, status, headers, config) {
console.log("error retrieving data from server!");
return "error";
});
}
Эта функция предоставляется следующим образом:
var service = {
getSignedContracts: getSignedContracts,
getSignedContractsFromServer: getSignedContractsFromServer
};
return service;
Кажется, что первоначальный макет извлечения данных работает - данные отправляются из Flask API:
@app.route('/signed_contracts')
def signed_contracts():
contracts = "{'param': 'foo', 'val': 2}"
return jsonify({'contracts': contracts})
Эти данные принимаются getSignedContractsFromServer, как указано в журнале:
"success retrieving data from server: {'param': 'foo', 'val': 2}"
Тем не менее, я также получаю это длинное сообщение об ошибке в консоли браузера, что мне нужно помочь с пониманием и исправлением. Чтобы лучше понять всю последовательность, я публикую весь журнал браузера в порядке воспроизведения событий. Эта запись журнала также содержит длинную ошибку, с которой я прошу помочь мне:
GET http://localhost:5000/#/ [HTTP/1.0 200 OK 1ms]
GET http://localhost:5000/static/css/ie10mobile.css [HTTP/1.0 304 NOT MODIFIED 3ms]
GET http://localhost:5000/static/css/bootstrap.min.css [HTTP/1.0 304 NOT MODIFIED 5ms]
GET http://localhost:5000/static/css/font-awesome.min.css [HTTP/1.0 304 NOT MODIFIED 4ms]
GET http://localhost:5000/static/css/toastr.css [HTTP/1.0 304 NOT MODIFIED 6ms]
GET http://localhost:5000/static/css/customtheme.css [HTTP/1.0 304 NOT MODIFIED 6ms]
GET http://localhost:5000/static/css/styles.css [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/css/breeze.directives.css [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/common/jquery-2.1.1.js [HTTP/1.0 304 NOT MODIFIED 1ms]
GET http://localhost:5000/static/lib/angular/angular.js [HTTP/1.0 304 NOT MODIFIED 3ms]
GET http://localhost:5000/static/lib/angular/angular-animate.js [HTTP/1.0 304 NOT MODIFIED 4ms]
GET http://localhost:5000/static/lib/angular/angular-route.js [HTTP/1.0 304 NOT MODIFIED 5ms]
GET http://localhost:5000/static/lib/angular/angular-sanitize.js [HTTP/1.0 304 NOT MODIFIED 7ms]
GET http://localhost:5000/static/lib/bootstrap/bootstrap.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/other/toastr.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/other/moment.js [HTTP/1.0 304 NOT MODIFIED 8ms]
GET http://localhost:5000/static/lib/bootstrap/ui-bootstrap-tpls-0.10.0.js [HTTP/1.0 304 NOT MODIFIED 10ms]
GET http://localhost:5000/static/lib/other/spin.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/other/breeze.debug.js [HTTP/1.0 304 NOT MODIFIED 13ms]
GET http://localhost:5000/static/lib/other/breeze.angular.js [HTTP/1.0 304 NOT MODIFIED 18ms]
GET http://localhost:5000/static/lib/other/breeze.directives.js [HTTP/1.0 304 NOT MODIFIED 17ms]
GET http://localhost:5000/static/lib/other/breeze.saveErrorExtensions.js [HTTP/1.0 304 NOT MODIFIED 21ms]
GET http://localhost:5000/static/lib/other/breeze.to$q.shim.js [HTTP/1.0 304 NOT MODIFIED 19ms]
GET http://localhost:5000/static/lib/app/ng-google-chart.js [HTTP/1.0 304 NOT MODIFIED 19ms]
GET http://localhost:5000/static/lib/app/app.js [HTTP/1.0 304 NOT MODIFIED 16ms]
GET http://localhost:5000/static/lib/app/config.js [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/config.exceptionHandler.js [HTTP/1.0 304 NOT MODIFIED 12ms]
GET http://localhost:5000/static/lib/app/config.route.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/common.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/logger.js [HTTP/1.0 304 NOT MODIFIED 9ms]
GET http://localhost:5000/static/lib/app/common/spinner.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/common/bootstrap/bootstrap.dialog.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/admin/admin.js [HTTP/1.0 304 NOT MODIFIED 11ms]
GET http://localhost:5000/static/lib/app/dashboard/dashboard.js [HTTP/1.0 200 OK 16ms]
GET http://localhost:5000/static/lib/app/layout/shell.js [HTTP/1.0 304 NOT MODIFIED 15ms]
GET http://localhost:5000/static/lib/app/layout/sidebar.js [HTTP/1.0 304 NOT MODIFIED 15ms]
GET http://localhost:5000/static/lib/app/services/datacontext.js [HTTP/1.0 304 NOT MODIFIED 13ms]
GET http://localhost:5000/static/lib/app/services/directives.js [HTTP/1.0 304 NOT MODIFIED 14ms]
GET http://localhost:5000/static/lib/app/services/entityManagerFactory.js [HTTP/1.0 304 NOT MODIFIED 14ms]
GET http://localhost:5000/static/lib/app/layout/shell.html [HTTP/1.0 304 NOT MODIFIED 2ms]
GET http://localhost:5000/static/lib/app/dashboard/dashboard.html [HTTP/1.0 304 NOT MODIFIED 3ms]
"[shell] " "Hot Towel Angular loaded!" null angular.js:10046
"Error: datacontext.getSignedContractsFromServer(...) is undefined
getSignedContractsFromServer@http://localhost:5000/static/lib/app/dashboard/dashboard.js:31:17
activate@http://localhost:5000/static/lib/app/dashboard/dashboard.js:24:29
dashboard@http://localhost:5000/static/lib/app/dashboard/dashboard.js:20:9
invoke@http://localhost:5000/static/lib/angular/angular.js:3956:7
instantiate@http://localhost:5000/static/lib/angular/angular.js:3967:7
$ControllerProvider/this.$get</<@http://localhost:5000/static/lib/angular/angular.js:7260:7
nodeLinkFn/<@http://localhost:5000/static/lib/angular/angular.js:6651:13
forEach@http://localhost:5000/static/lib/angular/angular.js:332:11
nodeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6638:11
compositeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6086:13
publicLinkFn@http://localhost:5000/static/lib/angular/angular.js:5982:30
ngViewFillContentFactory/<.link@http://localhost:5000/static/lib/angular/angular-route.js:919:7
nodeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6693:1
compositeLinkFn@http://localhost:5000/static/lib/angular/angular.js:6086:13
publicLinkFn@http://localhost:5000/static/lib/angular/angular.js:5982:30
createBoundTranscludeFn/boundTranscludeFn@http://localhost:5000/static/lib/angular/angular.js:6106:13
controllersBoundTransclude@http://localhost:5000/static/lib/angular/angular.js:6713:11
update@http://localhost:5000/static/lib/angular/angular-route.js:869:17
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:5000/static/lib/angular/angular.js:12937:15
updateRoute/<@http://localhost:5000/static/lib/angular/angular-route.js:550:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/static/lib/angular/angular.js:11546:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:5000/static/lib/angular/angular.js:11546:15
qFactory/ref/<.then/<@http://localhost:5000/static/lib/angular/angular.js:11632:11
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:5000/static/lib/angular/angular.js:12658:9
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5000/static/lib/angular/angular.js:12470:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5000/static/lib/angular/angular.js:12762:13
done@http://localhost:5000/static/lib/angular/angular.js:8357:34
completeRequest@http://localhost:5000/static/lib/angular/angular.js:8571:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:5000/static/lib/angular/angular.js:8514:1
" "<div data-ng-view="" class="shuffle-animation ng-scope">" angular.js:10046
"[app] " "[HT Error] datacontext.getSignedContractsFromServer(...) is undefined" Object { exception: TypeError, cause: "<div data-ng-view="" class="shuffle-animation ng-scope">" } angular.js:10046
GET https://www.google.com/jsapi [HTTP/1.1 200 OK 223ms]
GET http://localhost:5000/signed_contracts [HTTP/1.0 200 OK 1ms]
"success retrieving data from server: {'param': 'foo', 'val': 2}" datacontext.js:53
GET http://localhost:5000/static/css/images/icon.png [HTTP/1.0 304 NOT MODIFIED 2ms]
GET https://www.google.com/uds/ [HTTP/1.1 200 OK 34ms]
1 ответ
Сейчас я решил использовать $http непосредственно в моем контроллере:
function getSignedContractsFromServer() {
$http.get('/signed_contracts').
success(function(data) {
console.log('data.americasPriorWeekThree: ' + data.americasPriorWeekThree);
$scope.americasPriorWeekThree = data.americasPriorWeekThree;
$scope.ameaPriorWeekThree = data.ameaPriorWeekThree;
$scope.australiaPriorWeekThree = data.australiaPriorWeekThree;
$scope.europePriorWeekThree = data.europePriorWeekThree;
$scope.nordicsPriorWeekThree = data.nordicsPriorWeekThree;
$scope.ukiPriorWeekThree = data.ukiPriorWeekThree;
$scope.americasPriorWeekTwo = data.americasPriorWeekTwo;
$scope.ameaPriorWeekTwo = data.ameaPriorWeekTwo;
$scope.australiaPriorWeekTwo = data.australiaPriorWeekTwo;
$scope.europePriorWeekTwo = data.europePriorWeekTwo;
$scope.nordicsPriorWeekTwo = data.nordicsPriorWeekTwo;
$scope.ukiPriorWeekTwo = data.ukiPriorWeekTwo;
$scope.americasPriorWeekOne = data.americasPriorWeekOne;
$scope.ameaPriorWeekOne = data.ameaPriorWeekOne;
$scope.australiaPriorWeekOne = data.australiaPriorWeekOne;
$scope.europePriorWeekOne = data.europePriorWeekOne;
$scope.nordicsPriorWeekOne = data.nordicsPriorWeekOne;
$scope.ukiPriorWeekOne = data.ukiPriorWeekOne;
$scope.americasCurrentWeek = data.americasCurrentWeek;
$scope.ameaCurrentWeek = data.ameaCurrentWeek;
$scope.australiaCurrentWeek = data.australiaCurrentWeek;
$scope.europeCurrentWeek = data.europeCurrentWeek;
$scope.nordicsCurrentWeek = data.nordicsCurrentWeek;
$scope.ukiCurrentWeek = data.ukiCurrentWeek;
assignChartData();
//return vm.signedContracts = data[0];
});
}