I'm trying to add a service to my Angular project for the first time and running into issues injecting it within my controller.
I am getting an error of --
TypeError: Cannot read property 'get' of undefined
I'm looking to properly inject the service into the controller and ways I can improve the code for best practices/efficiency.
Thanks for the help!
I have a folder /event in my angular project with the following files --
app.js
controllers.js
directives.js
services.js
app.js file has --
'use strict';
angular.module('vyrt.event', [
'vyrt.event.controllers',
'vyrt.event.services',
'vyrt.event.directives'
]);
services.js file has --
'use strict';
angular.module('vyrt.event.services', []).
service('VyrtEventService', ['$http', function($http) {
var artistId = 0,
artist = '',
events = [],
active_event_idx = 0;
this.get = function(artistId) {
var url = '/api/users/' + artistId + '/';
$http.get(url).success(function(data, status, headers, config) {
artist = data.artist.user;
events = data.artist.events;
active_event_id = data.artist.events[0].id;
});
return artist, events, active_event_id;
}
}]);
finally, the controller has --
'use strict';
angular.module('vyrt.event.controllers', []).
controller('VyrtEventCtrl', ['$scope', function($scope, VyrtEventService) {
console.log(VyrtEventService.get($scope.artistId));
$scope.activeCampaign = function(idx) {
if (idx == VyrtEventService.active_event_idx) return true;
return false;
};
}]);
The problem is that you've forgotten to put 'VyrtEventService' in your dependency list when you define you controller:
.controller('VyrtEventCtrl', ['$scope', /* you need this ==>*/ 'VyrtEventService', function($scope, VyrtEventService) {
console.log('VyrtEventService', VyrtEventService);
$scope.activeCampaign = function(idx) {
if (idx == VyrtEventService.active_event_idx) return true;
return false;
};
}]);
Update
Your get() function has a couple of issues. First, you need to return the $http.get() call itself and then you can call then() in your controller and set the results to a property on your $scope there. Second, you can't return multiple values like that. You would have to return an array of values or an object with your desired values assigned to it.
service
this.get = function(artistId) {
var url = '/api/users/' + artistId + '/';
return $http
.get(url)
.catch(function(error){
// handle errors here
console.log('Error fething artist data: ', error);
});
}
controller
VyrtEventService
.get(artistId)
.then(function(data){
$scope.artist = data.artist.user;
$scope.events = data.artist.events;
$scope.active_event_id = data.artist.events[0].id;
});
$scope.activeCampaign = function(idx) {
return (idx == $scope.active_event_idx);
};
Related
I generate a code with editor.swagger and I want to code a GUI with angular for that code. Since I'm newbie in angular, I dind't understand well how to start programming. I first decide to create 3 files : index.html, index.js and service.js.
Here is a part of my code :
I don't know if it's the good beginning or not. But the problem is that I don't have any idea how what I should do for POST and DELETE. Can you help me please?
You can do the standard 4 methods in Angluar JS(POST,GET,PUT,DELETE). To use these in angular you have to use the $http service that angular provides. To find out more about it check their documentation: https://docs.angularjs.org/api/ng/service/$http
From the Angular $http documentation:
Complete list of shortcut methods:
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
You can also use the method parameter in the $http service. So $http(method: 'DELETE', ...)
var app = angular.module('app');
app.service('apiService', ['$http', function($http){
this.get = function(){
return $http.get(URL);
};
this.delete = function(id){
return $http.delete(URL, id);
}
this.post = function(data){
return $http.post(URL, data);
}
}]);
app.controller('controller', ['$scope', 'apiService', function($scope, apiService){
var getData = apiService.get().success(function(){
});
}]);
You can use $resource and return it as a service.
app.factory('factoryResource', ['$resource', function($resource) {
var resource = {
getResource: function(context) {
var rsc = $resource(context, {}, {'update': {method: 'PUT'}});
return rsc;
}
};
return resource; }])
In your controller you should inject the newly created service as below:
app.controller('myCtrl', function($scope, factoryResource) {
$scope.resource = factoryResource.getResource('http://localhost:8080/api/v1/projects');
$scope.resource.save(object, successCallback, errorCallback); //post
$scope.resource.query(successCallback, errorCallback); //get all
$scope.resource.get({id: object.id}, successCallback, errorCallback); //get a specific object
$scope.resource.delete({id: object.id}, successCallback, errorCallback); //delete
}
Hope this helps;
Basically we have 4 method for a REST operation
Create (POST)-- To Create a new User (just for an example, it can be anything)
Read (GET) -- To get all users
Update (PUT) -- To update a user's property
Delete (DELETE) -- To delete a user
Let me know if you need further clarification.
In angular using service you can do that.
var app = angular.module('app', []);
app.factory('UserService', function($http){
var user = {};
user.post = function(data){
return $http.post('url', data);
}
user.get = function(){
return $http.get('url');
}
user.delete = function(id){
return $http.delete('url');
}
user.update = function(id, data){
return $http.put('url', data);
}
return user
});
app.controller('Controller', function('UserService'){
// Get
UserService.get().success(function(){
});
UserService.post(data).success(function(){
});
UserService.delete(id).success(function(){
});
UserService.get(id, data).success(function(){
});
})
This can be done easily through $resource, if you URL is proper rest.
I'm just learning angularjs and I'm strugling to get the results I want from this factory :
app.factory('foreCast', ['$http', function($http,$scope ) {
var req = $http.jsonp("https://www.kimonolabs.com/api/c1ab8xnw?&apikey=api-key&callback=JSON_CALLBACK");
req.success(function (data) {
req.rows =data.results.collection1;
req.rand =req.rows[Math.floor(Math.random() * req.rows.length)];
console.log(req.rand);
//i want this results
});
return req; //how can i return req.rand?
}]);
app.factory('foreCast', ['$q', '$http', function ($q, $http) {
return {
getRand: function () {
var deferred = $q.defer();
$http
.jsonp("https://www.kimonolabs.com/api/c1ab8xnw?&apikey=api-key&callback=JSON_CALLBACK")
.then(function (response) {
var rows = response.data.results.collection1;
var rand = rows[Math.floor(Math.random() * rows.length)];
deferred.resolve(rand);
}, function (err) {
deferred.reject(err);
})
return deferred.promise;
}
}
}])
And then from controller for exemple use it like this :
foreCast.getRand().then(function(rand){
var myRand = rand;
})
So first of all, you never want to use the success handler with http. I believe its actually getting deprecated. The best practice is to use .then and .catch for errors. Secondly, most of the time you should be processing the result in your controller since the service is not supposed to know what to do with the data.
So that being said, we can trim down your factory a little bit.
app.factory('foreCast', ['$http', function($http,$scope ) {
var factory = {};
factory.rand = function() {
return $http.jsonp("https://www.kimonolabs.com/api/c1ab8xnw?&apikey=api-key&callback=JSON_CALLBACK");
};
return factory;
}]);
Now in your controller:
app.controller('controller', ['foreCast', function(foreCast) {
var self = this;
foreCast.rand().then(function(response) {
var rows = response.results.collection1;
self.rand = rows[Math.floor(Math.random() * rows.length)];
});
}]);
now in your view just access this value with rand.
<div ng-bind="ctrl.rand"></div>
I am trying to set the controllers scope variable to the data, however no luck. The console.log in the controller shows undefined. Appreciate the help!
My angular service has the following code --
service('VyrtEventService', ['$http', function($http) {
var events = [];
this.getArtistEvents = function(artistId) {
var url = '/api/users/' + artistId + '/';
var promise = $http.get(url).success(function(data, status, headers, config) {
events = data.artist.events;
console.log(events);
return events;
}).catch(function(error) {
status = 'Unable to load artist data: ' + error.message;
console.log(status);
});
return promise;
};
}]);
And I am referencing it in the controller as follows --
VyrtEventService.getArtistEvents($scope.artistId).then(function(data){
$scope.events = data.data.artist.events;
});
console.log($scope.events);
You should just set $scope.events = data in your controller cause your promise already returns data.artist.events when it resolves
To pass scope to service from anywhere in controller. Make sure you inject service .
controllersModule.controller('MyCtrl', function($scope, $filter, $http, $compile, ngTableParams, **FactoryYouwant**)
{
**FactoryYouwant**.getdata($scope.**scopeYoutwantTopass**).then (function(responseData){
var ResponseFromServer =responseData.data;
}
in service
controllersModule.factory('**FactoryYouwant**, function($http) {
var responseData = null;
return {
getdata : function(**data**){ (you dont have to use $)
responseData = $http.post or whatever actually gets you data;
return responseData;
}
};
});
I hope this helps you to call get data from service anywhere in controller.
I am new in AngularJS. I was trying to call json file from factory function but it's showing my var customers = []; array is not updating. Please help.
Below is my code.
var demoApp = angular.module("myApp", []);
demoApp.factory('simpleFactory', ['$http', function($http){
return {
getCustomer: function(){
var customers = [];
return $http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(
function(data){
customers = data;
},
function(error){
console.log(error);
});
console.log(customers)
}
}
}]);
demoApp.controller("emplyCtrl", function($scope, simpleFactory){
$scope.customers = simpleFactory.getCustomer();
});
Demo Fiddle
Try something like this:
demoApp.factory('simpleFactory', ['$http', function($http){
return {
getCustomer: function(){
return $http.get("json/customers.json").then(
function(response){
var customers = [];
customers = response.data;
},
function(error){
console.log(error);
});
}
}
}]);
use this in your controller:
demoApp.controller("emplyCtrl", function($scope, simpleFactory){
simpleFactory.getCustomer().then(function(response){
$scope.customers = response.data;
});
});
Since the view (HTML) reads from the controller's $scope, you have to put the data in $scope somewhere in the controller. Setting it in the factory only allows access from within the factory.
Here is the working Fiddle
Hope this helps!
Don't you think that you should put "$" sign before http?
I think that the '$http' there should indicate that it is serializable. That is why, the $http should be stated in the parameter section the same way just like you mentioned in the previous string statement.
Additionally, you cannot just use http, since the syntax is to use $ in front of the http.
Otherwise, angular dll will not recognize your code.
demoApp.factory('simpleFactory', ['$http', function($http){
var customers = [];
$http.get("json/customers.json")
.success(function(data){
customers = data;
});
var factory = {};
factory.getCustomer = function(){
return customers;
};
return factory;
}]);
Take a look at the example here:
http://www.w3schools.com/angular/angular_http.asp
Thank you,
Is there any way to configure Angular app to make it available?
Im using a factory.
By the way, I'm using localhost as webserver but I'm making a request to other server (same network).
angular.module('demoApp.factories', [])
.factory('dataFactory', ['$http', function($http) {
var urlBase = 'external-server:8080';
var dataFactory = {};
dataFactory.getTest = function () {
return $http.get(urlBase + '/test');
};
return dataFactory;
}]);
Finally found the solution. Will post here, maybe it can help others:
angular.module('demoApp.factories', [])
.factory('dataFactory', ['$http', function($http) {
var urlBase = 'external-server:8080';
var dataFactory = {};
dataFactory.getTest = function () {
//Note the $http method changed and a new parameter is added (callback)
//the value of the callback parameter can be anything
return $http.jsonp(urlBase + '/test?callback=myCallback');
};
return dataFactory;
}]);
The controller file basically just calling this factory:
angular.module('demoApp.controllers', []).controller('controller1', ['$scope', 'dataFactory',
function ($scope, dataFactory) {
$scope.status;
$scope.data;
dataFactory.getTest().success(function (data)
{
$scope.data = data;
}).error(function (error)
{
$scope.status = 'Unable to load customer data: ' + error.message;
});
You may be looking to configure the $httpProvider as specified here: http://better-inter.net/enabling-cors-in-angular-js/
Another way is to create a simple http proxy on your front-end server to make external requests look like to angular that they're coming from the same server.