带有工厂、服务和控制器的 Angular 页面答案

【问题标题】：Angular page with Factory, Service and Controller带有工厂、服务和控制器的 Angular 页面
【发布时间】：2016-03-31 04:49:38
【问题描述】：

我对 Angular 相当陌生，并且正在尝试运行 Angular 页面，但是无论我尝试什么，我都会不断遇到一个错误，提示我没有创建 Angular 模块。

未能实例化模块 HotelApp，原因如下：错误：[$injector:nomod] http://errors.angularjs.org/1.5.3/$injector/nomod?p0=Hote...blah blah blah

我的代码是这样的

(function () {
            "use strict";
            angular.module(APPNAME)
                .factory('$hotelService', hotelServiceFactory);

            hotelServiceFactory.$inject = ['$methodRepository', $methodRepository];

            function hotelServiceFactory($methodRepository) {
                var hotelServiceObject = AjaxScripts;
                console.log("Hotel Service", hotelServiceObject);
            }
        })();

        (function () {
            "use strict";

            angular.module(APPNAME)
                .controller("HotelController", hotelController);

            hotelController.$inject = ['$scope', '$hotelService'];

            function TracksController($scope, $hotelService) {

我很困惑为什么它说我的模块没有实例化，而我在脚本和 ng-app 中都明确声明了 APPNAME 变量

编辑我目前有

 (function () {
                "use strict";
                angular.module("HotelApp", [])
                    .factory('$hotelService', hotelServiceFactory);

                hotelServiceFactory.$inject = ['$methodRepository', $methodRepository];

                function hotelServiceFactory($methodRepository) {
                    var hotelServiceObject = AjaxScripts;
                    console.log("Hotel Service", hotelServiceObject);
                }
            })();

但它仍然无法正常工作..

【问题讨论】：

标题可以解决问题。更新它。
您可以单击（或复制粘贴）errors.angularjs.org 链接，并实际解释为什么会出现该错误。无论如何，其他人已经正确指出了问题..
删除立即调用函数，您的代码将起作用。

标签： javascript angularjs factory

【解决方案1】：

您在哪里创建模块。必须以这种方式创建模块。 angular.module('APPNAME',[]); 然后您可以使用angular.module('APPNAME') 创建控制器、工厂或... 但只有在模块内部创建模块[]（用于依赖注入）时才应该存在。

【讨论】：

我明白你的意思。 APPNAME 不是实际名称，它是一个具有应用实际名称“HotelApp”值的变量
然后显示完整的代码，您正在初始化具有依赖关系的模块。以及那个变量在哪里。
这应该可以工作.... (function () { "use strict"; angular.module("HotelApp", []) .factory('$hotelService', hotelServiceFactory); hotelServiceFactory.$ inject = ['$methodRepository']; function hotelServiceFactory($methodRepository) { var hotelServiceObject = AjaxScripts; console.log("Hotel Service", hotelServiceObject); } })();

【解决方案2】：

hotelServiceFactory.$inject 属性定义错误。

//DO this
hotelServiceFactory.$inject = ['$methodRepository'];
//NOT this
//hotelServiceFactory.$inject = ['$methodRepository', $methodRepository];

function hotelServiceFactory($methodRepository) {
    var hotelServiceObject = AjaxScripts;
    console.log("Hotel Service", hotelServiceObject);
}

这会导致编译错误。

控制器声明也与控制器函数名称不匹配。

angular.module(APPNAME)
    .controller("HotelController", hotelController);

hotelController.$inject = ['$scope', '$hotelService'];

//DO this
function hotelController($scope, $hotelService) {
//NOT this
//function TracksController($scope, $hotelService) {

【讨论】：

【解决方案3】：

您在module 中留下了[] 即DI（依赖注入）的2nd 参数

angular.module('APPNAME', [])

【讨论】：

【解决方案4】：

改变这个

angular.module(APPNAME)

有了这个

  angular.module('HotelApp',[])

【讨论】：

【解决方案5】：

Angular 的第一步是模块，是你的应用程序的起点，你可以在其中编写这样的代码

angular.module('APPNAME',[]);

第一个参数是指您的应用程序名称，第二个参数是依赖注入意味着您的应用程序需要进一步的要求，如任何插件、服务、指令......等等

【讨论】：

我试过了，但似乎不是问题。
您是否在主 index.html 中包含 ng-app = "APPNAME"