HTML Page with AngularJS not rendering properly

Question

I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
enter image description here
HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <script type="text/javascript" src="angular.min.js"></script>
    <script src="controllers.js"></script>
</head>
<body ng-app>
    <div ng-controller="HelloController">
        <p>{{greeting.text}}</p>
    </div>
</body>
</html>

Javascript (in external controllers.js file):

function HelloController($scope)
{
    $scope.greeting = {text:"Hello"};
}

I am sure I'm missing something simple but any help would be greatly appreciated,

Sean

Have you confirmed that angular.min.js is in the same directory as controller.js (like you have it)? — Jack
– Jack, Commented Aug 4, 2014 at 23:13

bhantol · Accepted Answer · 2014-08-04 23:38:13Z

3

You are missing ng-app="????"

You also need to inject the controller in the module.

Here is the jsfiddle

http://jsfiddle.net/yogeshgadge/2436t/14/

The HTML

<body ng-app="myApp">
    <div ng-controller="HelloController">
        <p>{{greeting.text}}</p>
    </div>
</body>

The JS part

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

app.controller('HelloController', 
  function($scope) {
    $scope.greeting = {
        text: "Hello"
    };
 }
);

edited Aug 4, 2014 at 23:38

answered Aug 4, 2014 at 23:28

bhantol

9,6368 gold badges48 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sean Cox Over a year ago

Looks like the book was incorrect or may have been wrote for a way earlier version. Thanks.

bhantol Over a year ago

it is possible to take a regular named function and define it as a ctrl or service but it is not much of a norm. also books may be of older edition.

Collectives™ on Stack Overflow

HTML Page with AngularJS not rendering properly

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related