Question

所以这就是这笔交易，我正在努力学习AngularJs，因为现在必须知道正确构建一个前端。但它不会起作用。我正在关注不是继承人网站提供的视频教程，并且一步一步完成，但它不会渲染。这是代码：

<!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.price}} {{store.product.description}}

实际上没有被他们的价值取代。

Answer 1

您必须将ng-app放在html或body个标签上。

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

Answer 2

这应该有效：

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

Angularjs没有被渲染到html页面

2 个答案: