CODEWITHSUNDEEP
angularjs
user1015388
user1015388

Reputation: 1515

communicate between 2 different controllers

I have an angular app where we have 4 different pages.Each page has its own controller. There is an home page which has a controller which routes to each page and its controller using 

when('/a',{
            templateUrl: './components/a.html',
            controller:'aCtrl'
    }).
when('/b',{
            templateUrl: './components/b.html',
            controller:'bCtrl'
    }).
when('/c',{
            templateUrl: './components/c.html',
            controller:'cCtrl'
    }).
when('/d',{
            templateUrl: './components/d.html',
            controller:'dCtrl'
    }).
when('/home',{
            templateUrl: './components/Home.html',
            controller:homeCtrl'
}).

Now I want to share some data or some common functions between these controllers/pages. How can we do this? I googled it they say to use SERVICE. But I don't know in which controller I need to write the service. Can anybody give a good example for this.

Upvotes: 1

Views: 903

Answers (3)

GANI
GANI

Reputation: 2049

There are many ways you can share data.

  1. event
  2. services
  3. $rootScope

Services provide an easy way for us to share data and functionality throughout our app. The services we create are singletons that can be injected into controllers and other services, making them the ideal place for writing reusable code.

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

app.controller('leftCtrl', function ($scope,userService) {
left.btnClicked = function (object) {
   userService.saveData(object);
}
});

app.controller('rightCtrl', function ($scope, userService) {
$scope.getData = userService.getData();
});

app.service('userService', function () {
   var data = {};
   this.saveData = function(object){
   data = object;
}

this.getData = function(){
return data;
}
});

Upvotes: 1

Thibs
Thibs

Reputation: 8258

Dustin has the right approach. However there are times when you could use a different approach and that is to wrap the application in an AppController.

Everything that is in AppController can now be accessed. You could use this approach to put functions or constants that you want the child controllers of the application to have access to and don't have to inject services everywhere.

<body ng-controller="AppController">
    <div ng-view></div>
</body>

Upvotes: 0

nikjohn
nikjohn

Reputation: 21802

A service in AngularJS is not written within a controller. It is bound to your app directly and can be used anywhere within your application. This is why Services are the recommended means of communication between controllers in AngularJS.

What you need to do is write a service like so:

angular.module('yourApp').service('serviceName', function () {....});

Within the service, you can:

  • Fetch data from an API end point (You can use the $http provider for this)
  • Define constant data (You can use Angular's constant provider for this)
  • Define some code that takes in some data and manipulates it and returns new data
  • Pretty much anything else you want to do with your data

Now, include the service in your controller as a dependency like so:

angular.module('yourApp').controller('yourController', function (serviceName) {
  console.log(serviceName.getData());
  // Do something with your data
});

Now within this controller, you have access to the data that the service has returned. Of course, the same service can be injected into multiple controllers, thereby making it possible to share data across controllers.

Upvotes: 2

Related Questions