Angularjs does not work properly

Asked

Viewed 1,082 times

1

Hello, I’m following a codeschool course on Angular and all the examples I do with Angular do not work, are very simple thing. I’m gonna post the code so someone can tell me what I’m doing wrong.

// app.js
(function () {
    var app = angular.module('store', []);
    app.controller('StoreController', function () {
        this.product = gem;
    });

    var gem = {
        name: 'Dodecahedron',
        price: 2.95,
        description: 'Alguma descrição',
    }
})();
<!--index.html-->
<!DOCTYPE html>
<html>
    <head ng-app="store">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
              integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <title></title>
    </head>

    <body>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <div ng-controller="StoreController as store">
            <h1> {{store.product.name}} </h1>
            <h2> {{store.product.price}} </h2>
            <p> {{store.product.description}} </p>
        </div>
    </body>
</html>

The result that’s coming out is this:

{{store.product.name}}

{{store.productprice.}}

{{store.product.Description}}

Can someone help me? Thank you.

javascript angularjs

3 answers

2

Hello tries first to put the Angularjs script before your app.js and the function of your controller 

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

So it will work

  • It worked! Thank you very much!

2


Your ng-app marker is set in the tag <head>. This makes the application does not see the content in <body>, since the application ends in </head>.

Changing it to the tag <html> makes your code work:

inserir a descrição da imagem aqui

// app.js
(function () {
    var app = angular.module('store', []);
    app.controller('StoreController', function () {
        this.product = gem;
    });

    var gem = {
        name: 'Dodecahedron',
        price: 2.95,
        description: 'Alguma descrição',
    }
})();
<!--index.html-->
<!DOCTYPE html>
<html ng-app="store">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
              integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <title></title>
    </head>

    <body>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <div ng-controller="StoreController as store">
            <h1> {{store.product.name}} </h1>
            <h2> {{store.product.price}} </h2>
            <p> {{store.product.description}} </p>
        </div>
    </body>
</html>

1

The Gem variable must be inside the controller to be recognized. Outside the controller it is in is out of scope.

(function () {
    var app = angular.module('store', []);
    app.controller('StoreController', function () {
        var gem = {
            name: 'Dodecahedron',
            price: 2.95,
            description: 'Alguma descrição',
        }

        this.product = gem;
    });
})();

Here in HTML, Angularjs should be loaded first:

<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>        
    <div ng-controller="StoreController as store">
        <h1> {{store.product.name}} </h1>
        <h2> {{store.product.price}} </h2>
        <p> {{store.product.description}} </p>
    </div>
</body>

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.