CODEWITHSUNDEEP
javascriptangularjs
akpersad
akpersad

Reputation: 17

Why isn't my ng-controller being called?

I'm trying to follow a tutorial to familiarize myself with Angular. So if this questions is incredibly simple, I apologize in advance. In my index.html, I'm trying to call one of the controllers to test out how Angular calls certain things.

In the code, I have <div ng-controller="listCtrl">. However, something as simple as {{3+5}} isn't being evaluated and being printed to the page as is. I've tried messing around with the ng attribute and when I have something like

<div ng-app="">
    {{3+5}}
</div>

it will work and print out 8. I was wondering if someone could take a look at the code (posted below) and tell me what I'm doing wrong.

My index.html file:

<!doctype html>
<html lang="en" ng-app="turtleFacts">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>Heading</h1>
        <h3>Heading3
        <strong>QUIZ</strong>
        </h3>
</div>

<div ng-controller="listCtrl">
    {{dummyData}}
</div>

</div>

<!-- My application scripts -->
<script src="js/app.js"></script>
<script src="js/controllers/list.js"></script>

</body>
</html>

My list.js:

(function(){
    angular
        .module("turtleFacts")
        .controller("listCtrl", ListController);

    function ListController($scope) {
        $scope.dummyData = "hello world";
    }
})

And my app.js:

(function() {
    angular
        .module("turtleFacts", []);
})();

My folder structure looks like:

Project
 |
 +-- css
 |    
 +-- js
 |  |  
 |  +-- controllers
 |  |  |
 |  |  +-- list.js
 |  | 
 |  +-- app.js
 |    
 +-- index.html

It's my assumption that the page should have "Hello World" but all I'm getting is {{dummyData}}. Please let me know if there's any other information I can provide that you may need. Thanks!

Upvotes: 0

Views: 70

Answers (1)

elfan
elfan

Reputation: 1131

In the list.js, you forgot to add (); at the end of your IIFE :)

Upvotes: 2

Related Questions