I'm trying to get this fileuploader plugin working on a page (it's actually .cshtml, but hopefully that's not the source of the problem). I don't know how to debug angular references to find out what's missing.
The fileuploader does work in a different place in the app:
markup: Views\Shared_MasterClientLayout.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<body id="ng-app" ng-app="clientPortal"
controller: www\public\app\disabilities\disabilities.app.js
(function () {
'use strict';
var app = angular.module('disabilities', ['angularFileUpload']);
app.controller('disabilitiesController', ['$scope', '$rootScope', '$routeParams', '$fileUploader', disabilitiesController]);
function disabilitiesController($scope, $rootScope, $routeParams, $fileUploader) {
}
})();
But it does not work on my page:
markup: Views\Referral\ThankYou.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<div id="ng-app" ng-app="cmorApp">
controller: ReferralContent\app\CreateReferral\cm.attachmentUploadCtrl.js
var AttachmentUploadCtrl = ['$scope', '$http', '$fileUploader',
function ($scope, $http, $fileUploader) {
I get
Uncaught Error: [$injector:unpr] Unknown provider: $fileUploaderProvider <- $fileUploader
I can see on the Sources tab in Dev tools that angular-file-upload-min.js has been loaded.
The worst part about this is a lack of consistency of implementation across pages that the various components are spread across. I know of no way to debug angular empirically.
I literally have no way to tell which of several apps is running, which controller is attached to a page and which is referring to what page.
Is there any way of inspecting a page and exposing what objects are loaded on it?
Can I write console.log(ng-app) and have it return 'cmorApp'?
Or console.log(app.controller) and have it return 'AttachmentUploadCtrl'?
I am new to angular and was trying to get a modal window and following http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
But when I load the page, I get following error -
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=drag-and-drop&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fnomod%3Fp0%3Ddrag-and-drop%0AR%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A6%3A417%0AOd%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A412%0Aa%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A53%0AOd%2F%3C%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A21%3A1%0Ag%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A35%3A46%0Ar%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A7%3A300%0Ag%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A34%3A399%0Aab%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A38%3A135%0Auc%2Fd%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A17%3A381%0Auc%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A18%3A179%0AJd%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A17%3A1%0A%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.15%2Fangular.min.js%3A250%3A429%0Am.Callbacks%2Fj%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A27239%0Am.Callbacks%2Fk.fireWith%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A28057%0A.ready%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A29889%0AJ%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1%2Fjquery.min.js%3A2%3A30255%0A
Now I did some research and found it may be due to injection as proper modules cannot be found
Here is my controller initialization -
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $modal) {...});
Now I tried all these options but they keep on giving different errors
var App = angular.module('drag-and-drop', ['ngAnimate']);
App.controller('oneCtrl', function($scope, $modal) {...});
Then defining like this -
App.controller('oneCtrl', ['$scope', '$modal', function($scope, $modal) {
My scripts that I have included are -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="{!$Resource.AngularDragDrop}" ></script>
Any help will be very pleasing for me
THanks,
Ray
You are trying to use $modal object which belongs to angular-ui-bootstrap library, if you really wanted to use the modal popup, I'd suggest you to add angular-ui-bootstrap library in your project.
After adding library reference you need to add ui.bootstrap module reference in your app dependency.
var App = angular.module('drag-and-drop', ['ngDragDrop', 'ui.bootstrap']);
Or if you don't want that modal over there you could remove $modal from controller dependency.
As your given link has a code which inject modals dependency and there is modals custom service defined in that code. You need to add that service in your app.
I'm trying to do some unit tests with Jasmine in my Angular application, but I'm facing some errors.
Error
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
Spec
describe("testing the controller", function () {
var $controllerConstructor;
var scope;
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
}));
it("should validate a contact", function () {
var ctrl = $controllerConstructor('crmContatosCtrl', { $scope: scope });
});
});
App.js
angular
.module('app', ['ngRoute', 'LocalStorageModule'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
// My routeProvider here
}]);
I'm not using neither Yeoman nor Karma yet, because this is my fisrt application using Angular.
Included Files
<script src="../../Scripts/jasmine/jasmine.js"></script>
<script src="../../Scripts/jasmine/jasmine-html.js"></script>
<script src="../../Scripts/jasmine/boot.js"></script>
<script src="../../Scripts/angular/angular.js"></script>
<script src="../../Scripts/angular/angular-mocks.js"></script>
<script src="../../Scripts/angular/angular-route.js"></script>
<script src="../../Scripts/angular/angular-local-storage.js"></script>
<script src="../../Scripts/ngStorage.js"></script>
<script src="../../Scripts/ng-infinite-scroll.js"></script>
<script src="../../Scripts/angular/common.js"></script>
<link href="../../Scripts/jasmine/jasmine.css" rel="stylesheet" />
<script src="../core/app.js"></script>
<script src="../crm/contatos.js"></script>
<script src="contatosSpec.js"></script>
I think you may simply have a problem with your configuration for the dependencies for the tests. Without Karma I don't know how you do the tests but I guess you have somewhere a configuration file for Jasmine where you specify the files to be included. You have to include all files and you have to include first all the libraries. Be careful with the order and try to respect the same as you have in your html file that you use to run the application.
If the order is wrong the JS will try to execute before the libraries it needs are included. In your case maybe even the whole angular stack.
Update
Do not forget that Jasmine works using it's own html file and will not include the libraries you usually use if you do not tell it. And also don't forget to include Angular Mock library , essential for your tests
Update 2
Ok I think I found why you have a problem
There is something wrong in this code
beforeEach(module('app', ['ngRoute', 'LocalStorageModule']));
In angular when you call a module using module('smthg',[]) you are creating it, not calling it. You should use this form instead, there is no need to reimport the services that you already included in your main module.
beforeEach(module('app'));
check the Creating versus Retrieval section of the angular documentation https://docs.angularjs.org/guide/module
Using AngularJS with Scala Play, I'm getting this error.
Error: Argument 'MainCtrl' is not a function, got undefined
I'm trying to create a table consisting of the days of the week.
Please take a look at my code. I had checked the name of the Controller, but that seems correct. Note: Code used from this SO answer
index.scala.html
#(message: String)
#main("inTime") {
<!doctype html>
<html lang="en" ng-app>
<head>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
</head>
<div ng-controller="MainCtrl">
<table border="1">
<tbody ng-repeat='(what,items) in data'>
<tr ng-repeat='item in items'>
<td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
</html>
}
MainCtrl.js
(function() {
angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
$scope.data = {
Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}
});
}());
Remove the [] from the name ([myApp]) of module
angular.module('myApp', [])
And add ng-app="myApp" to the html and it should work.
FIRST.
check if you have correct controller in the route definitions, same as the controller names that you are defining
communityMod.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/members', {
templateUrl: 'modules/community/views/members.html',
controller: 'CommunityMembersCtrl'
}).
otherwise({
redirectTo: '/members'
});
}]);
communityMod.controller('CommunityMembersCtrl', ['$scope',
function ($scope) {
$scope.name = 'Hello community';
}]);
different controller names in this example will lead to errors, but this example is correct
SECOND check if you have imported your javascript file:
<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>
I had the same error message (in my case : "Argument 'languageSelectorCtrl' is not a function, got undefined").
After some tedious comparison with Angular seed's code, I found out that I had previously removed a reference to the controllers module in app.js. (spot it at https://github.com/angular/angular-seed/blob/master/app/js/app.js)
So I had this:
angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])
This failed.
And when I added the missing reference:
angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])
The error message disappeared and Angular could instanciate the controllers again.
Some times this error is a result of two ng-app directives specified in the html.
In my case by mistake I had specified ng-app in my html tag and ng-app="myApp" in the body tag like this:
<html ng-app>
<body ng-app="myApp"></body>
</html>
This seriously took me 4 HOURS (including endless searches on SO) but finally I found it: by mistake (unintentionally) I added a space somewhere.
Can you spot it?
angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);
So ... 4 hours later I saw that it should be:
angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);
Almost impossible to see with just the naked eye.
This stresses the vital importance of revision control (git or whatever) and unit/regression testing.
I have encountered the same problem and in my case it was happening as a result of this problem:
I had the controllers defined in a separate module (called 'myApp.controllers') and injected to the main app module (called 'myApp') like this:
angular.module('myApp', ['myApp.controllers'])
A colleague pushed another controller module in a separate file but with the exact same name as mine (i.e. 'myApp.controllers' ) which caused this error. I think because Angular got confused between those controller modules. However the error message was not very helpful in discovering what is going wrong.
In my case (having an overview page and an "add" page) I got this with my routing setup like below. It was giving the message for the AddCtrl that could not be injected...
$routeProvider.
when('/', {
redirectTo: '/overview'
}).
when('/overview', {
templateUrl: 'partials/overview.html',
controller: 'OverviewCtrl'
}).
when('/add', {
templateUrl: 'partials/add.html',
controller: 'AddCtrl'
}).
otherwise({
redirectTo: '/overview'
});
Because of the when('/' route all my routes went to the overview and the controller could not be matched on the /add route page rendering. This was confusing because I DID see the add.html template but its controller was nowhere to be found.
Removing the '/'-route when case fixed this issue for me.
If you are in a submodule, don't forget to declare the module in main app.
ie :
<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);
angular.module('subModule1')
.controller('MyController', ['$scope', function($scope) {
$scope.moduleName = 'subModule1';
}]);
</script>
...
<div ng-app="mainApp">
<div ng-controller="MyController">
<span ng-bind="moduleName"></span>
</div>
If you don't declare subModule1 in mainApp, you will got a "[ng:areq] Argument "MyController" is not a function, got undefined.
Уmed's second point was my pitfall but just for the record, maybe it's helping someone somewhere:
I had the same problem and just before I went nuts I discovered that I had forgotten to include my controller script.
As my app is based on ASP.Net MVC I decided to keep myself sane by inserting the following snippet in my App_Start/BundleConfig.cs
bundles.Add(new ScriptBundle("~/app").Include(
"~/app/app.js",
"~/app/controllers/*.js",
"~/app/services/*.js" ));
and in Layout.cshtml
<head>
...
#Scripts.Render("~/app")
...
</head>
Now I won't have to think about including the files manually ever again.
In hindsight I really should have done this when setting up the project...
I got sane error with LoginController, which I used in main index.html.
I found two ways to resolve:
setting $controllerProvider.allowGlobals(), I found that comment in Angular change-list
"this option might be handy for migrating old apps, but please don't use it in new ones!" original comment on Angular
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
wrong contructor of registering controller
before
LoginController.$inject = ['$rootScope', '$scope', '$location'];
now
app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);
'app' come from app.js
var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);
I had the same error with a big mistake:
appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){
}]);
You see ? i forgot the '' around the first $scope, the right syntax is of course:
appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){
}]);
A first error i didn't see immediatly was: "$scope is not defined", followed by "Error: [ng:areq] Argument 'TreeEditStepControlsCtrl' is not a function, got undefined"
In my case it was a simple typo in index.html:
<script src="assets/javascript/controllers/questionssIndexController.js"></script>
that should have been
<script src="assets/javascript/controllers/questionsIndexController.js"></script>
without the extra s in the controller's name.
Could it be as simple as enclosing your asset in " " and whatever needs quotes on the inside with ' '?
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
becomes
<link rel="stylesheet" media="screen" href="#routes.Assets.at('stylesheets/main.css')">
That could be causing some problems with parsing
To fix this problem, I had to discover that I misspelled the name of the controller in the declaration of Angular routes:
.when('/todo',{
templateUrl: 'partials/todo.html',
controller: 'TodoCtrl'
})
Turns out it's the Cache of the browser, using Chrome here. Simply check the "Disable cache" under Inspect (Element) solved my problem.
Because this pops-up in Google when trying to find an answer to: "Error: Argument '' is not a function, got undefined".
It's possible that you are trying to create the same module twice.
The angular.module is a global place for creating, registering and
retrieving AngularJS modules.
Passing one argument retrieves an existing angular.Module, whereas
passing more than one argument creates a new angular.Module
Source: https://docs.angularjs.org/api/ng/function/angular.module#overview
Example:
angular.module('myApp', []) Is used to create a module without injecting any dependencies.
angular.module('myApp') (Without argument) is used to get an existing module.
There appear to be many working solutions suggesting the error has many actual causes.
In my case I hadn't declared the controller in app/index.html:
<scipt src="src/controllers/controller-name.controller.js"></script>
Error gone.
I know this question is old and AngularJS is on its way out, but I want to add my answer anyway. In my case, I created a new file in Visual Studio Code but did not add the .js extension to my controller file name. That is what led to this error for me.
The following file "works" (the sense that it does not throw any errors):
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider) {
});
</script>
</html>
but this
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider, $rootScope) {
});
</script>
</html>
gives the error:
Error: Unknown provider: $rootScope from modx
Source File: http://code.angularjs.org/angular-1.0.0rc7.js
Line: 2491
WTF?
You can not ask for instance during configuration phase - you can ask only for providers.
var app = angular.module('modx', []);
// configure stuff
app.config(function($routeProvider, $locationProvider) {
// you can inject any provider here
});
// run blocks
app.run(function($rootScope) {
// you can inject any instance here
});
See http://docs.angularjs.org/guide/module for more info.
I've found the following "pattern" to be very useful:
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
function MainCtrl (scope, rootscope, location, thesocket, ...) {
where, MainCtrl is a controller. I am uncomfortable relying on the parameter names of the Controller function doing a one-for-one mimic of the instances for fear that I might change names and muck things up. I much prefer explicitly using $inject for this purpose.
I don't suggest you to use syntax like you did. AngularJs lets you to have different functionalities as you want (run, config, service, factory, etc..), which are more professional.In this function you don't even have to inject that by yourself like
MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];
you can use it, as you know.