如何在Angular中手动声明和使用模块、控制器、服务和bootstrap？

Question

我正在尝试构建一个 AngularJS 应用程序，它有一个控制器、一个服务和手动引导程序（没有 ng-app）。问题是我一直有错误：

Argument 'AppController' is not a function, got string

HTML

<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" type="text/javascript"></script>
        <script src="inc/bootstrap.js" type="text/javascript"></script>
        <script src="inc/controllers.js" type="text/javascript"></script>
        <script src="inc/services.js" type="text/javascript"></script>
    </head>
    <body ng-controller="AppController">
        [...]
    </body>
</html>

bootstrap.js

angular.element(document).ready(function() {
    angular.bootstrap(document, ['htmlControllerApp']);
});

controllers.js

angular.module('htmlControllerApp', [])
.controller('AppController', 'ConnectionService', ['$scope', function ($scope, ConnectionService) {
    // Code
}]);

services.js

angular.module('htmlControllerApp')
.factory('ConnectionService', ['$rootScope', function ($rootScope) {
    // Code
}]);

谢谢

编辑 - 解决方案

在controllers.js中，改用：

angular.module('htmlControllerApp')
.controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
    // Code
}]);

在bootstrap.js中，作为"good practice":

angular.module('htmlControllerApp', []);
angular.element(document).ready(function() {
    angular.bootstrap(document, ['htmlControllerApp']);
});

这将在 bootstrap.js 中仅创建一次模块，并且 AngularJS 将尝试在 controllers.js 中检索它 和 services.js.

Answer 1

这是您要查找的页面。

https://docs.angularjs.org/api/ng/function/angular.bootstrap

并改变这个

angular.module('htmlControllerApp', [])
  .controller('AppController', 'ConnectionService', ['$scope', function ($scope,     ConnectionService) {
    // Code
}]);

到这个->

angular.module('htmlControllerApp', [])
  .controller('AppController', ['$scope', 'ConnectionService', function ($scope, ConnectionService) {
    // Code
}]);

如何在Angular中手动声明和使用模块、控制器、服务和bootstrap？

How to declare and use modules, controllers, services and bootstrap manually in Angular?

angularjs

angularjs-service

angularjs-controller

angularjs-bootstrap