CODEWITHSUNDEEP
angularjs
TBA
TBA

Reputation: 1197

Angular ng-controller Issue

Was going through a basic training of AngularJS however get stuck in the first place, with expressions are not evaluating with ng-controller dependency.

index.html

<html ng-app="store">
    <head>
        <title>Angular JS</title>
        <link rel="Stylesheet" type="text/css" href="bootstrap.min.css" />
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <h1>{{"Hello"}}</h1>
        <div ng-controller="StoreController as stores">

          <h1> {{stores.products.name}} </h1>
          <h2> {{stores.products.price}} </h2>
          <p> {{stores.products.description}} </p>  
        </div>
    </body>
</html>

app.js

(function () {

    var app = angular.module("store", []);
    app.controller = ('StoreController', function () {
        this.products = gem;
    });
    var gem =
        {
            name:'New Product',
            price:'2.95',
            description: 'This is something you would need to buy!!'
        }
})();

HTML Output

Hello
{{stores.products.name}}
{{stores.products.price}}
{{stores.products.description}}

Please help me what mistake I have done.

Upvotes: 3

Views: 602

Answers (3)

David Bohunek
David Bohunek

Reputation: 3201

It is more typical and I would say best practice to set any data on $scope. Then you don't have to use the alias for your controller and reference products simply. You would have to inject $scope into your controller. The code would look like:

index.html

<html ng-app="store">
    <head>
        <title>Angular JS</title>
        <link rel="Stylesheet" type="text/css" href="bootstrap.min.css" />
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <h1>{{"Hello"}}</h1>
        <div ng-controller="StoreController">

          <h1> {{products.name}} </h1>
          <h2> {{products.price}} </h2>
          <p> {{products.description}} </p>  
        </div>
    </body>
</html>

app.js

(function () {

    var app = angular.module("store", []);
    app.controller('StoreController', ['$scope', function($scope) {
        $scope.products = gem;
    }]);
    var gem =
        {
            name:'New Product',
            price:'2.95',
            description: 'This is something you would need to buy!!'
        }
})();

Upvotes: 2

Malkus
Malkus

Reputation: 3726

You have an = sign in your controller that is incorrect.

(function () {

    var app = angular.module("store", []);
    ////NOT app.controller = ('StoreController'.....
    app.controller('StoreController', function () {
        this.products = gem;
    });
    var gem =
        {
            name:'New Product',
            price:'2.95',
            description: 'This is something you would need to buy!!'
        }
})();

Upvotes: 2

ilaif
ilaif

Reputation: 348

Pay attention to ng-controller vs ng-repeat.

You want to set the ng-controller attribute to the controller name and in a different attribute ng-repeat for repeating the data.

Upvotes: -2

Related Questions