AngularJS - Undefined controller

Question

I have just started an Angularjs tutorial and I fail in running the exercise from the first lesson. It is about creating 2 modules: the first is the bootstraper of the application and the second one contains 2 controllers.

This is the code:

app.js

'use strict';

angular.module('myApp', ['myApp.controllers'])
    .run(function ($rootScope) {
        $rootScope.title = 'Famouse books';
        $rootScope.name = 'Root Scope';
});

controllers.js

angular.module('myApp.controllers', []).controller('SiteController', function ($scope) {
    $scope.publisher = 'Site point';
    $scope.type = 'Web development';
    $scope.name = 'Scope for SiteController';
});

angular.module('myApp.controllers', []).controller('BookController', function ($scope) {
    $scope.books = ['Jump Start HTML 5', 'Jump Start CSS', 'Jump Start Responsive Web Design'];
    $scope.name = 'Scope for BookController';
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title ng-bind="title"></title>
    </head>

    <body ng-controller="SiteController">
        <span>{{publisher}} excels in {{type}} books</span>
        <div ng-controller="BookController">
            <h3>Some of the popular books from {{publisher}}</h3>
            <ul>
                <li ng-repeat="book in books">{{book}}</li>
            </ul>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
        <script src="scripts/app/controllers.js"></script>
        <script src="scripts/app/app.js"></script>
    </body>
</html>

I get the following error:

Bad Argument: Argument 'SiteController' is not a function, got undefined

angular.module('myApp.controllers', []) is setter (create) and angular.module('myApp.controllers') is getter (get already created one). — PSL
– PSL, Commented Dec 19, 2014 at 17:25

rnrneverdies · Accepted Answer · 2014-12-19 17:32:21Z

2

You added extra ,[] in second sentence. This creates a new module and therefore overwrites the first module that has "SiteController" defined - you want to add to the existing module:

angular.module('myApp.controllers', []).controller('SiteController', function ($scope) {
    $scope.publisher = 'Site point';
    $scope.type = 'Web development';
    $scope.name = 'Scope for SiteController';
});

// you added extra ,[]
angular.module('myApp.controllers').controller('BookController', function ($scope) {
    $scope.books = ['Jump Start HTML 5', 'Jump Start CSS', 'Jump Start Responsive Web Design'];
    $scope.name = 'Scope for BookController';
});

Calling angular.module('myApp.controllers', []) means: Create Module.

Calling angular.module('myApp.controllers') means: Get Module.

edited Dec 19, 2014 at 17:32

answered Dec 19, 2014 at 17:24

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Undefined controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related