4

How do I pass data from one page to another in angular js? I have heard about using something as services but I am not sure how to use it! Given below is the functionality I want to execute! On page 1:

<div class="container" ng-controller="mycontrl">
  <label for="singleSelect"> Select Date </label><br>
  <select nAMe="singleSelect" ng-model="dateSelect">
    <option value="2/01/2015">2nd Jan</option>
    <option value="3/01/2015">3rd Jan</option>  
  </select>
  <br>
  Selected date = {{dateSelect}}
  <br/><br/><br/>
  <label for="singleSelect"> Select time </label><br>
  <select nAMe="singleSelect" ng-model="timeSelect">
    <option value="9/10">9AM-10AM</option>
    <option value="10/11">10AM-11AM</option>
    <option value="11/12">11AM-12PM</option>
    <option value="12/13">12PM-1PM</option>
    <option value="13/14">1PM-2PM</option>
  </select>
  <button ng-click="check()">Check!</button>
  <br>
  Selected Time = {{timeSelect}}
  <br/><br/>

User selects time and date and that is used to make call to the db and results are stored in a variable array! Page 1 controller:

var config= {
  params: { 
    time: times,
    date:dates
  }
};

$http.get('/era',config).success(function(response) {
  console.log("I got the data I requested");
  $scope.therapist_list = response;
});

Now how do I send this variable $scope.therapist_list which is an array to next page which will be having a different controller and also if services is use how do define it in my application.js file

application.js:

var firstpage=angular.module('firstpage', []);
var secondpage=angular.module('secondpage', []);
5

2 Answers 2

6

To save the data that you want to transfer to another $scope or saved during the routing, you can use the services (Service). Since the service is a singleton, you can use it to store and share data.

Look at the example of jsfiddle.

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


myApp.controller("ExampleOneController", function($scope, NewsService) {
  $scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope,NewsService) {
  $scope.news = NewsService.news;
});

myApp.service("NewsService", function() {
  return {
    news: [{theme:"This is one new"}, {theme:"This is two new"}, {theme:"This is three new"}]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="ExampleOneController">
    <h2>
  ExampleOneController
  </h2>
    <div ng-repeat="n in news">
      <textarea ng-model="n.theme"></textarea>
    </div>
  </div>
  <div ng-controller="ExampleTwoController">
    <h2>
  ExampleTwoController
  </h2>
  <div ng-repeat="n in news">
      <div>{{n.theme}}</div>
    </div>
  </div>
</body>

UPDATED

Showing using variable in different controller jsfiddle.

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


myApp.controller("ExampleOneController", function($scope, NewsService) {
  $scope.newVar = {
    val: ""
  };
  NewsService.newVar = $scope.newVar;
  $scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
  $scope.anotherVar = NewsService.newVar;
  $scope.news = NewsService.news;
});

myApp.service("NewsService", function() {
  return {
    news: [{
      theme: "This is one new"
    }, {
      theme: "This is two new"
    }, {
      theme: "This is three new"
    }]
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="ExampleOneController">
    <h2>
  ExampleOneController
  </h2>
    <div ng-repeat="n in news">
      <textarea ng-model="n.theme"></textarea>
    </div>
    <input ng-model="newVar.val">
  </div>
  <div ng-controller="ExampleTwoController">
    <h2>
  ExampleTwoController
  </h2>
    <div ng-repeat="n in news">
      <div>{{n.theme}}</div>
    </div>
    <pre>newVar from ExampleOneController {{anotherVar.val}}</pre>
  </div>
</body>

1
  • Yeah but how do I declare a variable value in controller 1 and use it in controller 2? Feb 15, 2016 at 9:41
0

OK, you write a another module ewith factory service e.g.

angular
    .module('dataApp')
    .factory('dataService', factory);

factory.$inject = ['$http', '$rootScope', '$q', '$log'];

function factory($http, $rootScope,$q,$log) {
    var service = {
        list: getList
    };
    service.therapist_list = null;
    return service;


    function getList() {
        var config= {
            params: { 
                time: times,
                date:dates
            }
        };

        $http.get('/era',config).success(function(response) {
        console.log("I got the data I requested");
        $scope.therapist_list = response;

        });

        $log.debug("get Students service");
        $http.get('/era',config).then(function successCallback(response) {
            service.therapist_list = response.data;
            $log.debug(response.data);
        }, function errorCallback(response) {
            $log.debug("error" + response);
        });
    }
}

Add this module as dependencies to your both page apps like

var firstpage=angular.module('firstpage', [dataApp]);
var secondpage=angular.module('secondpage', [dataApp]);

and then in your controller consume that service

.controller('homeController', ['$scope', 'dataService', function ($scope, dataService) {
}]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.