current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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!!

share|improve this question
up vote 2 down vote accepted

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.

share|improve this answer
up vote 2 down vote

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>

share|improve this answer
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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/

share|improve this answer
    
Thanks! The problem was the incorrect angular js version. I upgraded it to 1.3.1 and it worked. – Manisha Nov 5 '14 at 7:03
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.