Question

我创建了两个页面index.html和app.js（基本上遵循here的教程），每个页面的内容如下：

的index.html

<!DOCTYPE html>
<html ng-app ="store">
    <head>
      <link rel = "stylesheet" type="text/css" href="bootstrap/bootstrap.min.js"/>
    </head>

    <body>
       <div ng-controller="StoreController as store">
          <h1> {{store.product.name}} </h1>
          <h2> ${{store.product.price}} </h2>
          <p> {{store.product.description}} </p>
          <button ng-show ="store.product.canPurchase"> Add to cart </button>
       </div>



       <script type="text/javascript" src="angular-1.3.14/angular.min.js"></script>
       <script type="text/javascript" src="app.js"></script>

    </body>




</html>

app.js

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

});
var gem = {

    name: 'Dodecahedron',
    price: 2.95,
    description:'. . .',
    canPurchase: false
}
})();

出于某种原因，它实际上并没有在网络浏览器上打印这些值，这是我得到的：

enter image description here

Answer 1

语法错误删除“）”

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

});
var gem = {

    name: 'Dodecahedron',
    price: 2.95,
    description:'. . .',
    canPurchase: false
}
})();

Plunker

Answer 2

Javascript

var app= angular.module('GemsStore',[]);

app.controller('StoreController', function() {
var gems = [{
    name: 'Diamond',
    price: 100,
    description: 'Shiny',
    canPurchase: true,
    soldOut: false
},
    {
        name: 'Sapphire',
        price: 200,
        description: 'Shiny',
        canPurchase: true,
        soldOut: false
    }

];

this.products = gems;
});

我遇到同样的问题

简单的Angular JS应用程序没有出现在浏览器上

2 个答案: