I'm migrating from AngularJS 1.2.26 to 1.3.2 and receive an Error
Not the best error message to work out but it looks like it is saying that my controller is not defined? Can I no longer define controllers this way?
Error: error:areq
Bad Argument
Argument 'welcomeController' is not aNaNunction, got undefined
My index page is something like:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js"></script>
var myApp = angular.module('kioskApp', ['ngRoute','ngSanitize']).run(function($rootScope, $location, $timeout) {
$rootScope.authenticated = true;
});
myApp.config(function($routeProvider, $locationProvider, $sceDelegateProvider) {
$routeProvider
.when('/welcome', {
templateUrl : 'pages/welcome.php',
controller : 'welcomeController'
});
});
function welcomeController($rootScope, $scope, $http, $location) {
//stuff
}
My welcome page is something like:
<div ontouchmove="preventDrag(event)" ng-show="authenticated">
<!-- some images -->
</div>
You could use controller: welcomeController (without the quotes) to use it as a function. Otherwise, do something like myApp.controller('welcomeController', welcomeController).
You should also learn the syntax for dependency injection
Related
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 have created a web api project and after that i am going to create single page application but getting some error so i am posting my code below:
My angularjs code:
var app = angular.module('myApp', ['ngRoute']);
app.config('$routeProvider', function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
})
.when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
})
.when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
});
app.controller('myController', function ($scope) {
$scope.message = 'Home';
});
app.controller('admin', function ($scope) {
$scope.message = 'Admin';
});
app.controller('addusers', function ($scope) {
$scope.message = 'addusers';
});
and my html page:
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController">
Home
Admin
Add Users
<br />
<div ng-view> </div>
</body>
</html>
and getting below angularjs error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0AD%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0ADb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A106%0AWa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A193%0Asc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A32%3A423%0Ad%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A398%0Ae%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A386%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A223%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A207%0AEventListener.handleEvent*sb%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A143%3A241%0Aa%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A150%3A402%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A149%3A381%0AS.prototype%5Bc%5D%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A154%3A57%0AS.prototype.ready%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A122%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A447%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A2%0A
Your controller definitions (dependency injection parts) is wrong.
You can follow the john papa's style guide for angular
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
}).when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
}).when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
}]);
app.controller('myController', ['$scope', function ($scope) {
$scope.message = 'Home';
}]);
app.controller('admin', ['$scope', function ($scope) {
$scope.message = 'Admin';
}]);
app.controller('addusers', ['$scope', function ($scope) {
$scope.message = 'addusers';
}]);
I am working on a SPA in angular as well and got the same error very recently,
This is something that i found to happen when i was using ngRoute. ngRoute works but it seems very messy to me and kept giving me this error and some other ones.
I was probably just using it wrong, but i recommend you switch to "UI-Router"
It should clean up the way you do routing and make it easier to handle objects throughout your project.
You're using the config wrong. You don't need to use '$routeProvider' as a parameter.
Incorrect
app.config('$routeProvider', function ($routeProvider) {
});
Correct
app.config(function ($routeProvider) {
});
Also, Angular no longer uses ngRoute out of the box. It's a separate file you need to include (note the version):
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js
I'm working on an angularjs application that is having an "app.js" file. This file contains the following code:
var app = angular.module("myApp", ['ngRoute', 'ngCookies'])
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/UserProfileInfo/:UserId', {
templateUrl: 'Views/Users/UserProfileInfo.html',
controller: 'UserProfileInfoController'
})
.otherwise({
redirectTo: "/"
});
}]);
As you can see that above code is having a "UserProfileInfo" route that receives "UserId" route paramenter.
An html page is having a link tag referencing to the "UserProfileInfo" route and the code for this:
<a ng-href="#UserProfileInfo/{{item.UserId}}" ng-hide="hideViewUser" class="glyphicon glyphicon-trash" title="View"></a>
This link is referring to
www.somedomain.com/#/UserProfileInfo/131
The controller code for this UserProfileInfo view is below:
app.controller("UserProfileInfoController", ["$scope", "$location" "$routeParams", "$q", function ($scope, $location, $routeParams, $q) {
$scope.userProfileId = $routeParams.UserId;
}]);
The problem occurrs at this line:
$scope.userProfileId = $routeParams.UserId;
The UserId from $routeParams is coming undefined.
I have used all the required scripts on Index.html page:
<script src="Content/js/jquery-1.11.3.min.js"></script>
<script src="Content/js/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-cookies.min.js"></script>
Kindly help me I'm missing anything.
Please help me in fixing this issue.
Thanks in advance.
I am trying to use a service inside my angular controller, however I am getting the error in the TypeError: Cannot read property 'get' of undefined.
This is how my app.js script look like:
angular
.module('ToDoApp', ['ngAnimate', 'todoService'])
.controller('ToDoController', ['$scope', function($scope, $http, Todo) {
Todo.get()
.success(function(data) {
$scope.tasks = data;
});
// ...
}]);
It doesn't know about the get propery. This is how Todo looks like:
angular.module('todoService', [])
.factory('Todo', function($http) {
return {
get: function() {
return $http.get('/todos');
},
// ...
}
});
And I'm loading the scripts in this order:
<script src="{{ asset('/scripts/services/todoService.js') }}"></script>
<script src="{{ asset('/scripts/app.js') }}"></script>
The error sounds to me like the controller isn't getting the service object correctly, like this dependency is missing. But I already loaded the dependency with the module.
What am I missing?
Deleted my previous comment, figured out what you had wrong. You're using the array notation to fix minification, but you're only listing $scope, you need to list the others as well, meaning you need to add the $http and the ToDo:
angular
.module('ToDoApp', ['ngAnimate', 'todoService'])
.controller('ToDoController', ['$scope', '$http', 'ToDo', function($scope, $http, Todo) {
Todo.get()
.success(function(data) {
$scope.tasks = data;
});
// ...
}]);
I have an view (insight index.html) like that:
<body ng-app="mainApp" ng-controller="MainCtrl">
[...]
<div>{{status}} </div>
</body>
I start the App onDeviceReady:
angular.element(document).ready(function() {
angular.bootstrap(document);
});
I have this module:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
controller: MainCtrl,
template: '<h1> Main View {{ status }} </h1>'
});
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel):/);
});
As far as I know, there are different ways to define a controller. One way is like that:
mainAppModul.controller('MainCtrl',['$scope', function ($scope)
{
$scope.status = "It works!";
}]);
The other one is like this:
function MainCtrl ($scope)
{
$scope.status = "It works!";
}
While the 1st Version results in [ng:areq] Argument 'MainCtrl ' is not a function, got undefined, the 2nd Version works fine.
Is there something I misunderstood in general?
ngRoute works in combination with ngView You won't need to specify the ng-controller in your templates, ngRoute takes care of that for you. When you have this:
var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
$routeProvider
.when('/', {
// controller: MainCtrl, // EDIT: needs to be a string of the controller name
controller: 'MainCtrl',
template: '<h1> Main View {{ status }} </h1>'
});
});
All you need is this:
<html ng-app="myApp">
<body>
<ng-view></ngview>
</body>
</html>
ngRoute will put the template of the specified route into ng-view and use the associated controller.
Note: ngRoute does not come with angular.js, you'll need the angular-route.js included as well.