AngularJS module doesn't load

javascript html debugging angularjs module

12,993

You're currently loading your _script.js first, and angular JS second. If you reorder them your script should work:

12,993

Author by

P Griep

Student - Information Science (Web development)

Updated on June 04, 2022

Comments

P Griep almost 2 years

My module isn't loading, and I can't figure out why. Could someone help me to find out what I am doing wrong?

The following is my HTML in a file named index.html:

<html ng-app="demoApp">
    <head>
        <title>Using AngularJS Directives and Data Binding</title>
        <script type="text/javascript" src="_Script.js"></script>
        <script src="angular.min.js"></script>
    </head>
    <body>
        <!-- Get name out of array with controller using a module-->
        <h3>Get names out of an array with controller using a module:</h3>
        <div class ="container" ng-controller="SimpleController">
            <input type="text" ng-model="search" /> {{ search }}
            <ul>
                <li ng-repeat="naam in namen | filter:search" >{{ naam }}</li>
            </ul>   
        </div>
    </body>
</html>

And this is the Javascript in a file named _Script.js:

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

function SimpleController($scope) {
    $scope.namen = [
        'John', 
        'Will', 
        'Alex'
    ];
}

demoApp.controller('SimpleController', SimpleController);

I've looked for everything, so maybe it is simple. But I can't find it and got stuck with it.

Regards,

John Munsch almost 11 years

@PGriep, don't. Silly mistakes are normal in programming. JavaScript lets you do more than some languages without alerting you too. I was accidentally assigning a value not to $scope.value the other day but directly to $scope, which suddenly meant that the $scope wasn't working correctly anywhere :)