To share data between controllers in AngularJs we have to states.
For using states, we need to include angular-ui-router in your application.
<script src=”//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js”></script>
To use ui-router we need to create dependency on ui-router.
angular.module(“app”,["ui.router"])
Then create states for your controllers as shown below:
.config(function config($stateProvider){
$stateProvider.state(“index”,{
url:”/yourUrl”,
controller:”firstController as first”,
templateUrl:”template_url”
})
$stateProvider.state(“second”,{
url:”/yourSecondPageUrl”,
controller:”secondController as second”,
templateUrl:”template_url”
})
})
Then write service to pass data in both controllers as parameter.
.service(“data”, function shareData(){
var data = this;
data = “data_to_transfer”
})
.controller(“firstController”, function(data){
var first = this;
first.data = data;
})
same for secondController.
Now, in your view you can access it as {{first.data}} and likewise for secondcontroller.
To redirect to new state use
<div ui-sref=”second”>Go to second page</div>
ProsperaSoft offers AngularJs development solutions. You can email at info@prosperasoft.com to get in touch with ProsperaSoft AngularJs experts and consultants.