Javascript AngularJS-注入提供程序

编辑：使用YEOMAN构建我的应用程序

我已生成以下提供程序

'use strict';

angular.module('myApp')
  .provider('myProvider', function () {

    // Private variables
    var salutation = 'Hello';

    // Private constructor
    function Greeter() {
      this.greet = function () {
        return salutation;
      };
    }

    // Public API for configuration
    this.setSalutation = function (s) {
      salutation = s;
    };

    // Method for instantiating
    this.$get = function () {
      return new Greeter();
    };
  });

我正在尝试将其注入我的应用程序配置中，如下所示：

'use strict';

angular.module('myApp', [
        'ngRoute',
        'myProvider'
    ])
    .config(function ($routeProvider, myProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

我得到以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module lpSocialApp due to:
Error: [$injector:modulerr] Failed to instantiate module myProvider due to:
Error: [$injector:nomod] Module 'myProvider' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

---

我缺少什么？

您正在尝试加载名为myProvider的依赖模块：

angular.module('myApp', [
        'ngRoute',
        'myProvider'
    ])

myProvider

已在

myApp

模块中，因此您可以执行以下操作：

angular.module('myApp', [
        'ngRoute'
    ])
    .config(function ($routeProvider, myProvider) {

---

您正试图加载名为

myProvider

的依赖模块：

angular.module('myApp', [
        'ngRoute',
        'myProvider'
    ])

myProvider

已在

myApp

模块中，因此您可以执行以下操作：

angular.module('myApp', [
        'ngRoute'
    ])
    .config(function ($routeProvider, myProvider) {

---

我可以在您的代码中看到两个错误：

1） 无法在应用程序模块中插入“myProvider”，因为“myProvider”是在应用程序模块中定义的

2） “myProvider”的名称错误，将自动将“Provider”附加到您的提供商

以下是修复方法：

1） 在专用模块中定义提供程序，并将此新模块添加到应用程序模块依赖项中

2） 将提供程序重命名为“my”（或在配置函数中插入“myProviderProvider”）：

---

查看此小提琴：

我可以看到您的代码中有两个错误：

1） 无法在应用程序模块中插入“myProvider”，因为“myProvider”是在应用程序模块中定义的

2） “myProvider”的名称错误，将自动将“Provider”附加到您的提供商

以下是修复方法：

1） 在专用模块中定义提供程序，并将此新模块添加到应用程序模块依赖项中

2） 将提供程序重命名为“my”（或在配置函数中插入“myProviderProvider”）：

---

请看这篇文章：

您将提供程序与模块混淆了。模块包括一组提供商、服务和工厂

定义提供程序时也不应添加提供程序后缀，否则必须像

myProviderProvider

那样插入它

另外，您似乎混淆了

angular.module

上的语法：

// create a new module foo.bar with dependency to ngRoute
angular.module('foo.bar', ['ngRoute']);

// create a new module woo.hoo with NO dependency
angular.module('woo.hoo', []); 

// get already created module foo.bar
angular.module('foo.bar')

您的代码已修复：

'use strict';

angular.module('someModule', [])
  .provider('my', function () {

    // Method for instantiating
    this.$get = function () {
      return {}// return something
    };
  });



'use strict';

angular.module('myApp', [
        'ngRoute',
        'someModule'
    ])
    .config(function ($routeProvider, myProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

---

您将提供程序与模块混淆。模块包括一组提供商、服务和工厂

定义提供程序时也不应添加提供程序后缀，否则必须像

myProviderProvider

那样插入它

另外，您似乎混淆了

angular.module

上的语法：

// create a new module foo.bar with dependency to ngRoute
angular.module('foo.bar', ['ngRoute']);

// create a new module woo.hoo with NO dependency
angular.module('woo.hoo', []); 

// get already created module foo.bar
angular.module('foo.bar')

您的代码已修复：

'use strict';

angular.module('someModule', [])
  .provider('my', function () {

    // Method for instantiating
    this.$get = function () {
      return {}// return something
    };
  });



'use strict';

angular.module('myApp', [
        'ngRoute',
        'someModule'
    ])
    .config(function ($routeProvider, myProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

---

签出此链接签出此链接

，否则必须像myProviderProvider一样插入它。我不确定这是真的。Angular将在末尾（注入器中）添加“Provider”，但是
myProvider
和
myProviderProvider
在使用Provider时都应该可以工作。感谢您的回复，我可以看到这可以解决我的问题，但是我正在使用YEOMAN生成代码，并且希望相信他们在那里使用了最佳实践。。。这可能是他们的生成器中的错误吗？@DavinTryon否。在配置阶段，您必须将其作为
myProviderProvider
注入，但在运行阶段，您可以将其作为
myProvider
注入，但它将不再是提供商，而是一个名为provider的服务，这可能会产生误导。@ShlomiSchwartz我不知道关于约曼的最新消息，但它会给你生成的代码，让你开始编码。您需要更改它。@UmurKontacı虽然这是正确的，但yeoman输出应该按原样工作，这样您就有了一个已知的良好基础。所以，是的，我同意这是一个bug。
或者你必须像myProviderProvider一样注入它。我不确定这是真的。Angular将在末尾（注入器中）添加“Provider”，但是
myProvider
和
myProviderProvider
在使用Provider时都应该可以工作。感谢您的回复，我可以看到这可以解决我的问题，但是我正在使用YEOMAN生成代码，并且希望相信他们在那里使用了最佳实践。。。这可能是他们的生成器中的错误吗？@DavinTryon否。在配置阶段，您必须将其作为
myProviderProvider
注入，但在运行阶段，您可以将其作为
myProvider
注入，但它将不再是提供商，而是一个名为provider的服务，这可能会产生误导。@ShlomiSchwartz我不知道关于约曼的最新消息，但它会给你生成的代码，让你开始编码。您需要更改它。@UmurKontacı虽然这是正确的，但yeoman输出应该按原样工作，这样您就有了一个已知的良好基础。所以，是的，我同意这是一个bug。谢谢你的回复，我可以看到这是如何解决我的问题的，但是我正在使用YEOMAN生成代码，并且希望相信他们正在使用最佳实践。。。这可能是它们的生成器中的错误吗？@davintroon名称“myProvider”没有错，但AngularJS在注入过程中会自动将“Provider”附加到配置函数中的参数中。解决方案是删除“Provider”后缀（myProvider->my）或在配置函数中添加“Provider”后缀（“myProvider”->“myProviderProvider”）。感谢您的回复，我可以看到这如何解决我的问题，但是我正在使用YEOMAN生成代码，并且希望相信他们正在使用最佳实践。。。这可能是他们的生成器中的错误吗？@DavinTryon名称“myProvider”没有错，但AngularJS在注入过程中会自动将“Provider”附加到配置函数中的参数中。解决方案是删除“Provider”后缀（myProvider->my）或在配置函数中添加“Provider”后缀（“myProvider”->“myProviderProvider”）。谢谢，我不能让它工作。。。你能添加一个JSFIDLE吗？谢谢，我无法让它工作。。。您可以添加一个JSFIDLE吗？