2

I'm new to angularJS and I am stuck on a basic step. I'm following the video tutorial and I can't even get a simple binding to work. For some reason, my output is still just the string {{totalTodos}} and not the value 4. What am I doing wrong? I am editing in jetbrains webstorm and I downloaded the angular library through the CDN link if thats relevant.

My index.html:

<!doctype HTML>    
<html ng-app>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.css">

</head>
<body>
<div ng-controller="TodoCtrl">
    {{totalTodos}}
</div>
</body>
</html>`

My todo.js:

function TodoCtrl($scope) {
    $scope.totalTodos = 4;
}
user2900984
  • 23
  • 1
  • 5
  • Open console (F12), there should be an error stating that `TodoCtrl` is not defined. – dfsq Dec 28 '14 at 20:28
  • With Angular 1.3.x you need to have a module and declare controller on the module. You can't have global function as controller anymore. See Simba's answer. – dfsq Dec 28 '14 at 20:34
  • ok, thank you. I guess I should follow a more up to date tutorial. Thank you for your help. – user2900984 Dec 28 '14 at 20:36

1 Answers1

2

You have to use a controller in the javascript file, which is similar to what you had, but not excactly. Also make sure you give the app a name.

it should look more like:

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

app.controller('TodoCtrl', function ($scope) {
  $scope.totalTodos = 4;
});

To give the app a name just do ng-app="appname" in the HTML file when you define the ng-app

Simba
  • 1,641
  • 1
  • 11
  • 16
  • Wow, ok thank you so much it works now. The video I was following is outdated I guess. Thank you so much. – user2900984 Dec 28 '14 at 20:35
  • @user2900984 The video you followed is for Angular 1.2.x. Declare the module is the rest will be fine. – dfsq Dec 28 '14 at 20:37