1

I am going over a tutorial on Angular JS, I have gone over the code several times and its exactly as the person types but get {{name}} and {{age}} in the browser.

Can anyone tell me what I am doing wrong? Another question that I have is that in one tutorial his html document has got the head and body tags in another its just the doctype, a link to angular and then he starts typing his code.

If this is a style, which one should I follow, shall i leave the body tag on or remove them?

<!doctype html>
<html ng-app>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body>
    <div ng-controller="Ctrl">
        <input ng-model="name">
         <h1>{{name}}</h1>

         <h2>{{age}}</h2>

    </div>
    <script>
        var Ctrl = function($scope) {
            $scope.name = "James";
            $scope.age = "20";
        }
    </script>
</body>

simeg
  • 1,889
  • 2
  • 26
  • 34
lana
  • 281
  • 1
  • 3
  • 10
  • 2
    You should include your opening html and body tags in the example, as the problem could lie there. For instance you need to have ng-app as an attribute in the html tag, I can't tell if you do without seeing the whole example – Digital Fu Dec 27 '14 at 01:42
  • 1
    Check the browser console for errors, I suspect you haven't initialised the ng-app and associated the controller function with the app module. – TheLazyChap Dec 27 '14 at 01:54

2 Answers2

4

Bootstrap your angular app, and register your controller

 var app = angular.module('app',[]);
 app.controller('ctrl', function($scope){
     $scope.name = 'james';
     $scope.age = 20;
});

HTML

<body ng-app="app" ng-controller="ctrl">
    {{name}}<br />
     {{age}}
 </body>
Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • Just as a side note, if you wish to validate the html, you will need to add 'data' ie ng-app would become data-ng-app, this is valid html5. – James Dec 28 '14 at 10:21
0

Your tutorial seems a bit old. Your code is almost valid for Angular 1.2+ (it won't run in 1.3+). See here for details.

You do need to add an ng-app directive:

<div ng-app="" ng-controller="Ctrl">

See example here.

As @pixelbits says in his answer, though, you should do it the newer way.

Community
  • 1
  • 1
Mark
  • 106,305
  • 20
  • 172
  • 230