CODEWITHSUNDEEP
javascripthtmlasp.net-mvcangularjsasp.net-mvc-5
ProfK
ProfK

Reputation: 51114

Why is Angular not seeing my controller?

I am busy following a tutorial, as a total Angular novice, and have reached the point where the Controller is introduced. My MVC view is generating the following markup:

<script>
    function PersonController($scope) {
        $scope.persons = [
            { firstName: 'Brady', lastName: 'Kelly' },
            { firstName: 'James', lastName: 'Brown' },
            { firstName: 'Charles', lastName: 'Manson' }
        ];
    }
</script>
<table class="table" data-ng-controller="PersonController">
    <tr>
        <th>
            <span>Last Name</span>
        </th>
        <th>
            <span>First Name</span>
        </th>
        <th></th>
    </tr>

    <tr data-ng-repeat="pers in persons | orderBy:'lastName'">
        <td>
            {{pers.lastName}}
        </td>
        <td>
            {{pers.firstName}}
        </td>
        <td></td>
    </tr>
</table>

When I used the ng-init directive to instantiate the person array 'inline', eg:

<table class="table" data-ng-init="persons=[....]">

the data binding in the table worked, but when I use the ng-controller directive, as in my example above, I get an error in Chrome's console stating:

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

Upvotes: 0

Views: 96

Answers (2)

scniro
scniro

Reputation: 16989

It looks like you need to define your controller in a different fashion. I don't see an app definition in your example so be sure you have something that looks like the following, then chain your controller off app

<html ng-app="app">

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

app.controller('PersonController', ['$scope', function ($scope) {
    $scope.persons = [
        { firstName: 'Brady', lastName: 'Kelly' },
        { firstName: 'James', lastName: 'Brown' },
        { firstName: 'Charles', lastName: 'Manson' }
    ];
}]);

Upvotes: 2

dev
dev

Reputation: 313

You need to define your angular js module and inject $scope in PersonController. 

<script>
        angular.module('app', []);
        function PersonController($scope) {
            $scope.persons = [
                { firstName: 'Brady', lastName: 'Kelly' },
                { firstName: 'James', lastName: 'Brown' },
                { firstName: 'Charles', lastName: 'Manson' }
            ];
        }
        PersonController.$inject = ['$scope'];
    </script>

Upvotes: 0

Related Questions