Angularjs : Controller values not getting displayed in html page

Question

I've just started learning angular.js . I wrote a basic controller in app.js file and set its property. I'm trying to access this data inside html page but in vain. Controller property values are not getting shown in webpage. Below is the code :

app.js :

(function(){
    var app = angular.module('gemStore',[]);
    var gem = {name: 'Diamond', price: 120, description: 'Hard'};
    app.controller('StoreController', function() {
        this.product = gem;

    });



})();

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" ></script>
<script type="text/javascript"  src="js/app.js" ></script>

<p> {{"Hello, Angular!"}}</p>

<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<h3>{{store.product.description}}</h3>
</div>
</body>
</html>

Please tell me where am i going wrong!!

Jussi Kosunen · Accepted Answer · 2014-11-04 11:42:23Z

2

The "controller as"-syntax was added in 1.2.0 (or thereabouts), I don't think it was in 1.0.7. Try using a newer version of Angular. If you're stuck with 1.0.7 then you need to use $scope.

answered Nov 4, 2014 at 11:42

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

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

Comments

Karlen Kishmiryan · Accepted Answer · 2014-11-04 11:59:40Z

Your AngularJS version doesn't supports StoreController as store syntax. Change it to StoreController and simply remove the stores. Also you must inject the scope object into the controller and set its properties instead.

Here is the updated and working code.

var app = angular.module('gemStore', []);
var gem = {
  name: 'Diamond',
  price: 120,
  description: 'Hard'
};

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

<!DOCTYPE html>
<html ng-app="gemStore">

<head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>

  <p>{{"Hello, Angular!"}}</p>

  <div ng-controller="StoreController">
    <h1>{{product.name}}</h1>
    <h2>{{product.price}}</h2>
    <h3>{{product.description}}</h3>
  </div>
</body>

</html>

Marc Harry · Accepted Answer · 2014-11-04 11:42:06Z

1

The controller as syntax in angular was introduced in version 1.2 and you are using version 1.0.7. If you update the version of angular in your script tags to 1.2 or above it will work fine.

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js" ></script>

You can also see this working fine on the following link: http://jsbin.com/tadinesime/2/edit

I hope this helps.

answered Nov 4, 2014 at 11:42

Marc Harry

2,43021 silver badges22 bronze badges

Comments

Michael · Accepted Answer · 2014-11-04 11:38:13Z

0

Set

ng-app="gemStore"

on the body (or in whatever html tag which contains your angularjs code)

here's the jsfiddle: http://jsfiddle.net/49yrj986/

answered Nov 4, 2014 at 11:38

Michael

3,3345 gold badges27 silver badges37 bronze badges

1 Comment

Manisha Over a year ago

Thanks! The problem was the incorrect angular js version. I upgraded it to 1.3.1 and it worked.

user3050538 · Accepted Answer · 2015-02-28 11:57:32Z

0

this is a course on http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/2/our-first-controller if someone else wants to try these tutorials

answered Feb 28, 2015 at 11:57

user3050538

891 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angularjs : Controller values not getting displayed in html page

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related