CODEWITHSUNDEEP
javascripthtmlangularjs
user3720958
user3720958

Reputation: 1

AngularJS rendering as plaintext in HTML

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

Upvotes: 0

Views: 322

Answers (1)

Konstantin Krass
Konstantin Krass

Reputation: 8646

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.

Upvotes: 1

Related Questions