I want to make a promise in my angularjs controller. I took the example from the Angularjs Doc and pasted it in my controller. When I try to run the code, the console prints:
Error: $q is not defined
Why is this error happening and how do I solve it?
I tried to google this problem, but most questions revolve about more specific problems than mine.
A (german) guide tells me that promises are already in angular js implemented and there is no need to add anything to it.
EDIT:
this is my controller:
app.controller("ArgumentationController", [
'$scope', '$resource',
function($scope, $resource) {
EDIT2:
A commentor suggested to inject $q. I did this:
app.controller("ArgumentationController", [
'$scope', '$resource', '$q',
function($scope, $resource, $q) {
Now, the error does not occur.
From your past code, no need of $resource in your code. Instead inject $q in it.
As you are creating a dummy promise using $q, make following changes.
app.controller("ArgumentationController", [
'$scope', '$q',
function($scope, $q) {
Related
I'm trying to inject my factory into my controller and I'm getting this error from AngularJS:
Error: $injector:unpr Unknown Provider
I have looked through almost all of the questions on here and still cannot find a solution to my problem. I believe my controller and factory and declared correctly and the injection is correct but it looks like this isn't the case.
My factory code is as follows:
var app = angular.module('test', []);
app.factory('processingFactory', function () {
var factory = {};
factory.newTest = function() {
console.log("TEST");
}
return factory;
});
This is then injected into the controller which looks like this:
angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']).controller("dashboardController", [
"$scope",
"$timeout",
"$http",
"$window",
"$interval",
"$resource",
"ModalService",
"$filter",
'$q',
'processingFactory',
function($scope, $timeout, $http, $window, $interval, $resource,
ModalService, $filter, $q, processingFactory) {
//other code removed
$scope.newWorkorder = processingFactory.newWorkorder;
}
]);
This function is called through a button click on the web page. All of the files needed are in script tags on this html page. I am fairly new to angular so this could be a simple error or something I am not aware of.
Calling angular.module with an array as the second argument declares a module, which can only happen for any given module name. You are declaring the module twice (once in your controller code, and again in your factory code).
Try changing the first part of your factory code to:
var app = angular.module('test');
If you are doing the same thing elsewhere in the app you will need to remove the second argument there too, so that there is only one module declaration in the whole app.
if there are any dependencies for your module "test" why do not you have them declared in the first line itself like:
var app = angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']);
Then declare your controller like::
app.controler(...)
Things should work fine.
For the first time ever I am facing this issue and I am struggling a lot in trying to figure out why and how to fix it.
I have two services, service1 and service 2, but apparently, there's a circular dependency like this:
serv1 <- serv2 <- serv1
The services code is the following:
angular.module('service1', [])
.service 'serv1', ['$rootScope','$http','$location','serv2',
function ($rootScope, $http, $location, serv2){
serv2.doMyOtherThing(...)
}
]
and service2 is the following:
angular.module('service2', [])
.service 'serv2', ['$rootScope','$http','$location','serv1',
function ($rootScope, $http, $location, serv1){
serv1.doMyThing(...)
}
]
why is there a circular dependency? how do I solve this?
Each service is specific for something (serv1 variou utilities and serv2 array utilities) and I need to use the two together sometimes but it's currently not possible.
Thanks for any help
If you see this Miško Hevery's blog you will understand that :
...
.service 'serv1', ['$rootScope','$http','$location','serv2'
.service 'serv2', ['$rootScope','$http','$location','serv1',
The serv1 needs serv2 and serv2 needs serv1. And this is going to train a circular dependency.
So you could use a third service
Or you can resolve this like this :
angular.module('service1', [])
.service 'serv1', ['$rootScope','$http','$location','serv2',
function ($rootScope, $http, $location, serv2){
serv2.doMyOtherThing(...)
}
]
angular.module('service2', [])
.service 'serv2', ['$rootScope','$http','$location','$injector',
function ($rootScope, $http, $location, $injector){
var serv1 = $injector.get('serv1');
serv1.doMyThing(...)
}
]
Use a third service, use that third service in the other ones.
example:
angular.module('service1',[])
.service 'serv1' [..,'servCommon', function(..,servCommon){}]
angular.module('service2',[])
.service 'serv2' [..,'servCommon', function(..,servCommon){}]
angular.module('serviceCommon',[])
.service 'servCommon' [.., function(..){}]
Add some common function in that servCommon and use them from other two.
Hope this helps.
ng-repeat is not binding with the $scope as the data-set is being generated in the console.
Here is the working plunk
Kindly load it over http as the data set may not be generated over https.
Any workaround would be appreciated.
That was a costly but silly miss; the injection order went wrong in your main controller which resulted in injecting $scope to $timeout alias and vice versa. Change
.controller('demoController',['$mdDialog','$q','$scope','$timeout','$http',
function($mdDialog,$q,$timeout,$scope,$http) {
to
.controller('demoController', ['$mdDialog', '$q', '$scope', '$timeout', '$http',
function($mdDialog, $q, $scope, $timeout, $http) {
This is a general dependency injection question. Obviously I am doing it wrong.
I am trying to get angular-xeditable working in my app.
https://vitalets.github.io/angular-xeditable/
I've installed it using bower, and added the appropriate script link to my head.
Now I'm trying to inject it.
The docs say
var app = angular.module("app", ["xeditable"]);
so, in my app: I do this:
portalApp.controller('portalController',
['$scope', '$http','$filter', 'xeditable',
function($scope, $http, $filter, xeditable) {
but I get the provide error, meaning it can't find xeditable.
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=xeditableProvider%20%3C-%20xeditable%20%3C-%20portalController
What am I doing wrong?
OK, duh. It should be
var portalApp = angular.module("portalApp", ['xeditable']);
portalApp.controller('portalController', ['$scope', '$http','$filter', function($scope, $http, $filter) {
I'm still getting lots of errors, but at least not that one.
Hey guys got a little problem that i cant seem to see the problem for. Im building an angular application and im getting the error stated in the question title. Ive injected the $timeout to the controller but im still getting an error with this bit of code can some one tell me where i may be going wrong?
cheers
(function() {
'use strict';
angular
.module('my.module')
.controller('NewSearchController', NewSearchController);
NewSearchController.$inject = ['$rootScope', '$scope', '$location','UserService',
'SearchService', '$window', '$controller', '$mdDialog', 'ModalService', '$routeParams', '$timeout'];
/**
* #namespace ContactController
*/
function NewSearchController($rootScope, $scope, $location, UserService, SearchService, $window, $controller, $mdDialog, $routeParams, $timeout)
Timeout code:
var timerMax = false;
$scope.$watch(NewSearchController.searchObject.maxDayRate, function(){
if(timerMax) {
$timeout.cancel(timerMax);
}
timerMax= $timeout(function() {
NewSearchController.updateSearchFilters();
}, 5000);
});
The problem is in your injection: 'ModalService' listed as injectable but not one of the parameters so angular will inject 'ModalService' and the values you get for parameters later in the list are all wrong.
If you use something like gulp to build your app then use gulp-ng-annotate to build the injection list automatically. That way it won't go wrong and you never have to worry about it.
'$mdDialog', 'ModalService', '$routeParams', '$timeout']
$mdDialog, $routeParams, $timeout
these two dnt match Change it to
$mdDialog,ModalService, $routeParams, $timeout
you have injected $timeout at position 11th position in controller but in function it is at 10th position as u have missed ModalService in function.So the error is just because of this . You need to inject and add the dependcies at same position otherwise it wont work.