Angular ng-controller Issue

Question

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.

Are you getting any console errors?

Malkus
– Malkus

2014-08-25 12:50:24 +00:00
Commented Aug 25, 2014 at 12:50 — Malkus
– Malkus, Commented Aug 25, 2014 at 12:50
Sorry which IDE I should use this for?

TBA
– TBA

2014-08-25 12:54:16 +00:00
Commented Aug 25, 2014 at 12:54 — TBA
– TBA, Commented Aug 25, 2014 at 12:54

Malkus · Accepted Answer · 2014-08-25 12:56:23Z

2

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!!'
        }
})();

answered Aug 25, 2014 at 12:56

Malkus

3,7262 gold badges27 silver badges39 bronze badges

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

5 Comments

TBA Over a year ago

Thanks oops, dint pay attention. Good eyes. However any IDE I can use?

Malkus Over a year ago

I use sublime text and I'm trying webstorm right now, both are solid IDEs

Malkus Over a year ago

But if you check the console log in the browser, hit f12 in chrome for example and you would have seen an error that StoreController is not a function.

Giannis Paraskevopoulos Over a year ago

You could also define it as StoreController = function () {this.products = gem;}; . Is this in sync with best practices, or not?

Malkus Over a year ago

@GiannisParaskevopoulos defining the controller function in that fashion makes the controller function available in the global scope (not a good thing). If you are interested in modularizing more, I use browserify take look at my answer here

David Bohunek · Accepted Answer · 2014-08-25 13:14:33Z

2

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!!'
        }
})();

edited Aug 25, 2014 at 13:14

answered Aug 25, 2014 at 12:51

David Bohunek

3,2011 gold badge24 silver badges26 bronze badges

4 Comments

Malkus Over a year ago

When working with larger applications there are advantages to using an alias for the controller because it is clear which scope you are working with in the view.

TBA Over a year ago

Thanks guys, Let me try it. So my usage with alias is wrong?

Malkus Over a year ago

This actually won't fix your problem you have a syntax error.

David Bohunek Over a year ago

Oh yeah. And I managed to copy that to my answer too. Fixed it. I hope my answer at least removed some confusion with the aliasing which is not necessary in this case.

ilaif · Accepted Answer · 2014-08-25 12:53:18Z

-2

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.

answered Aug 25, 2014 at 12:53

ilaif

3482 silver badges13 bronze badges

1 Comment

Malkus Over a year ago

This doesn't attempt to answer the persons question.

Collectives™ on Stack Overflow

Angular ng-controller Issue

3 Answers 3

5 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related