I have:
app.controller('ReportsCtrl', ['$scope', 'reportsApiCall', 'analyticsInitialiserClient', '$timeout', 'chart', 'originCompositionChart', 'executionTimeChart', 'cacheCompositionChart', function ($scope, reportsApiCall, analyticsInitialiserClient, $timeout, chart, originCompositionChart, executionTimeChart, cacheCompositionChart) {
But I like the syntax of using. myController.$inject = ['$scope','notify'];
But I don't want to declare the name of myController, because then I'm polluting the global namespace. Is there a way I can go: ?
app.controller('ReportsCtrl', function ($scope, reportsApiCall, analyticsInitialiserClient, $timeout, chart, originCompositionChart, executionTimeChart, cacheCompositionChart) {
}).$inject();
Because that syntax is failing for me at the moment :( ?
You could do this:
(function(){
myController.$inject = ['service1','service2'];
function myController(s1,s2){
//controller logic
}
app.controller('myCtrl',myController);
}());
I use grunt-ngmin to annotate my source code when it's minified and just don't place annontations in my code directly.
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 getting an error when running my app: Argument 'AppCtrl' is not a function, got undefined - I believe it has something to do with the separation of controller files?
Ok, so I have in my first file: app.js this:
angular.module('zerochili', [
'ionic',
'zerochili.controllers',
'zerochili.services',
'zerochili.directives'
])
Then I have some different controller files - Lets take the file there the AppCtrl is - This looks like the following:
angular.module('zerochili.controllers', [])
.controller('AppCtrl', ['$scope', '$ionicModal', '$timeout', function ($scope, $ionicModal, $timeout){
}])
And another file fx like so:
angular.module('zerochili.controllers', [])
.controller('LoginCtrl', ['$scope', '$state', '$ionicPopup', '$timeout', function($scope, $state, $ionicPopup, $timeout){
}]);
What am I doing wrong? Can't seem to quite figure it out?
You can think of your app.js as the part where you define the module. The controller files should be adding to the module (not have ", []" as this creates the module).
You should probably be doing this in your controllers
angular.module('zerochili')
.controller('AppCtrl', etc.
So, remove these: 'zerochili.controllers', 'zerochili.services', 'zerochili.directives' from the app.js and add your controllers,services and directives to the 'zerochili' module like above.
If you want to keep, for example, 'zerochili.controllers' make sure that you don't create this module twice, i.e. have angular.module('zerochili.controllers', []) twice.
It's only because you are creating a new modul with []
you can put at the end of your app.js
angular.module('zerochili.controllers', []);
angular.module('zerochili.directives', []);
angular.module('zerochili.services', []);
and then use it like this:
angular.module('zerochili.controllers')...
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) {
})
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.
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');