Controller not defined angular js

Question

I am a novice in Angular Js. I am getting this error: contactController is not defined

My Sample code is as follow:

HTML

    <!doctype html>
    <html ng-app>
      <head>
        <title>Contact Manager</title>


        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

          <script src="controllers/contactController.js"></script>

      </head>
      <body>
      <div ng-app="app" ng-controller="ContactController">
        <form class="well">
            <label>Name</label>
            <input type="text" name="name" ng-model="newcontact.name" />
            <label>Email</label>
            <input type="text" name="email" ng-model="newcontact.email" />
            <label>Phone</label>
            <input type="text" name="phone" ng-model="newcontact.phone" />
            <br/>
            <input type="hidden" ng-model="newcontact.id" />
            <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
        </form>
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contacts">
                    <td>{{ contact.name }}</td>
                    <td>{{ contact.email }}</td>
                    <td>{{ contact.phone }}</td>
                    <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                    </td>
                </tr>
            </tbody>
        </table>
    </div>

      </body>


    </html>

contactController.js

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

    angular.module('app', []).service('ContactService', function () {
        //to create unique contact id
        var uid = 1;

        //contacts array to hold list of all contacts
        var contacts = [{
            id: 0,
            'name': 'Megha',
                'email': '[email protected]',
                'phone': '123-2343-44'
        }];

        //save method create a new contact if not already exists
        //else update the existing object
        this.save = function (contact) {
            if (contact.id == null) {
                //if this is new contact, add it in contacts array
                contact.id = uid++;
                contacts.push(contact);
            } else {
                //for existing contact, find this contact using id
                //and update it.
                for (i in contacts) {
                    if (contacts[i].id == contact.id) {
                        contacts[i] = contact;
                    }
                }
            }

        }

        //simply search contacts list for given id
        //and returns the contact object if found
        this.get = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    return contacts[i];
                }
            }

        }

        //iterate through contacts list and delete 
        //contact if found
        this.delete = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    contacts.splice(i, 1);
                }
            }
        }

        //simply returns the contacts list
        this.list = function () {
            return contacts;
        }
    });

    angular.module('app', []).controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {

        $scope.contacts = ContactService.list();

        $scope.saveContact = function () {
            ContactService.save($scope.newcontact);
            $scope.newcontact = {};
        }


        $scope.delete = function (id) {

            ContactService.delete(id);
            if ($scope.newcontact.id == id) $scope.newcontact = {};
        }


        $scope.edit = function (id) {
            $scope.newcontact = angular.copy(ContactService.get(id));
        }
    }])

You are defining the same module angular.module('app', []) twice instead of referencing it. Try angular.module('app').controller(... — Rahil Wazir
– Rahil Wazir, Commented Jul 31, 2015 at 6:18

Kutyel · Accepted Answer · 2015-07-31 06:18:43Z

2

You are defining your controller outside the angular module, change these lines:

    //simply returns the contacts list
        this.list = function () {
            return contacts;
        }
    })
    // continue in the same module, define the controller
    .controller('ContactController',['$scope', 'ContactService', function ContactController($scope, ContactService) {
        $scope.contacts = ContactService.list();

answered Jul 31, 2015 at 6:18

Kutyel

9,1644 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denis Thomas · Accepted Answer · 2015-07-31 06:19:26Z

1

The call:

angular.module('app', [])

will create a new module (caused by the dependency list argument []). So you are basically creating 2 modules.
Change the second call which creates the controller to:

angular.module('app').controller(....)

this will get the existing module rather than creating a new one.

answered Jul 31, 2015 at 6:19

Denis Thomas

1,0221 gold badge8 silver badges17 bronze badges

Comments

Andrés Felipe García Ortiz · Accepted Answer · 2015-07-31 06:55:29Z

First uncomment this:

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

Change the lines for controller declaration:

app.controller('ContactController',  function ($scope, ContactService)

And for the service

app.service('ContactService', function (){});

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

    app.service('ContactService', function () {
        //to create unique contact id
        var uid = 1;

        //contacts array to hold list of all contacts
        var contacts = [{
            id: 0,
            'name': 'Megha',
                'email': '[email protected]',
                'phone': '123-2343-44'
        }];

        //save method create a new contact if not already exists
        //else update the existing object
        this.save = function (contact) {
            if (contact.id == null) {
                //if this is new contact, add it in contacts array
                contact.id = uid++;
                contacts.push(contact);
            } else {
                //for existing contact, find this contact using id
                //and update it.
                for (i in contacts) {
                    if (contacts[i].id == contact.id) {
                        contacts[i] = contact;
                    }
                }
            }

        };

        //simply search contacts list for given id
        //and returns the contact object if found
        this.get = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    return contacts[i];
                }
            }

        };

        //iterate through contacts list and delete 
        //contact if found
        this.delete = function (id) {
            for (i in contacts) {
                if (contacts[i].id == id) {
                    contacts.splice(i, 1);
                }
            }
        };

        //simply returns the contacts list
        this.list = function () {
            return contacts;
        };
    });

    app.controller('ContactController',  function ($scope, ContactService) {

        $scope.contacts = ContactService.list();

        $scope.saveContact = function () {
            ContactService.save($scope.newcontact);
            $scope.newcontact = {};
        };


        $scope.delete = function (id) {

            ContactService.delete(id);
            if ($scope.newcontact.id == id) $scope.newcontact = {};
        };


        $scope.edit = function (id) {
            $scope.newcontact = angular.copy(ContactService.get(id));
        };
    });

<html ng-app="app">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="js/contactController.js"></script>

</head>
<body>
  <div  ng-controller="ContactController">
    <form class="well">
        <label>Name</label>
        <input type="text" name="name" ng-model="newcontact.name" />
        <label>Email</label>
        <input type="text" name="email" ng-model="newcontact.email" />
        <label>Phone</label>
        <input type="text" name="phone" ng-model="newcontact.phone" />
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
        <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary" />
    </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name }}</td>
                <td>{{ contact.email }}</td>
                <td>{{ contact.phone }}</td>
                <td> <a href="javascript:void(0)" ng-click="edit(contact.id)">edit</a> | <a href="javascript:void(0)" ng-click="delete(contact.id)">delete</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

</body>


</html>

Shaishab Roy · Accepted Answer · 2015-07-31 08:24:29Z

0

You should remove second time dependency. Dependency injection need only first time.

Like:

angular.module('app', []).service('ContactService', function ()......

angular.module('app').controller('ContactController', .....

or you can use:

var app = angular.module('app', []);
app.service('ContactService', function ()......
app.controller('ContactController', ....

answered Jul 31, 2015 at 8:24

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Collectives™ on Stack Overflow

Controller not defined angular js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related