I get the following error when adding a directive to my site:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
The error only occurs when I include the welcome-directive (welcome.js) in my site. If the import is removed the controller works.
Body of my index.html
<body ng-app="my-app">
<div ng-controller="MainController">
<welcome></welcome>
</div>
<!-- Angular -->
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<!-- Without this line the controller works -->
<script src="js/directives/welcome.js"></script>
</body>
app.js
(function() {
var app = angular.module('my-app', []);
})();
mainController.js
angular.module('my-app', [])
.controller('MainController', ['$scope', function($scope) {
console.log('Controller working');
}]);
welcome.js
angular.module('my-app', [])
.directive("welcome", function() {
return {
restrict: "E",
template: "<div>Test test.</div>"
};
});
You are redefining the module. Define module only once.
when used as angular.module('my-app', []) it defined the module this should be used only once. When you want retrieve it. then use angular.module('my-app')
Use
angular.module('my-app') //Notice remove []
.directive("welcome", function() {
});
passing a 2nd argument like this angular.module('my-app', []) creates a new module, use it only once.
To retrive a module use var module = angular.module('my-app') and use module.controller(... or module.directive(.... etc.,
Related
How can i assign multiple controller within a body
Html
<script src="../MyApp.js"></script>
<script src="HomeCaller.js"></script>
<body ng-app="MyApp">
<div ng-controller="AppCtrls">{{secc}}</div>
<div ng-controller="HomeCtrls">{{jan}}</div>
</body>
MyApp.js
(function () {
'use strict'
var app = angular.module('MyApp', [])
app.controller('AppCtrls', function ($scope) {
$scope.secc = "Hello Angular"
})
})();
HomeCaller.js
angular.module('MyApp', [])
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
Remove the [] from the module call so you do not try to re-create it. This will retrieve the existing MyApp module.
HomeCaller.js
angular.module('MyApp')
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
This is in app.js:
var angular = angular.module('ngApp', ['ngRoute']);
angular.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '../templates/companies.html',
controller: 'companies'
})
.........
});
This is in companies.js:
angular.module('ngApp').controller('companies', ['$scope', function($scope) {
.........
}]);
This is in index.html:
<head>
<title>Basic demo</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/Controllers/companies.js" type="text/javascript" ></script>
</head>
I keep getting this error:
Uncaught TypeError: angular.module is not a function
at companies.js:1
What am I doing wrong?
You are trying to use a variable called angular. Think what causes that variable to exist. That is found in the angular.js script which must then be included first.
At the time your angular code runs, angular does not exist yet. This is an error (see your console window of Dev Tools ). Kindly use same version of Angular file and angular-route !
Your problem is that you've overwritten angular object in app.js file:
var angular = angular.module('ngApp', ...
Try renaming angular variable to something else, like app.
Here is a plunker example of it:
http://plnkr.co/edit/t9KoqROnfWda8XsThOPE
Use same version of Angular and AngularRoute
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
(function () {
'use strict';
var myApp = angular.module('ngApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
//....
})
})();
This seems to be yet another variation on a very common theme with Angular. I have a controller that isn't being picked up and I can't pinpoint what's missing.
Here are the key areas:
My Layout.cshtml page has the following:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="http://cdn.date-fns.org/v1.3.0/date_fns.min.js"></script>
<script src="~/js/utility/utility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="~/js/app.js"></script>
<script src="~/js/utility/config.js"></script>
<!-- models -->
<script src="~/js/models/game.js"></script>
<!-- services -->
<script src="~/js/services/game.js"></script>
<!-- controllers -->
<script src="~/js/controllers/home-controller.js"></script>
App.ts looks like this:
/// <reference path="utility/utility.ts" />
var app;
(function () {
'use strict';
app = angular.module(Utility.Resources.appName, ['ngRoute'])
})();
My config.ts is set up like this (a few deliberate redundancies in the routes to begin with):
(function () {
'use strict';
app.config(function ($routeProvider, $locationProvider) {
console.info('routes');
$routeProvider.when(Utility.Urls.game, {
templateUrl: Utility.Templates.game
}).when(Utility.Urls.home, {
templateUrl: Utility.Templates.home
}).when(Utility.Urls.team, {
templateUrl: Utility.Templates.team
}).otherwise({
redirectTo: Utility.Urls.home
//templateUrl: Utility.Templates.home
});
$locationProvider.html5Mode(true);
});
app.run(function ($rootScope, $location) {
console.info('running');
$rootScope.$on('$routeChangeStart', function (event, nextRoute, currentRoute) {
console.info("Started");
});
});
})();
And the controller in question looks like this:
var Controllers;
(function (Controllers) {
'use strict';
var Home = (function () {
function Home($scope, gameService) {
$scope.vm = this;
console.info("In Home Controller");
$scope.games = [];
$scope.categories = [];
$scope.selectedGame = {};
gameService = gameService;
$scope.get = function () {
console.info("Getting");
};
}
Home.$inject = [
Utility.Angular.$scope, Utility.Services.gameService
];
return Home;
}());
Controllers.Home = Home;
})(Controllers || (Controllers = {}));
So far I can't see anything that's obviously missing but when opening the home template...
<div class="row" ng-controller="Controllers.Home">
<div class="col-md-3">
<h3>Games</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-info" ng-repeat="game in games" id="{{game.Id}}" ng-click="get(game.Id)">
<div>
<p><span class="meta">{{game.Date}}</span> <span class="pull-right"><i class="glyphicon glyphicon-calendar"></i> {{game.Season}}</span></p>
<p>{{game.Team.Name}} vs {{game.Opposition}}</p>
</div>
</li>
</ul>
</div>
... the debugger returns the following error: Argument 'Controllers.Home' is not aNaNunction, got undefined.
So I'm sure I've overlooked something. Perhaps a dependency in my controller or maybe one of the models? Except I'm not seeing any other errors in the debugger that would indicate a problem.
Any ideas?
UPDATE:
georgeawg is basically right. The missing part is in my config:
app.config(function ($routeProvider, $locationProvider) {
console.info('routes');
$routeProvider.when(Utility.Urls.game, {
templateUrl: Utility.Templates.game
}).when(Utility.Urls.home, {
templateUrl: Utility.Templates.home,
controller: Controllers.Home // <- here
...
Be sure to declare the controller function to the module as a controller type.
app.controller("Controllers.Home", Controllers.Home);
From the Docs:
Error: ng:areq
Bad Argument
Argument 'Controllers.Home' is not a function, got undefined
Description
AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and matches the type mentioned in the error.
-- AngularJS Error Reference -- $compile -- ng:areq
i'm trying to build an AngularJS app that has one Controller, one Service and that Bootstraps manually (no ng-app). The problem is that I keep having an error :
Argument 'AppController' is not a function, got string
HTML
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" type="text/javascript"></script>
<script src="inc/bootstrap.js" type="text/javascript"></script>
<script src="inc/controllers.js" type="text/javascript"></script>
<script src="inc/services.js" type="text/javascript"></script>
</head>
<body ng-controller="AppController">
[...]
</body>
</html>
bootstrap.js
angular.element(document).ready(function() {
angular.bootstrap(document, ['htmlControllerApp']);
});
controllers.js
angular.module('htmlControllerApp', [])
.controller('AppController', 'ConnectionService', ['$scope', function ($scope, ConnectionService) {
// Code
}]);
services.js
angular.module('htmlControllerApp')
.factory('ConnectionService', ['$rootScope', function ($rootScope) {
// Code
}]);
Thanks
EDIT - SOLUTION
In controllers.js, use instead :
angular.module('htmlControllerApp')
.controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
// Code
}]);
In bootstrap.js, as a "good practice" :
angular.module('htmlControllerApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['htmlControllerApp']);
});
This will create the module just once in bootstrap.js and AngularJS will try to retrieve it in controllers.js and services.js.
This is the page you're looking for.
https://docs.angularjs.org/api/ng/function/angular.bootstrap
and change this
angular.module('htmlControllerApp', [])
.controller('AppController', 'ConnectionService', ['$scope', function ($scope, ConnectionService) {
// Code
}]);
to this ->
angular.module('htmlControllerApp', [])
.controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
// Code
}]);
I'm trying to inject $scope in a controller created using the $controller service.
I'm getting the following error:
Unknown provider: $scopeProvider <- $scope <- TestController
It's important to mention that the creation is happening inside a directive's link function.
I've written a simple example to show the error.
app.js:
(function() {
angular.module('app', [])
.controller('TestController', [
'$scope',
function($scope) {
// I want to be able to use 'message' from the directive's template
// as if the controller was loaded directly using ng-controller
$scope.message = 'Hello World!';
}
])
.directive('directive', [
'$controller',
function($controller) {
return {
restrict: 'A',
template: '<div>{{ message }}</div>',
link: function(scope) {
// In the actual app the controller is dynamically selected
// I'm registering a $watch here that provides me the
// name of the controller
scope.myController = $controller('TestController');
}
};
}
]);
})();
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Testing injection</title>
</head>
<body>
<div directive></div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Question: Why is this happening? Can you explain me the logic behind this behaviour? Any workaround?
Thank you.
Following Digix's answer, I was able to make it work:
var locals = {};
locals.$scope = scope;
$controller('TestController', locals);
My assumption is that in this way, instead of creating a new scope, the controller shares the one of the directive.
var locals = {};
locals.$scope = scope.$new();
$controller('testCtrl', locals);