Trying to get ngResource to work, but getting the error:
Object # has no method 'query'
I've tried to keep it as simple as possible and according to the documentations/posts that I can find, this should work. But it doesn't.
Here's my service/factory:
var srcServices = angular.module('srcServices', ['ngResource']);
srcServices.factory('Rotation', ['$resource',
function ($resource) {
return $resource('/rotations/:id' );
}]);
And here's the controller code triggering the error:
var srcControllers = angular.module('srcControllers', ['ngResource']);
srcControllers.controller('RotationListCtrl', ['$scope', '$location', 'Rotation', function($scope, Rotation, $location) {
Rotation.query(function(data) {$scope.rotations = data;})
$scope.edit = function(a) {
var path = "/rotations/" + a._id.$oid;
$location.path(path);
};
}]);
Try this
var srcControllers = angular.module('srcControllers', ['ngResource', 'srcServices']);
You are creating the service as a new angular module. So in order to get access to the service you have to inject it to your controller.
Related
Am new to angularjs. I am trying to use angular service to post data but its throwing below error
angular.js:12520 Error: [$injector:unpr] Unknown provider: frontendServiceddProvider <- frontendServicedd <- CustSignupCtrl
service.js
app.service('frontendService', function frontendService ($http, $q, $rootScope){
var list = this;
list.registerCust = function(data){
var defer = $q.defer();
$http({
url: $rootScope.endPoint,
method: "POST",
data: data
})
.success(function(res){
console.log("Successfull!");
defer.resolve(res);
})
.error(function(err, status){
console.log("Failed !");
})
return defer.promise;
}
return list;
});
customer_signup.js
app.controller('CustSignupCtrl', ['$scope', '$filter','frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
function('$scope', '$filter','frontendService', '$http','editableOptions', 'editableThemes','notify','notification','$appConstants'){
$scope.pw1 = '';
$scope.registerCustomer = function (data) {
return frontendService.registerCust(data)
}
$scope.signupcustomer = function(){
var payload= {
first_name: $scope.custForm.fname,
last_name: $scope.custForm.lname,
phone: $scope.custForm.phone,
email:$scope.custForm.email,
username:$scope.custForm.username,
password:$scope.custForm.pw1,
usertype:3
}
console.log("inside function");
$scope.registerCustomer(payload).then(function(data){
notification.success(data.result);
},function(err){
notification.error("Error: contact system admin");
});
}
}
])
I have given reference of both js files in index.html.. not getting where am doing wrong.. can anyone help
app.controller('CustSignupCtrl', ['$scope', '$filter', 'frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
function($scope, $filter, frontendService, $http, editableOptions, editableThemes, notify, notification, $appConstants){
$scope.pw1 = '';
});
Whatever you inject into controller, should be in the same order.
Remove quotes accross the injectables inside function.
This can be a dependency injection mismatch sort of problem
AngularJS injects object into the function as it sees them inside []
For example if you declare a function inside your js file, say like this
var app = angular.module('app',[]);
app.controller('maincntrl',function($scope){
});
var search = function($scope,searchtext,searchfilters,searchareas)
{
return 'result'
}
console.log(angular.injector.annotate(search));
The result you shall get in your console will be
["$scope","searchtext","searchfilters","searchareas"]
AngularJS parses the function parameters as an array
It goes through each array elements and the moment it sees "$scope", it injects scope object into that position
Now the syntax which you have used is basically used for minification
So according to your declaration
app.controller('CustSignupCtrl', ['$scope','frontendService', '$filter','frontendService', '$http', 'editableOptions', 'editableThemes','notify','notification','$appConstants',
function('$scope', '$filter','frontendService', '$http','editableOptions', 'editableThemes','notify','notification','$appConstants'){
});
So
$scope--> shall be injected into $scope
frontendService-->shall be injected into $filter
$filter--> shall be injected into frontendService
.
.
.
so on
Also the errors(which you mentioned in comments) are occurring because you have declared function parameters as strings in which case the dependency injection is not happening. Fixing these things shall solve your problem
Trying to inject $ionicHistory into service itself.
Can I write like this?
.service('$ionicUtilityService', ['CONSTANT', '$log', '$ionicHistory', function(CONSTANT, $log, $ionicHistory) {
var apis = {};
apis.clearNavigationHistory = function() {
$ionicHistory.clearHistory();
};
return apis;
}]);
I am getting error
Error: $ionicHistory is undefined
apis.clearNavigationHistory#http://localhost:8100/js/services.min.js:1:6223
#http://localhost:8100/components/customer/home/home-controller.min.js:1:206
jf/this.$gethttp://localhost:8100/lib/ionic/js/ionic.bundle.min.js:170:424
D.create/O.emit#http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:446:19204
D.create/O.transition#http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:446:18728
Have you tried injecting it elsewhere?
I tried this:
.factory('MyService', function(TestService, $ionicHistory)
{
var service {
myMethod: function(){$ionicHistory.goBack()}
}
return service
}
And got no errors.
I am trying to make an http call function in angular. The problem is that when I try running this on the Chrome console, it says "cannot read get of undefined." Obviously this is referring to the http get call, but it really looks to me like the http dependency was injected, so I am not sure what I am missing.
angular.module('app').controller("MainController", function($http, $scope ){
var vm = this;
vm.title = 'title';
vm.input = '';
$scope.submit = function (input, $scope, $http) {
$http.get("insert-url-here")
.success(console.log(input));
}
}
maybe you have some syntax error.
last time i worked with angular and the $http service i did something like this:
angular.module('app').controller('MainController', ['$scope', '$http', function($http, $scope ){
var vm = this;
vm.title = 'title';
vm.input = '';
$scope.submit = function (input) {
$http.get("insert-url-here")
.success(function(responseData) {
console.log(input));
});
}
//console.log(vm.input);
}]
You don't want to inject $scope and $http in your function. Injecting into you controller is sufficient. Should look like this:
$scope.submit = function (input) {
$http.get("insert-url-here")
.success(console.log(input));
//console.log(vm.input);
})]
I must be missing something very simple. I've seen a bunch of examples of angularFireCollection but no examples using in the way i'm using it in a service (perhaps that's the issue?). here's my code which is getting an angular injection error unknown provider:
angular.module('CommentBoxService', [])
.service('CommentBoxSvc', ['$rootScope', '$stateParams', '$http', '$location','angularFireCollection',
function ($rootScope, $stateParams, $http, $location, $firebase, angularFireCollection) {
var commentFireBase = null;
var user; var type;
var getFireBaseRef = function () {
user = ($location.absUrl().split('/'))[4].replace('#', '');
getType();
commentFireBase = angularFireCollection('https://XXX/users/' + user + '/comment-boxes/' + type);
return commentFireBase;
}
return {
getFireBaseRef : getFireBaseRef
}
}]);
am i missing something with the injection method?
I am trying to wire up a simple data service to retrieve data from the server for http calls. I am using TypeScript to write the code. For some reason I can't get the service to see its dependencies.
Here is the service the way it is generated by Typescript
var app = angular.module('app',[]);
app.constant('baseUrl', 'http://localhost:63342');
//This follows the pattern created by Typescript
var myService = function(){
function myService($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
return myService
}
app.factory('myService', [
'$http', 'baseUrl',
myService
]);
app.controller('myCtrl',
['$scope', 'myService',
function($scope, myService){
$scope.httpType = myService.http;
$scope.urlType = myService.url}]
);
When I run the code locally the p tags get the ng-bind attributes set on them. But, of course, they have nothing in them. When I break on the $scope assignments, myService is available and it has the $inject variable, but none of the other 4 variables. The available examples for Typescript and angular are pretty thin. There must be something really basic I am doing wrong.
Here is a fiddle with the code. I don't know why the fiddle doesn't transclude the scope variables.
The issue is in :
var myService = function(){
function myService($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
return myService
}
app.factory('myService', [
'$http', 'baseUrl',
myService
]);
Angular will call myService with arguments $http,baseUrl which myService does not accept. So you need to do :
var myService = function($http, baseUrl){
this.$http = $http;
this.baseUrl = baseUrl;
this.http = typeof this.$http;
this.url = typeof this.baseUrl;
}
myService.$inject = ['$http', 'baseUrl'];
Alternatively if you want to use TypeScript classes use the same pattern I recommend for Controllers : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1 and use service instead of factory
I was able to get it to work following a module pattern to expose your service's properties, as well as using the inline notation to declare the service. Check out the plunker here: http://plnkr.co/edit/tVajIshcCegIwywGWL9Y?p=preview. Code pasted below for the script:
var app = angular.module('app',[]);
app.constant('baseUrl', 'http://developer.echonest.com/api/v4/artist/news?api_key=FILDTEOIK2HBORODV&id=7digital-US:artist:304&format=json');
app.factory('myService', ['$http', 'baseUrl', function($http,baseUrl){
var http = typeof $http;
var url = typeof baseUrl;
return {
http: http,
url : url
};
}]);
app.controller('myCtrl',
['$scope', 'myService',
function($scope, myService){
$scope.httpType = myService.http;
$scope.urlType = myService.url;
}]
);