I have the following preloader.js factory file included in my project.
angular.module('movieSeat')
.factory('preloader', function( $q, $rootScope ) {
In my controller I inject the factory as following:
angular.module('movieSeat')
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', function ($scope, moviesearchFactory, preloader) {
When I try to use the preloadImages function inside the preload controller:
$scope.imageLocations = [
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//nlqFgG7jfBITl8fJHzL72jXwYLt.jpg",
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//ghL4ub6vwbYShlqCFHpoIRwx2sm.jpg",
"https://image.tmdb.org/t/p/w300_and_h450_bestv2//weUSwMdQIa3NaXVzwUoIIcAi85d.jpg",
];
preloader.preloadImages($scope.imageLocations)
I get the following error:
Cannot read property 'preloadImages' of undefined
If I comment out the preloader.preloadImages($scope.imageLocations) code the error is gone. So to me it looks like injecting the preloader factory in my controller works fine but I can't figure out why I can't call the function preloadImages on the preload factory.
There's a typo in the dependency injection list. You forgot to add preloader in the list of dependency strings.
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', 'preloader' /*here*/, function ($scope, moviesearchFactory, preloader) {
You need to reference your factory/service 'preloader' in your controller call as follows:
angular.module('movieSeat')
.controller('moviesearchCtrl', ['$scope', 'moviesearchFactory', 'preloader', function ($scope, moviesearchFactory, preloader) {
})
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.
I'm new to angular and have the following code.
angular.module('MyApp')
.controller('loginController', ['$scope', '$http', 'conditionalDependency',
function ($scope, $http, conditionalDependency{
}
I would like to have conditionalDependency loaded conditionally. Something like this
if(true)
{
//add conditionalDependency
}
How can this be done. I've seen this post . However, my requirement is that I have the dependency specified in function
Thanks in advance.
Not quite clear as to why you would have to have it in a named function like in your example but...
If you need conditional dependencies, I would suggest taking a look at the following:
Conditional injection of a service in AngularJS
I've used this method in a couple niche scenarios and it works quite well.
EXAMPLE:
angular.module('myApp').controller('loginController',
['$injector', '$scope', '$http',
function($injector, $scope, $http) {
var service;
if (something) {
service = $injector.get('myService');
}
});
You can use it even without injecting injector in your controller
if(something){
var injector = angular.element(document).injector();
var myService = injector.get('myService')
}
Use:
angular.injector().get('conditionalDep');
You can inject $injector once to your file and call $injector.get('dep');
I have a controller that it's not defined on $routeProvider. I use it internally inside other controllers. Is there a way to resolve a dependency without the $routeProvider?
==
My friend below asked for more information, here it goes:
I don't want to call promise methods (basically then) inside my controllers. But I have dependencies on some of this controllers that are promises. When a controller is defined on the $routeProvider, I can resolve its dependencies. But how about the controllers that are not defined there? Is there any solution? Follows an example:
My $routeProvider doesn't map this controller and this is the code I have to do because my Cart is a promise:
.controller('MyCtrl', ['$scope', 'Cart',
function ($scope, Cart) {
Cart.then(function(res) {
$scope.cart = res.query();
});
This is the code I'd like to do:
.controller('MyCtrl', ['$scope', 'Cart',
function ($scope, Cart) {
$scope.cart = Cart.query();
});
if you mean resolve -- dependency injection -- yes. below should work:
element.injector().invoke(['dep1','dep2', function(dep1,dep2){}])
...
the idea is to retrieve the current injector, and use invoke().
This may be a really simple question but I can't find anything in the ui-router docs. I want to call the $state.go() method to change a state in a controller, but I get a "$state not defined" error.
What is the dependency I need to put on my controller in order to be able to use $state and its methods?
It is the same as with any other service - include it's name in annotated dependency list or function arguments:
//without annotation (inferred, not safe when minifying code)
function Controller($scope, $state) {...}
//inline annotation
module.controller('Controller', ['$scope','$state', function($scope, $state) {...}]);
//$inject property annotation
function Controller($scope, $state) {...}
Controller.$inject = ['$scope', '$state'];
This is a noobie question:
I am playing with the Angular seed app and am trying to write a controller but am having no luck getting access to $scope (and any other dependency).
angular.module('myApp.controllers', []).
controller('mainCtrl', [function( $scope, $http ) {
$http.get('config/configuration.json').success( function( data ) {
$scope.gametitles = data.gametitles;
$scope.environments = data.environments;
$scope.playermanagerServer = data.playermanagerServer;
});
$scope.gametitle = $scope.gametitles[0];
$scope.environment = $scope.environments[0];
}])
If I break in the code, both $http and $scope are undefined. How do I get access to these?
Thanks in advance
I think the problem is in the syntax of your controller declaration. Try controller('mainCtrl', ['$scope', '$http', function ($scope, $http) { ... controller code ...}]);
you may want to check A's documentation for dependency injection in controllers here
Or,assuming you're not uglifying your code you could just use simpler injection formation:
controller('mainCtrl', function( $scope, $http ) {} )
(note that the function is not a member of an array, but passed directly)