Angular share data between controllers and components

Question

I'm new on a project and trying to add a small feature.

I have 2 views, Cars.html and Wheels.html

Cars.html has a controller Cars.controller.js

Wheels.html has a component Wheels.component.js

I want to communicate between these two controllers. I have tried directly injecting them into each other, but that causes a bunch of 'Provider errors'.

Through research online, it seems like I need a 'service' that gets injected by my controller and component ... then I can make function calls between the two. Doing this resolves the provider errors, but I can't seem to access the howDoIgetHere function.

Here is what they look like:

Cars.controller.js

angular.module('Cars')
  .controller('CarsCtrl', CarsCtrl);

CarsCtrl.$inject = ['PartsViewModel'];
function CarsCtrl(PartsViewModel) {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

};

Wheels.component.js

angular.module('Cars')
  .component('wheels', {
    bindings: { wheel: '=' },
    controller: 'WheelsCtrl',
    templateUrl: 'path/to/component/Cars/Wheels/Wheels.component.html'
  })
  .controller('WheelsCtrl', WheelsCtrl);

WheelsCtrl.$inject = [];
function WheelsCtrl() {
  var ctrl = this;

  // This will fail
  ctrl.goToParts = PartsViewModel.howDoIgetHere();

}

PartsViewModel.service.js

angular.module('Cars')
  .factory('PartsViewModel', partsViewModelFactory);

partsViewModelFactory.$inject = ['Some', 'injected', 'Dependencies'];
function partsViewModelFactory(Some, injected, Dependencies) {
  return PartsViewModel;

  function PartsViewModel(part) {

    this.howDoIgetHere = function() {
      console.log('Success! From Cars controller or Wheels component.')
    };

  }
}

Cars.html

<div>
  <button ng-click="ctrl.goToParts()"></button>
</div>

Wheels.html

<div>
  <button ng-click="$ctrl.goToParts()"></button>
</div>

Answer 1

First, in your controller it should be this.goToParts = PartsViewModel().howDoIgetHere;

Second, in your service, the return statement should go after the function declaration.

edit: Sorry I misread what was causing the provider errors.

Edit 2:

If you're trying to access the same data set, you are defeating the purpose by creating a new instance of the PartsViewModel each time.

Change The partsviewmodel service to:

angular.module('mymodule').service('PartsViewService', PartsViewService);

 function PartsViewService(){
        var howDoIGetHere = function(){
            Console.log('here');
        };
        return {
            howDoIGetHere : howDoIGetHere
        }
    }

Then when accessing the injected service in your controllers.

this.goToParts = PartsViewService.howDoIGetHere;

Third, make sure that the provider error isn't caused by you misspelling the service name.