Angularjs沒有呈現給html頁面

-2

所以這裏的交易，我想學習AngularJs，因爲現在必須知道正確構建前端。但它不會工作。我一直按照提供的視頻教程而不是繼承人網站，並且一步一步地完成了它，但它不會呈現。下面的代碼：Angularjs沒有呈現給html頁面

<!DOCTYPE html> 
<html> 
<head ng-app = "store"> 
    <title>Benvenuti a TuttoUni</title> 

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="../css/login.css"> 
    <script type="text/javascript" src="../libraries/angular/angular.js"></script> 
    <script type="text/javascript" src="../script/app.js"></script> 
</head> 
<body> 
    <div ng-controller="StoreController as store"> 
     <h1> {{store.product.name}} </h1> 
     <h2> ${{store.product.price}} </h2> 
     <p> {{store.product.description}} </p> 
    </div> 
</body> 
</html>

，這裏是我的javascript：

(function() { 
    var gem = { 
     name: 'Dodecahedron', 
     price: 2.95, 
     description: '...', 
    } 
    var app = angular.module('store', []); 

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

結果，你可以想像的是： {{store.product.name}} $ {{商店。產品價格}} {{store.product.description}}

沒有真正被它們的值取代。

來源

2015-08-14 Firas Safa

你在控制檯中有錯誤嗎？ –

我想你的Angular路徑不正確 - 是嗎？ –

你得把ng-app上html或body標籤。

<!DOCTYPE html> 
<html ng-app="store">

來源

2015-08-14 10:40:11

很棒的地方！或任何父母的標籤:) – CodingIntrigue

謝謝你的男人。我錯誤地把它放在頭上，而不是HTML。 –

@FirasSafa很高興能有幫助！如果您覺得它對您有用，請隨時[接受我的回答]（http://meta.stackexchange.com/q/5234）。 :-) –

這應該工作：

<!DOCTYPE html> 
<html> 
<head ng-app = "store"> 
<title>Benvenuti a TuttoUni</title> 

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="../css/login.css"> 
<script type="text/javascript" src="../libraries/angular/angular.js"></script> 
<script type="text/javascript" src="../script/app.js"></script> 
</head> 
<body ng-app="store"> 
    <div ng-controller="StoreController"> 
     <h1> {{product.name}} </h1> 
     <h2> ${{product.price}} </h2> 
     <p> {{product.description}} </p> 
    </div> 
</body> 
</html>

的Javascript：

 (function() { 
     var app = angular.module('store', []); 

     app.controller('StoreController', function($scope) { 
       $scope.product = { 
        name: 'Dodecahedron', 
        price: 2.95, 
        description: '...', 
      }; 
     }); 
    })();

來源

2015-08-14 10:40:03

回答

相關問題