AngularJS - введение провайдера

РЕДАКТИРОВАТЬ:, используя YEOMAN для подкраски моего приложения,

У меня есть следующий поставщик сгенерированный 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.

Что мне не хватает?

Ответы

Ответ 1

Я вижу две ошибки в вашем коде:

1) Вы не можете вводить "myProvider" в свой прикладной модуль, так как "myProvider" определен в вашем прикладном модуле.

2) Имя "myProvider" неверно, Angular автоматически добавляет "провайдер" к вашему провайдеру.

Вот исправление:

1) Определите своего поставщика в выделенном модуле и добавьте этот новый модуль в зависимости от вашего приложения.

2) Переименуйте своего провайдера в "мой" (или добавьте "myProviderProvider" в свою конфигурационную функцию):

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

Смотрите эту скрипту: http://jsfiddle.net/Z3k2s

Ответ 2

Вы путаете провайдера с модулями. Модули включают набор поставщиков, сервисов и заводов.

Также вы не должны добавлять суффикс поставщика при определении поставщика, иначе вам нужно ввести его как 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: '/'
            });
    });

Ответ 3

Вы пытаетесь загрузить зависимый модуль с именем myProvider:

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

myProvider уже находится в модуле myApp, поэтому вы можете сделать это:

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