Pesto Pesto - 1 month ago 8
AngularJS Question

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!

Answer

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

Comments