Angularjs 我的角度控制器有问题吗？_Angularjs_Node.js

Angularjs 我的角度控制器有问题吗？

angularjs node.js

Angularjs 我的角度控制器有问题吗？,angularjs,node.js,Angularjs,Node.js,我正在用angular构建简单的nodejs restful api。服务器端（即restful express）没有任何问题，我可以毫无问题地获得post和delete或put json输入，但一旦它到达前端，使用angular我就会面临问题。我不能从服务器获取数据，我不知道为什么这是服务器端 appJs 这是来自前端angularJs的 app.Js这是用于路由的 var myApp = angular.module('myApp', ['ngRoute']); myApp.config

我正在用angular构建简单的nodejs restful api。服务器端（即restful express）没有任何问题，我可以毫无问题地获得post和delete或put json输入，但一旦它到达前端，使用angular我就会面临问题。我不能从服务器获取数据，我不知道为什么

这是服务器端

appJs

这是来自前端angularJs的

app.Js这是用于路由的

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller: 'BooksController',
    templateUrl: 'views/books.html'
})
.when('/books',{
    controller: 'BooksController',
    templateUrl: 'views/books.hrml'
})
.when('/books/details/:id',{
    controller: 'BooksController',
    templateUrl: 'views/book_details.html'
})
.when('/books/add', {
    controller: 'BooksController',
    templateUrl: 'views/add_book.html'
})
.when('/books/edit/:id', {
    controller: 'BooksController',
    templateUrl: 'views/edit_book.html'
})
.otherwise({
    redirectTo: '/'
})
});

booksJs从前端angularJs获取服务器信息：提示：我认为这个文件的问题是：

var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', 
'$routeParams', function($scope, $http, $location, $routeParams){
console.log('Books Controller loaded')


$scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
        $scope.books = response.data;
    });
}
}]);

这是一个面板，它显示bookJs中的数据并显示出来

<div class="panel panel-default" ng-init="getBooks">
<div class="panel-heading">
<h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
<div class "row">
    <div ng-repeat="book in books">
        <div class="col-md-3">
            <div class="col-md-6">
                {{book.title}}
                <p>{{book.description}}</p>
            </div>
            <div class="col-md-6">
                <img src="{{book.image_url}}">
            </div>
        </div>
    </div>
</div>
</div>
</div>


新书
{{book.title}}
{{book.description}}

这是main index.html

<html ng-app="myApp">
<head>
    <title>BookStore</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <nav class="navbar navbar-default">
  <a class="navbar-brand" href="#">BookStore</a>


  <div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav navbar-left">
      <li class="nav-item">
        <a class="nav-link" href="#!/books/add">Add Book</a>
      </li>     
    </ul>
  </div>
</nav>

<div class="container">

  <div class = "row">
      <div class ="col-md-12">

        <div ng-view></div>

      </div>
  </div>

</div><!-- /.container -->





    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-route/angular-route.js">
</script>
    <script src="/bower_components/bootstrap/js/bootstrap.js"></script>
    <script src="/app.js"></script>
    <script src="/controllers/books.js"></script>
    <script src="/controllers/genres.js"></script>


</body>
</html>


书店

我使用postman处理get/api/books后获得的信息证明问题并非来自后端：

一旦我使用fronend跑步：

从books.html工作的面板显示从books.js获取数据有问题！！有什么建议吗？

应该是这样的：

ng init=“getBooks（）”

但最好使用

init

函数作为@Pankaj Parkar的答案，不要使用

ng init

指令

ng init=“getBooks”

不会调用函数（缺少括号），避免使用

ng init

，而是从

getBooks

从

控制器调用函数
myApp.controller('BooksController', ['$scope', '$http', '$location', 
'$routeParams', function($scope, $http, $location, $routeParams){
  console.log('Books Controller loaded')


  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
        $scope.books = response.data;
    });
  }
  function init(){
     $scope.getBooks();
  }
  init();
}]); 

提示和技巧：浏览器有开发工具。点击F12（Mac上的Cmd-Alt-I）打开它们。您可以在代码中设置断点来调试它，在控制台中查找日志和错误，查看发送了哪些请求以及得到了哪些响应。您至少应该检查是否存在错误、是否实例化了控制器、是否调用了getBooks（）以及是否发送了请求。这会让你犯错误。谢谢@JBNizet这会很方便也很有用
myApp.controller('BooksController', ['$scope', '$http', '$location', 
'$routeParams', function($scope, $http, $location, $routeParams){
  console.log('Books Controller loaded')


  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
        $scope.books = response.data;
    });
  }
  function init(){
     $scope.getBooks();
  }
  init();
}]);