CODEWITHSUNDEEP
angularjs
nanpakal
nanpakal

Reputation: 1021

angularjs [ng:areq] Argument 'fn' is not a function, got string

I am new to angular js..I am getting follwing error please help me out

[ng:areq] Argument 'fn' is not a function, got string

var app = angular.module('demo',[]);


app.config('$routeProvider',function($routeProvider){

    $routeProvider.when('/add',{
        templateUrl:'demo/add.html',
        controller:'addcontroller'
    }).
    when('/order',{
        templateUrl:'demo/order.html',
        controller:'ordercontroller'
    });

});

app.controller('addcontroller',function($scope){
    $scope.message="order";
});
app.controller('ordercontroller',function($scope){
    $scope.message="order";
});

Upvotes: 24

Views: 43118

Answers (7)

Karina D.
Karina D.

Reputation: 166

Since there's been various use cases added here, I thought I'd also add mine. I got this error when re-formating a function service

angular
.app('myApp')
.service('MyService', function (){
  // do something
return MyService;
})

into a class object:

export default class MyService { ... }

angular
    .app('myApp')
    .service('MyService', MyService);

My problem was that my service was returning itself at the end of the function and I needed to add a class function, which would do this:

export default class MyService {
  constructor(){
  // doing something
  }

  get() {
  return MyService;
  }
}

which fixed the issue for me. :)

Upvotes: 2

Aniruddha Das
Aniruddha Das

Reputation: 21698

For the the problem was defining factory dependency outside the array. Most probably the minification was also an issue.

//Error in this
  angular
    .module('mymodule').factory('myFactory', 'thisconstant', function (thisconstant) {

});

This fixed by

//correct code
  angular
    .module('mymodule').factory('myFactory', ['thisconstant', function (thisconstant) {

}]);

Upvotes: 2

R Vishnu Kumar
R Vishnu Kumar

Reputation: 11

In First line you need to use like this,

var app = angular.module('demo', ['ngRoute']);

and use the routing thing like this,

$routeProvider.when('/add').then({
        templateUrl:'demo/add.html',
        controller:'addcontroller'
    });

Just try these steps once.

Upvotes: 1

Gopal Krishnan
Gopal Krishnan

Reputation: 1146

I got this error by misunderstanding the way anonymous functions and named functions are treated in JavaScript.

This causes the error:

angular.module("app").factory("myDataService", ['$resource', myDataService]);
var myDataService = function($resource) {
    return $resource('/url');
}

I should've either done this:

var myDataService = function($resource) {
    return $resource('/url');
}
angular.module("app").factory("myDataService", ['$resource', myDataService]);

Or this:

angular.module("app").factory("myDataService", ['$resource', myDataService]);
function myDataService($resource) {
    return $resource('/url');
}

More on the difference between anonymous function and named function here

Upvotes: 1

Carlos Muentes
Carlos Muentes

Reputation: 31

I know this is an older post, but thought I'd contribute what was wrong with my code with this exact error. I was injecting a service into my controller this way:

theApp.directive('theDirective', 'myService', ['$http', function ($http, myService) {}]);

Instead of this:

theApp.directive('theDirective', ['$http', 'myService', function ($http, myService) {}]);

Notice that my service was included outside of the inline array annotation! It was a boneheaded move on my part that cost me way too much time.

Upvotes: 3

Gudlaugur Egilsson
Gudlaugur Egilsson

Reputation: 2460

Although not directly related to the context of this question, this error message can also be caused by a resolve block returning something else than a function, like this:

$stateProvider.state('mystate', {
    url: "/myurl",
    templateUrl: "mytemplate.html",
    controller: "MyController",
    resolve: {
        authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
});

if securityAuthorizationProvider.requireAuthenticatedUser happens to be undefined, you can get this error.

Upvotes: 15

wiherek
wiherek

Reputation: 1923

I think the error is in the config block, it should either be:

app.config(function($routeProvider){
  // routeProvider config
});

or better:

app.config(['$routeProvider', function($routeProvider){
  // routeProvider config, allows minification
}]);

the annotations are there for minification to work correctly. You can read more about it on AngularJS docs https://docs.angularjs.org/tutorial/step_05 Please note that this practice needs to be done throughout the app to work correctly.

Upvotes: 34

Related Questions