CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
AntouanK
AntouanK

Reputation: 4968

AngularJS: how to expose service API/variables

Trying to make a simple example with an AngularJS service.

I want to have some variables and functions in my data model ( service ) and through the controller, expose them and bind them to the view.

The problem is that the controller/view gets a new instance of the model somehow, and I can't really see how this is useful because I want to use other controllers/views to see the same data/API of the same service, not a new instance every time.

Here is an example on plunker : http://plnkr.co/edit/AKZLaT2HrkBPMkICsski?p=preview

/*****script.js******/
var app = angular.module('app',  []);

app.service('myService', function() {

  // my data here
  var text = 'text',
      text2 = 'text2';

  // my function here
  var copyText = function(){
      console.log('BEFORE text: '+ text + ' text2: ' + text2);
      text2 = text;
      console.log('AFTER text: '+ text + ' text2: ' + text2);
  };

  // expose my variables/API here
  return {
      text: text,
      text2: text2,
      copyText: copyText
  };
});

app.controller('myCtrl', [ '$scope', 'myService', function($scope, myService){

  $scope.myService = myService;

}]);


/*****index.html******/
...
  <div ng-controller="myCtrl">
    <h1>angular service exposure</h1>
    <input type="text" ng-model="myService.text">
    <p>text: {{ myService.text }}</p> 
    <button ng-click="myService.copyText()">copy text to text2</button>
    <p>text2: {{ myService.text2 }}</p> 
  </div>

if you open console, when you press the button you will see the 'real' values of the model, before and after the copying of text to text2. Which are not the ones I see in the view from the controller...

Upvotes: 1

Views: 5008

Answers (3)

Thomas Pons
Thomas Pons

Reputation: 7729

In fact if you want to use a service you must link your function to "this".

The return statement is only for factory.

var app = angular.module('myApp', []);

app.factory('testFactory', function(){
    return {
        hello: function(text){
            return "Hello " + text;
        }
    }               
});

app.service('testService', function(){
    this.hello= function(text){
        return "Hello " + text;
    };         
});

The difference is not just syntax!

All angulars providers like Value,Constant,Service or Facotry are singletons.

If you use a service it's the instance of this service that is return. If you use a factory is the value of the instance that is return.

I hope it helps !

Upvotes: 0

AntouanK
AntouanK

Reputation: 4968

Found the problem, I think.

This function inside the service ( or factory ) is a constructor, so inside any function we make, we must use 'this' to access the new instance objects.

So the function becomes :

// my function here
var copyText = function(){
  console.log('BEFORE text: '+ this.text + ' text2: ' + this.text2);
  this.text2 = this.text;
  console.log('AFTER text: '+ this.text + ' text2: ' + this.text2);
};

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

See my edit.

I did some changes, put ng-model as parameter to copyText():

 <div ng-controller="myCtrl">
    <h1>angular service exposure</h1>
    <input type="text" ng-model="myService.value">
    <p>text: {{ myService.text }}</p> 
    <button ng-click="myService.copyText(myService.value)">copy text to text2</button>
    <p>text2: {{ myService.value }}</p> 
  </div>

JS

var app = angular.module('app',  []);

app.service('myService', function() {

// my data here
var text = 'text',
    text2 = 'text2';



// my function here
var copyText = function(value){

  console.log('BEFORE text: '+ text + ' text2: ' + text2);
  text2 = value;
  console.log('AFTER text: '+ text + ' text2: ' + text2);
};

// expose my variables/API here
return {
    text: text,
    text2: text2,
    copyText: copyText
  };
});



app.controller('myCtrl', [ '$scope', 'myService', function($scope, myService){

  $scope.myService = myService;

}]);

Hope it will help you

Upvotes: 2

Related Questions