AngularJS rendering as plaintext in HTML

Question

I'm following the AngularJS Tutorial on Code School, and my JavaScript won't render into the HTML.

Here is the HTML

<html ng-controller="StoreController as store">
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
    <div>
        <h1> {{store.product.name}} </h1>
        <h2> $ {{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
    </div>  
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

and here is the Angular

(function(){
var app = angular.module("store", []);

app.controller('StoreController',function(){
    this.product = gem;
});

var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description:"..."
    };
})();

The angular is just rendering as plaintext

Konstantin Krass · Accepted Answer · 2014-06-17 08:23:31Z

The ngApp is missing at the top.

<html data-ng-app="store">
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
    <div ng-controller="StoreController as storeCtrl">
        <h1> {{storeCtrl.product.name}} </h1>
        <h2> $ {{storeCtrl.product.price}} </h2>
        <p> {{storeCtrl.product.description}} </p>
    </div>  
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

And you gem variable is used by angular, before it's actually defined.

(function(){
var app = angular.module("store", []);

var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description:"..."       
};

app.controller('StoreController',function(){
    this.product = gem;
});

)();

And i'd recommend to move the script tags to the top, because you do this, to make the html render faster, but this will cause in angular applications to show your ugly placeholders for milliseconds.

And append the -Ctrl suffix, to the controller view variable, this will make it clear, when you actuall access the controller or it's just a scope variable.

Collectives™ on Stack Overflow

AngularJS rendering as plaintext in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related