CODEWITHSUNDEEP
javascriptangularjstypescript
aleczandru
aleczandru

Reputation: 5459

Uncaught Error: [ng:areq] Argument 'fn' is not a function, got undefined

Hi I am trying to build my first Angular app with Typescript but I can not seem to bind a controller correctly.

This is my typescript code:

module App {
   var modules: string[] = ["App.Person"];
   angular.module('App', modules)
          .run([]);
} 

module App.Person {
   angular.module('App.Person', []);
}

module App.Person {
    angular.module("App.Person")
           .controller('PersonCtrl', PersonCtrl);

    interface IPersonScope extends ng.IScope {
        fullName: string;
    }

    class PersonCtrl{
        public $scope: IPersonScope;

        static $inject = ['$scope'];
        constructor($scope: IPersonScope) {
            this.$scope = $scope;
            this.init();            
        }
        init() : void  {
            this.$scope.fullName = 'Justin S.';
        } 
    }
}

This is my view:

 <article ng-app="App">
    <section ng-controller="PersonCtrl">
        <p ng-bind="fullName"></p>
    </section>
</article>

I am getting the following error:

Uncaught Error: [ng:areq] Argument 'fn' is not a function, got undefined

How can I fix this issue?

Upvotes: 1

Views: 6258

Answers (1)

S.T.Kannan
S.T.Kannan

Reputation: 31

Most likely you might have missed to include the controller js file (ex: <script src='path/angularController.js'></script>) in your layout page. If this is fine, then please double check if you have multiple ng-app in your html.

Upvotes: 3

Related Questions