Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS not recognizing controller

So I already know when I see the answer I'm going to feel really dumb, but I'm working through the AngularJS tutorials at egghead.io. When I do this:

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS Tutorials</title>
        <link rel="stylesheet" href="/foundation/stylesheets/foundation.min.css">
        <script src="js/main.js"></script>
        <script src="lib/angular/angular.js"></script>
    </body>
    </head>
    <body>
        <div ng-app="myApp">

            <div ng-controller="FirstCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{ data.message }}</h1>
            </div>

            <div ng-controller="SecondCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{ data.message }}</h1>
            </div>
        </div>  
</html>

with my JavaScript file as so (named main.js):

var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
    return { message: "I'm data from a service"}
})

function FirstCtrl($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl($scope, Data) {
    $scope.data = Data;
}

My {{ data.message }} isn't recognized as an AngularJS binding (i.e. in the page it shows up as
{{ data.message }} instead of "I'm data from a service"). But if I take all the JS code and put it into <script></script> tags directly in the HTML it works fine. Am I missing a reference or something? Haven't seemed to find this anywhere, likely because it's really basic.

like image 759
Jordan Plahn Avatar asked Feb 13 '26 05:02

Jordan Plahn


2 Answers

I'm going to JUMP THE GUN and recommend you switch these

<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>

to

<script src="lib/angular/angular.js"></script>
<script src="js/main.js"></script>

If this works then that is because before you were trying to use angular when it wasn't event loaded.


Tip


Now, when I first started with javascript these sort of things used to happen to me a lot. The best thing for you to do is learn how to use the console it would have told you in the console something along the lines of cannot read property 'module' of undefined that meaning that angular is undefined and therefore not loaded.

like image 122
iConnor Avatar answered Feb 15 '26 18:02

iConnor


Load Angular before your controllers, not after

like image 24
Jeff Voss Avatar answered Feb 15 '26 18:02

Jeff Voss



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!