0

I want to share a specific property across different components' (different controllers in them).

Trying to inject a service that I created in the app module. The service has get/set functions. I created the service called SharedProperties. It's not accessible from any component in my app, says "Uknown". Why?

This is how my app is defined, and here's the very simple service.

mapotApp = angular
.module('mapotApp', [])
.service('sharedProperties', function () {
        var property = 'test';
        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

and then in my component:

angular.module('aboutPage').component('aboutPage', {
    templateUrl: 'app/about-page/about-page.html',
    controller: ['sharedProperties', function AboutPageController($http, $scope, sharedProperties) {
    var self= this;

            //inherting global variable

        self.prop = sharedProperties.getProperty(); //UNKOWN PROVIDER ERROR HERE


    }]

});

This returns:

Error: [$injector:unpr] Unknown provider: sharedPropertiesProvider <- sharedProperties

What can I do? I tried injecting it in tons of places and still doesn't work. thanks so much.

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
Thomas
  • 1
  • 1
  • Add the service to your module `aboutPage` – Anurag Srivastava Mar 24 '19 at 15:37
  • I did, as you can see it's injected. But I want the service to be used by many controllers, not written again in each one – Thomas Mar 24 '19 at 15:38
  • Then use just `angular.service('sharedProperties', function () {})`, without adding to any module. – Anurag Srivastava Mar 24 '19 at 15:39
  • Where should I put it exactly? Can you write the code with it? Thanks! – Thomas Mar 24 '19 at 15:40
  • See this link - https://medium.com/@ok.bayat/share-service-or-data-between-two-different-angularjs-apps-on-the-same-page-d8d7fc830445 – Anurag Srivastava Mar 24 '19 at 15:42
  • Oh okay, well they share the service between apps, I have one app, I just want the variable to be accessible from two components – Thomas Mar 24 '19 at 15:54
  • https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers – Anurag Srivastava Mar 24 '19 at 16:00
  • The `sharedProperties` service is in the `mapotApp` module. Add that module as a dependency in the `aboutPage` module. Also the controller injection array doesn't match the function arguments. Read [AngularJS Developer Giude - Dependency Injection](https://docs.angularjs.org/guide/di). – georgeawg Mar 24 '19 at 16:00
  • Read also, [AngularJS Error Reference - $injector:unpr Unknown Provider](https://docs.angularjs.org/error/$injector/unpr) and [AngularJS angular.module API Reference](https://docs.angularjs.org/api/ng/function/angular.module). – georgeawg Mar 24 '19 at 16:10
  • @AnuragSrivastava a service has to be registered to a module – charlietfl Mar 24 '19 at 18:08

1 Answers1

0

Here is the working DEMO with your code.

Your shareable service is correct, but make sure to properly initialize your controller, as well as correctly inject $http and $scope in it (see how $scope and $timeout services are injected in my demo).

Nadine
  • 559
  • 2
  • 15