AngularJS：为什么我的工厂在我的控制器中总是没有定义？

我的工厂在我的控制器中未定义，我无法找出原因。我创建了一个简单的示例来说明

我在这里创建应用程序：

var ruleApp = angular
    .module( "ruleApp", [ 
        "ngRoute",  
        "ruleApp.NewFactory1",
        "ruleApp.NewFactory2",
    ] );

angular
    .module('ruleApp.NewFactory1', [])
    .factory('NewFactory1', function() {
        return function(msg) {
            alert(msg);
        };
  });

angular
    .module('ruleApp.NewFactory2', [])
    .factory('NewFactory2', function() {
        var showMessageFunction = function(msg) {
            alert(msg);
        };
        return 
        {
            showMessage: showMessageFunction
        };
  });

 ruleApp.controller( "RuleController", function( $scope, NewFactory1, NewFactory2 ) {
    NewFactory1("1");
    NewFactory2.showMessage("2");
});

在这个虚拟示例中，我想构建一个工厂来做一些简单的事情，显示一个警报框。我将展示两种方法（一种有效，一种无效）

工厂1:

var ruleApp = angular
    .module( "ruleApp", [ 
        "ngRoute",  
        "ruleApp.NewFactory1",
        "ruleApp.NewFactory2",
    ] );

angular
    .module('ruleApp.NewFactory1', [])
    .factory('NewFactory1', function() {
        return function(msg) {
            alert(msg);
        };
  });

angular
    .module('ruleApp.NewFactory2', [])
    .factory('NewFactory2', function() {
        var showMessageFunction = function(msg) {
            alert(msg);
        };
        return 
        {
            showMessage: showMessageFunction
        };
  });

 ruleApp.controller( "RuleController", function( $scope, NewFactory1, NewFactory2 ) {
    NewFactory1("1");
    NewFactory2.showMessage("2");
});

工厂2:

var ruleApp = angular
    .module( "ruleApp", [ 
        "ngRoute",  
        "ruleApp.NewFactory1",
        "ruleApp.NewFactory2",
    ] );

angular
    .module('ruleApp.NewFactory1', [])
    .factory('NewFactory1', function() {
        return function(msg) {
            alert(msg);
        };
  });

angular
    .module('ruleApp.NewFactory2', [])
    .factory('NewFactory2', function() {
        var showMessageFunction = function(msg) {
            alert(msg);
        };
        return 
        {
            showMessage: showMessageFunction
        };
  });

 ruleApp.controller( "RuleController", function( $scope, NewFactory1, NewFactory2 ) {
    NewFactory1("1");
    NewFactory2.showMessage("2");
});

请注意，factory 1的返回类型是函数，factory 2的返回类型是具有属性的对象（属于function类型）

现在看看我希望如何在控制器中使用这两个工厂：

var ruleApp = angular
    .module( "ruleApp", [ 
        "ngRoute",  
        "ruleApp.NewFactory1",
        "ruleApp.NewFactory2",
    ] );

angular
    .module('ruleApp.NewFactory1', [])
    .factory('NewFactory1', function() {
        return function(msg) {
            alert(msg);
        };
  });

angular
    .module('ruleApp.NewFactory2', [])
    .factory('NewFactory2', function() {
        var showMessageFunction = function(msg) {
            alert(msg);
        };
        return 
        {
            showMessage: showMessageFunction
        };
  });

 ruleApp.controller( "RuleController", function( $scope, NewFactory1, NewFactory2 ) {
    NewFactory1("1");
    NewFactory2.showMessage("2");
});

这就是问题暴露的地方。在执行过程中，

NewFactory1（“1”）的警报框会提示我，但在执行
NewFactory2.showMessage（“2”）时失败因为NewFactory2未定义（TypeError:无法调用未定义的方法“showMessage”）

你能帮我找出这个问题吗？我希望能够使用像NewFactory2这样的工厂，因为我希望工厂能够做不止一件事（即拥有不止一个功能）。顺便说一下，我使用的是Angular版本1.2.1。
factory 2应该是

angular
.module（'ruleApp.NewFactory2'，[]）
.factory（'NewFactory2'，function（）{
var showMessageFunction=函数（msg）{
警报（msg）；
};
返回{//你应该试着在plunker中复制它。这很有效。问题是空白。吸取的经验教训是，要密切注意有角度的空白。这不是有角度的。这是javascript。看，哦，我的地球！空白是个严重的问题。现在我想起来了，它是完全有道理的。使用时应该小心某些IDE（如VisualStudio）可以配置为使用新的行样式范围来代替。