AngularJS - 注入提供者

问题描述

编辑：使用YEOMAN来构建我的应用，

using YEOMAN to scaffold my app,

我有以下 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();
    };
  });

我正在尝试将其注入我的app配置中，如下所示：

and I'm trying inject it in my app config like so:

'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.

我缺少什么？

推荐答案

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

I can see two mistakes in your code:

1）你不能在应用程序模块中注入'myProvider'，因为'myProvider'是在您的应用程序模块中定义。

1) You cannot inject 'myProvider' in your application module since 'myProvider' is defined in your application module.

2）'myProvider'的名称错误，Angular会自动将'Provider'附加到您的提供商。

2) The name of 'myProvider' is wrong, Angular automatically append 'Provider' to your provider.

以下是修复：

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

1) Define your provider in a dedicated module and add this new module in your application module dependencies.

2）将您的提供者重命名为'my'（或在您的配置函数中注入'myProviderProvider'）：

2) Rename your provider to 'my' (or inject 'myProviderProvider' in your config function) :

angular.module('myProviderModule', [])
    .provider('my', function () { // or 'myProvider'

        // 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();
        };
    });

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

看到这个小提琴：

这篇关于AngularJS - 注入提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！