注册控制器和服务angular js？

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”的控制器。

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）您不必在代码中添加依赖项。

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

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

 <script src="app/appConfig.js"></script>
 <script src="app/service.js"></script>
 <script src="app/controller.js"></script>

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

注册控制器和服务angular js？

问题描述

2 个解决方案

解决方案1
1 2018-02-10 18:12:22

解决方案2
1 2018-02-10 18:21:07

注册控制器和服务angular js？

问题描述

2 个解决方案

解决方案1 1 2018-02-10 18:12:22

解决方案2 1 2018-02-10 18:21:07

解决方案1
1 2018-02-10 18:12:22

解决方案2
1 2018-02-10 18:21:07