AngularJS does not work correctly

Navigation
1

Hello, I'm following a course of the codeschool on Angular and all the examples that I make with the angular do not work, they are very simple thing. I'm going to post the code for someone to 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><divng-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 is coming out is this:

{{store.product.name}}

{{store.product.price}}

{{store.product.description}}

Can anyone help me? Thank you.

    
asked by anonymous 19.06.2016 / 21:23

3 answers

2

Your ng-app tag is set to the <head> tag. This causes the application to not flush the content in <body> , since the application ends in </head> .

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

  

// 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><divng-controller="StoreController as store">
            <h1> {{store.product.name}} </h1>
            <h2> {{store.product.price}} </h2>
            <p> {{store.product.description}} </p>
        </div>
    </body>
</html>
    
19.06.2016 / 21:35
2

Hello, first try putting the AngularJs script before your app.js and the function of your controller 

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

This will work as well

    
19.06.2016 / 21:32
1

The gem variable must be inside the controller so that it is recognized. Out of the controller where it is it will be 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><scripttype="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>
    
19.06.2016 / 21:34
Currency style in a TextBox in WinForms Search value in input javascript