Question

我开始使用Angularjs配置我的应用程序，我正在遵循路线指南，但我不能让项目运行

我不知道如何注册我的控制器和服务以进行加载当我更改页面时动态...：/ y创建了mi appConfig文件，用于配置我的路线。

我的目录。

我的应用配置：

angular.module('library.crud', ['ngRoute'])

.config(function ($routeProvider) {
    $routeProvider
          .when('/', {
              templateUrl: 'app/views/home.html'
          })
          .when('/book', {
              templateUrl: 'app/views/book.html',
              controller: 'bookController',
              controllerAs: 'vm'
          })
          .when('/books', {
              templateUrl: '../app/views/books.html',
              controller: 'booksController',
              controllerAs: 'vm'
          })
          .otherwise({
              redirectTo: '/'
          });
});

示例控制器：

(function () {
  'use stritct';

  angular
  .module('library.crud')
  .controller('booksController', booksController);

  booksController.inject = ['$rootScope', '$scope', 'bookService'];

  function booksController($rootScope, $scope, bookService) {
      var vm = this;
  }
})();

示例服务：

(function () {
 'use strict';

  angular
     .module('library.crud', [])
     .factory('bookService', bookService);

  bookService.$inject = ['$http', '$q'];

  function bookService($http, $q) {
      var service = {

      };
      return service;
  }
 })();

indexHTML：

<html>
<head>
    <!--script imports, angular, jquery, bootstrap etc... -->
    <script src="app/appConfig.js"></script>
</head>
<body ng-app="library.crud">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#!/home">Home</a></li>
   <li><a href="#!/books">Books</a></li>

    <div class="container">
      <div ng-view></div>
    </div>

</body>
</html>

我的HTML页面在什么时候知道要调用哪个控制器以及它位于何处？如何注册我的服务？

当我从菜单中输入图书选项时，控制台会显示下一个错误：

名称为“booksController”的控制器未注册。

UPDATED INDEX.HTML：

<html>
<head>

   <link rel ="stylesheet" href="resources/bootstrap/css/bootstrap.min.css"/>
   <script src="resources/jquery/jquery.min.js"></script>
   <script src="resources/bootstrap/js/bootstrap.min.js"></script>
   <script src="resources/angular/angular.min.js"></script>
   <script src="resources/angular/angular-route/angular-route.min.js"></script>

   <script src="app/appConfig.js"></script>
   <script src="app/services/book.service.js"></script>
   <script src="app/views/controllers/books.controller.js"></script>
   <script src="app/views/controllers/book.controller.js"></script>

 </head>
 <body ng-app="library.crud">

   <nav class="navbar navbar-inverse">
       <div class="container-fluid">
          <div class="navbar-header">
             <a class="navbar-brand" href="#">WebSiteName</a>
          </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#!/home">Home</a></li>
             <li><a href="#!/books">Books</a></li>
          </ul>
       </div>
   </nav>

   <div class="container">
    <div ng-view></div>
   </div>

</body>
</html>

Answer 1

您的代码中有两件事，

（i）您不必在代码中添加依赖项。

class MySerializer(serializers.ModelSerializer):
    ...
    your code
    ...
    def create(self, validated_data):
        instance = super().create(validated_data)
        instance.conversation.last_message = instance.body
        instance.conversation.save() # Need to update conversation in DB  
        return instance

（ii）在index.html中添加控制器和服务的参考。

angular.module('library.crud').factory('bookService', bookService);

Answer 2

当其他一切看起来没问题时发生此错误的主要原因是因为您没有在index.html中包含您的js文件。根据您的屏幕截图，您可能将控制器和服务放在单独的文件中。确保将它们放在index.html中的appConfig.js文件之后。

我看到的另一个问题是您的服务文件。

angular
 .module('library.crud', [])
 .factory('bookService', bookService);

应该是

angular
 .module('library.crud')
 .factory('bookService', bookService);

如果在.module行中包含方括号作为第二个参数，angular会认为您正在创建一个新应用，而不是尝试将您的服务/控制器注册到现有应用。

此外，强烈建议在任何Angular1.x应用程序中使用ui-router而不是NgRoute：https://github.com/angular-ui/ui-router

注册控制器和服务角js？

2 个答案: