I'm getting json file from REST server using factory:
.factory('chartData', function($http){
return {
get: function() {
return $http.get('http://').then(function(result) {
return result.data;
});
}
}
})
Now how can i pass this to directive which i'm using to make chart?
I suppose i would need to use controller?
Promises do not work this way.
Try this:
.factory('chartData', function($http){
return {
get: function() {
return $http.get('http://');
}
}
});
and in your directive:
chartData.get().then(function(result) {
$scope.chartData = result.data;
initChart();
});
This video can be helpfull: angularjs-promises
Related
I have a problem when trying to call a variable outside a function
This is the service
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar').then(function (response) {
return response.data;
});
}
};});
within the controller I call:
loadAgents();
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
within the above function I can use $scope.agentes but not outside it ...
I dont understand exactly what is your problem but you have some "mistakes" in your code.You should do
app.factory('Service', function($http) {
return {
agentes: function () {
return $http.get(base_url +'/api/auth/organization/me/tasks/calendar');
}
}
});
Then inside your controller
app.controller('myController', ['Service', function(Service) {
function loadAgents() {
Service.agentes()
.then(function(agentes){
$scope.agentes = agentes.data.trackables;
});
}
}])
I'm trying to load some data through $http to prefill a profile form. Unfortunately all the examples I find online use the $scope-approach rather than 'Controller as'-approach (which I'm using to make future transition to Angular 2 easier). These examples assign the $http response to the '$scope' variable, which is not possible when using 'this'.
After a lot of fiddling I managed to get it to work by adding a temp variable
var temp = this;
to which I can assign the $http response when it successfully returns.
angular.module('angularUserApp')
.factory('ajax',['$http',function($http){
return {
getProfile: function(){
return $http.get('/ajax/user/profile')
.then(function(response){
return response.data.data.profile;
});
}
}
}])
.controller('userProfileCtrl', ['ajax', function (ajax) {
var temp = this;
ajax.getProfile().then(function(response){
temp.profile = response;
});
}]);
Is there a more elegant approach?
Your approach for using controllerAs is correct. Just a few advices though, better alias the this to a variable vm, which stands for viewModel instead of temp, and name your service semantically: userService instead of ajax:
angular.module('angularUserApp')
.factory('userService', function ($http){
return {
getProfile: function () {
return $http.get('/ajax/user/profile')
.then(function (response){
return response.data.profile;
});
}
}
})
.controller('userProfileCtrl', function (userService) {
var vm = this;
userService.getProfile().then(function (response) {
vm.profile = response;
});
});
One of the design ideas of angular is that you can use $scope. Simply inject $scope into your controller, like you did with your ajax service and set the profile response to the $scope variable ($scope.profile = response;).
As a result you would get something like:
angular.module('angularUserApp')
.factory('ajax',['$http',function($http){
return {
getProfile: function(){
return $http.get('/ajax/user/profile')
.then(function(response){
return response.data.data.profile;
});
}
}
}])
.controller('userProfileCtrl', ['ajax', '$scope', function (ajax, $scope) {
ajax.getProfile().then(function(response){
$scope.profile = response;
});
}]);
// In your template
<div ng-controller="userProfileCtrl">
<div ng-bind="profile.name"></div>
</div>
I'm working on my first Angular.js application and I'm a bit confused.
Currently I have two directives that both need the same data to build up the page.
This data is loaded from an external api.
Now currently I have created this factory, which looks like:
(function() {
var app = angular.module('dataService', []);
app.factory('dataService', ['$http', function($http) {
var links = [];
return {
getMenu: function() {
if(links.length > 0) {
return links;
} else {
$http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
return data;
})
}
}
}
}])
})();
But I'm rather confused how to use this service, obviously if there is a $http request, the return will never be called with the correct data.
In my directive I would use it like this:
(function() {
// Menu directive
var app = angular.module('menu', ['dataService']);
app.directive('menu', ['dataService', function(dataService) {
return {
restrict: 'E',
templateUrl: 'scripts/menu/menu.html',
controller: function() {
console.log(dataService.getMenu()); // Return 'undefined'
},
controllerAs: 'menuCtrl'
}
}])
})();
Change your service method so that it handles both synchronous and asynchronous scenarios:
getMenu: function() {
var deferred = $q.defer();
if(links.length > 0) {
deferred.resolve(links);
} else {
$http.get('http://localhost/server/api.php?ajax=true&action=getCats').success(function(data) {
deferred.resolve(data);
})
}
return deferred.promise;
}
Usage:
dataService.getMenu().then(function(data){
console.log(data);
});
I am trying to load some json data from a server with a background loading screen.
here is controller file
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
//loading backgroundscreen of loading
.controller('FriendsCtrl', function($scope, Friends, $ionicLoading) {
$ionicLoading.show({
template: 'Loading...'
});
//this will generate the error
Friends.all().then(function(data){
$scope.friends=data;
$ionicLoading.hide();
});
})
Here is my services file
angular.module('starter.services', [])
.factory('Friends', function($http) {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends ;
return {
all: function() {
$http.get('http://www.root5solutions.com/ionictest/get.json').then(function(msg){
console.log("console output"+msg.data);
friends=msg.data;
console.log("from server"+msg.data);
});
return friends;
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}
});
I am getting console error
Type Error:cannot call method get of undefined.
Please help
Because your service is not returning promise, but you are waiting for deferred object in your controller.
angular.module('starter.services', [])
.factory('Friends', function($http) {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends ;
return {
all: function() {
return $http.get('http://www.root5solutions.com/ionictest/get.json');
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}
});
I want to project the result of my $http call into another model in order to make the projection global to the service call.
In other words, the result i get from my http/api call is not using the exact model i want.
How do i do this projection within my service class?
angular.module('openart')
.factory('BritishLibraryApi', ['$http', function ($http) {
return {
getPage:function(page){
return $http({method:"GET",url:'/api/british-library/'+page})
.success(function(data){
//would like to do something here like
return data.results.map(function(i){
//project i into another model here
return {
};
});
});
}
};
}]);
If you create your own promise and resolve to your mapped data
angular.module('openart')
.factory('BritishLibraryApi', ['$http','$q', function ($http,$q) {
return {
getPage:function(page){
var defer=$q.defer();
$http({method:"GET",url:'/api/british-library/'+page})
.success(function(data){
//would like to do something here like
defer.resolve(data.results.map(function(i){
//project i into another model here
return {
};
}));
});
return defer.promise;
}
};
}]);