CODEWITHSUNDEEP
angularjs
J23
J23

Reputation: 13

AngularJS - Undefined controller

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

Upvotes: 1

Views: 176

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15667

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.

Upvotes: 2

Related Questions