AngularJS 启用实时重新加载。这是问题吗？

Question

如果有人能帮助我，为什么我看不到 JSON 的数据？？？当我完成 angular 的理论时，我尝试对其进行一些练习。如果可以的话，我 post 我的代码是为了帮助我。在调试时启用实时重新加载。是这个问题吗？？？

我正在尝试在我的屏幕上预览 JSON 的数据，但它不起作用。这是我的代码：

var HeaderCtrl= function($scope) { //ng-app create $scope

    $scope.appDetails = {    
        title: "BooKart",
        tagline: "We have 1 million books for you"

    };

    var  BookListCtrl= function($scope){
        $scope.books =[
            {
            imgUrl : "adultery.jpeg",
            name:"Adultery",
            price : "205",
            rating: "Paperback",
            publisher: "Random House",
            releaseDate: "12-08-2014",
            details: "After drifting among several professions, Coelho changed his life's course while on a visit to Spain in 1986 at the age of 39. Coelho walked more than 500 miles along..."
            },
            {
                imgUrl : "adultery.jpeg",
                name:"Adultery",
                price : "205",
                rating: "Paperback",
                publisher: "Random House",
                releaseDate: "12-08-2014",
                details: "After drifting among several professions, Coelho changed his life's course while on a visit to Spain in 1986 at the age of 39. Coelho walked more than 500 miles along the Road to Santiago de Compostela, a site of Catholic pilgrimage "
                }
        ]
    }


}

#headerWrapper{
    width: 100%;

}

.logo {
    margin-right: 10px;
    padding:10px;
    font-family: fantasy;
}
.tagline{
    font-size:10px;
    margin-top:50px;
    margin-left:-123px;
    font-family: monospace;
}

#bookListWrapper {
    width: 100%;
    padding: 10px;
}

#bookListWrapper input {
    width: 25%;
}

#bookListWrapper .book{
    border : 1px solid gray;
    padding :10px;
    margin-bottom: 10px;
}

#bookListWrapper .book .book-details {
    margin-left : 40px;
}
.nav-wrapper {
    margin-left: 100%;
    margin-top: 15px;
}
h1.thicker {
    font-weight: 900;
    font-variant: small-caps;
    font-style: oblique;
    font-family: "Lucida Console",Courier;
  }

<!DOCTYPE html>
<html lang="en" ng-app><!-- is angularJS app-->
<head> 
<style rel="stylesheet" link="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></style>
<style rel="stylesheet" link="css/style.css"></style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<script src="app.js" type=text/javascript></script>

<title>Angular</title>
</head>
<body ng-init="numOfBooks=11">

<h1>BookCards</h1>
<!-- exoression as js {{ data binding-->
Number of books : <input ng-model ="numOfBooks" /> 
<p> Welcome to BookKart, we have collection of {{ numOfBooks + ' Million'  }} books .</p>
<div id="header-wrapper" ngController="HeaderCtrl">
    <span class="logo pull-left">{{appDetails.title}}</span>
    <span class="tagline pull-left"> {{appDetails.tagline}}</span>
    <div class="nav nav-pills">
        <li class="active"><a href ="#"> Books </li>
        <li><a href="#"> Kart</a></li>
    </div>
</div>
<div id="bookListWrapper" ngController="BookListCtrl">
    <form role="form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search here....">
        </div>
        
    </form>
</div>

<ul class="list-unstyled">
    <li class="book" style="background: white url(images/adultery.jpg)" ng-repeat="book in books">
        <div class="book-details  book" > 
    
        <h3>{{book.name}}</h3>

            <p>{{book.price}}</p>
            <ul class="list-unstyled list-inline">
                <li>Rating : {{book.rating}}</li>
                <li>Binding : {{book.binding}}</li>
                <li>Publisher: {{book.publishing}} </li>
                <li>Released : {{book.released.Date}}
            </ul>
           <p>{{book.details}}</p>
            <button class="btn btn-nfo pull-right"> Add to Kart</button>
        </div>
    </li>
</ul>
</div>




</body>
</html>

Answer 1

您 post 中的代码缺少一些东西：

angular 应用程序未正确初始化，控制器也未正确注册
属性被命名为 ngController 而不是 ng-controller
html结构被破坏并错误地放在一起（div和ul属于您设置ng-controller的div）

您将在下面找到您尝试显示的图书列表的最小工作示例。

我强烈建议您从这里开始阅读 https://docs.angularjs.org/guide/introduction and especially the part about the controllers: https://docs.angularjs.org/guide/controller

另请注意，AngularJS 仅在 LTS 上运行，将于 2021 年 12 月 31 日结束（参见 https://docs.angularjs.org/misc/version-support-status). Maybe you want to have a look on the new framework version: https://angular.io/

(function(angular) {
  'use strict';
  var myApp = angular.module('myApp', []);

  myApp.controller('BookListCtrl', ['$scope', function($scope) {
      $scope.books = [
          {
            imgUrl : "adultery.jpeg",
            name:"Adultery",
            price : "205",
            rating: "Paperback",
            publisher: "Random House",
            releaseDate: "12-08-2014",
            details: "After drifting among several professions, Coelho changed his life's course while on a visit to Spain in 1986 at the age of 39. Coelho walked more than 500 miles along..."
          },
          {
            imgUrl : "adultery.jpeg",
            name:"Adultery",
            price : "205",
            rating: "Paperback",
            publisher: "Random House",
            releaseDate: "12-08-2014",
            details: "After drifting among several professions, Coelho changed his life's course while on a visit to Spain in 1986 at the age of 39. Coelho walked more than 500 miles along the Road to Santiago de Compostela, a site of Catholic pilgrimage "
          }
      ];
  }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
  <script src="app.js"></script>
  
</head>
<body ng-app="myApp">
  <div ng-controller="BookListCtrl">
    <ul class="list-unstyled">
      <li class="book" ng-repeat="book in books">
         <div class="book-details book" > 
            <h3>{{book.name}}</h3>
            <p>{{book.price}}</p>
            <ul class="list-unstyled list-inline">
                <li>Rating : {{book.rating}}</li>
                <li>Binding : {{book.binding}}</li>
                <li>Publisher: {{book.publishing}} </li>
                <li>Released : {{book.released.Date}}
            </ul>
            <p>{{book.details}}</p>
            <button class="btn btn-nfo pull-right"> Add to Kart</button>
         </div>
      </li>
    </ul>
  </div>
</body>
</html>

AngularJS 启用实时重新加载。这是问题吗？

AngularJS Live reload enabled. Is this problem?

html

javascript

css

data-binding

angularjs