CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Anuvrat Tiku
Anuvrat Tiku

Reputation: 1646

ng-controller not rendering data to browser

I am new to Angular JS and I am facing some issues in the ng-controller which is not sending values to the browser screen. I am using angular 1.5.8. How can I get this code to display values.Attached is my output as well enter image description here Here is my code : script.js

(function () {
var gem = {
    name: "Dodecahedron",
    price: 2.95,
    description: "great stone"
};
var app = angular.module('store', []);
app.controller('StoreController', function () {
    this.product = gem;
});
})();

html file

<!DOCTYPE html>
<html data-ng-app="store">
<head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="script.js" ></script>
    <link rel="stylesheet" type="text/css"       href="bootstrap/bootstrap/css/bootstrap.min.css">
    <meta charset="UTF-8">
    <title>Angular Demo</title>
</head>
<body >
{{"Hello" + "Angular"}}
<br />
Here is Where our gem information will be displayed through the controller.

<div ng-controller="StoreController">
    {{"Hello" + "Angular"}}
    <h1>Product name : {{StoreController.product.name}}</h1>
    <h2>Produce Price : {{StoreController.product.price}}</h2>
    <p>Product Description : {{StoreController.product.description}}</p>
</div>

</body>
</html>

Upvotes: 1

Views: 59

Answers (4)

Prince Antony P
Prince Antony P

Reputation: 140

You can use $scope variable inside controller

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

in html you can access $scope variables directly like this

<div ng-controller="StoreController">
    {{"Hello" + "Angular"}}
    <h1>Product name : {{product.name}}</h1>
    <h2>Produce Price : {{product.price}}</h2>
    <p>Product Description : {{product.description}}</p>
</div>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222682

You should use $scope variable 

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

DEMO

else you can use the Controller as syntax.

Upvotes: 1

Umakanta Behera
Umakanta Behera

Reputation: 265

You are missing "StoreController as StoreController".

<div ng-controller="StoreController as StoreController">
    {{"Hello" + "Angular"}}
    <h1>Product name : {{StoreController.product.name}}</h1>
    <h2>Produce Price : {{StoreController.product.price}}</h2>
    <p>Product Description : {{StoreController.product.description}}</p>
</div>

Working plunker here.

Upvotes: 1

Deendayal Garg
Deendayal Garg

Reputation: 5158

In case you don't want to use $scope, you can use controller as systax.

<div ng-controller="StoreController as ctrl">
    {{"Hello" + "Angular"}}
    <h1>Product name : {{ctrl.product.name}}</h1>
    <h2>Produce Price : {{ctrl.product.price}}</h2>
    <p>Product Description : {{product.description}}</p>
</div>

Upvotes: 0

Related Questions