Function Undefined

Web Language: Angular.js

Issue: Having trouble with the controller recognizing the variable name (AlbumListController). It works fine if the array is placed  within the body tag outside of the script. I can not figure out why it is not recognizing the variable and displaying the contents in the browser correctly (see attached file result.jpg). Any assistance would be greatly appreciated!  Any recommendations would be appreciated.

ERROR
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=AlbumListController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)

Open in new window


HTML
<html ng-app>
<head>
    <link   rel="stylesheet" href="CSS/app.css">
    <link   rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="scripts/bootstrap/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="scripts/angular/angular.min.js"></script>
    <script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
</head>

<body ng-controller="AlbumListController">

<div style="padding: 50px">

   <p><input placeholder="Type to Search"  type="text" ng-model="searchFor" size="30"/> </p>
    <p>
        There are {{albums.length}} to view
    </p>
    <div class="album panel panel-primary" ng-repeat="album in albums | filter:{title: searchFor} | orderBy:'date'">

    <!--Default panel contents-->
        <div class="panel-heading">

            <div style="float: right">{{album.date}}</div>
            {{album.title }}
        </div>
            <div class="description">
                    {{album.description}}
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function AlbumListController ($scope) {
        $scope.albums = [
            { name: 'madrid1309', title: 'Weekend in Madrid', date: '2013-09-01', description: 'My favourite trip' },
            { name: 'iceland1404', title: 'Holiday in Iceland', date: '2014-04-15', description: 'This place is cold' },
            { name: 'thailand1210', title: 'Surfing in Thailand', date: '2012-10-01', description: 'So hot!' },
            { name: 'australia1207', title: 'Wedding in Australia', date: '2012-07-31', description: 'So many kangaroos and koalas!' }
        ];
    }
</script>
</body>
</html>

Open in new window


CSS
body {
    padding: 50px;
}
input[type=text] {
    padding: 3px;
    border-radius: 5px;
    border: 1px solid #bbb;
}
.album {
    width: 300px;
    float: left;
    margin-right: 10px;
}
div.album div.title {
    float: right;
}

Open in new window

result.jpg
Michael ReeveAsked:
Who is Participating?
 
Robert SchuttSoftware EngineerCommented:
I only know the very basics myself but got your code working by adding a couple of small things:

1) app name
<html ng-app="albumApp">

Open in new window


2) app/controller init code:
    var albumApp = angular.module('albumApp', []);
    albumApp.controller('AlbumListController', AlbumListController);

Open in new window


(adapted to fit your code from this tutorial).

Live example here: http://schutt.nl/ee/Q_28653887/
0
 
Michael ReeveAuthor Commented:
Thank you Robert! This has helped me so much! Thank you so much for taking the time to solve the problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.