How to share data between controllers in AngularJS?

Question

I have a team_list page and a team page. A user will have a list of teams they are in in the team_list page and then click on one of the teams to go to its team page. I am not sure how to send the data that the team page that the user is going to is Team A's teampage or Team B's team page. So how do I share data between controllers? I know I should be using services but I'm not sure how to use them in this context..I've tried some methods and commented out some but I'm still not sure how to go about this.

Using node.js and express framework for backend

team_list.html:

<!DOCTYPE html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
    <title>Team List</title>
</head>

<body>

<h1>
    Welcome to Your Team List Page!
</h1>

<!--<div ng-app="teamListPage" ng-controller="listController">
    <fieldset>
        <legend>Your Teams</legend>
        <ul>
            <li ng-repeat="x in [dave, david, darrell]">{{x}}</li>
            <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
        </ul>
    </fieldset>
</div>-->

<div ng-app="teamListPage" ng-controller="listController">
    <li ng-repeat="x in records">
        {{x.team_name}}<br/>
        <input type="button" id="enter" name="enter" value="Enter Home Page" ng-click="enterTeamPage()"/>
    </li>
    <input type="button" id="Create" name="Create" value="Create New Team" ng-click="enterCreateTeamPage()" />
</div>

<script>
    var page = angular.module('teamListPage', []);
    /*page.factory('myService', function() {
        var user_id = [];

        var setUserID = function(newObj) {
            user_id.push(newObj);
        };

        var getUserID = function(){
            return user_id;
        };

        return {
            setUserID: setUserID,
            getUserID: getUserID
        };
    });*/
    page.factory('myService', function(){
        return {
            data: {
                user_ID: ''
            },
            update: function(userID) {
                // Improve this method as needed
                this.data.user_ID = userID;
            }
        };
    });


    page.controller('listController', function($scope, $http, $window, myService) {
        console.log(myService.data);

        var login_http = $http({
            method: 'GET',
            url: '/team_req',
            params: { user_id: 1 }
        }).then(
                function (response) {
                    //$window.alert(response.data[0].team_name);
                    $scope.records = response.data;
                    //console.log($scope.records[1]);
                    //alert('successfull ...');
                }, function (response) {
                    $window.alert('wrong username/password');
                }
        )
        $scope.enterTeamPage = function() {
            $window.location.href = '/teamPage';
        };

        $scope.enterCreateTeamPage = function() {
            $window.location.href = '/createTeamPage';
        };

    })
</script>



</body>
</html>

team_page.html:

<!DOCTYPE html>
<html lang="en">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Team Page</title>
</head>
<body>
<h1>
    Team Page
</h1>

<div ng-app="teamPage" ng-controller="teamController">
    <form id="Communication Board">
        <fieldset>
            <legend>COMMUNICATION BOARD</legend>
            <h3>
                chat feature coming up!
            </h3>
            <legend>videocall</legend>
            <h4>
                video call feature coming up!
            </h4>
            <legend>screenshare</legend>
            <h5>
                screenshare feature coming up!
            </h5>
        </fieldset>
    </form>

    <form id="Data Board" action="">
        <fieldset>
            <legend>DATA BOARD</legend>
            <h6>
                calendar feature coming up!
            </h6>
            <legend>announcements</legend>
            <h7>
                All features are coming up very soon!
            </h7>
        </fieldset>
    </form>

    <p>
        <input type="button" id="CodingZone" name="CodingZone" value="Go to Coding Zone" ng-click="enterCodingPage()" />
    </p>
</div>

<script>
    var page = angular.module('teamPage', []);
    page.controller('teamController', function($scope, $http, $window) {

        //get the history of the chat board
        $scope.getChatHistory = function() {

            var create = $http({
                method: 'Get',
                url: '/chatHistory'
            }).then(
                    function successful(response) {
                        $scope.theResponse = response.data;
                    }, function unsuccessful(response) {
                        alert('got an error back from server');
                        $scope.theResponse = response;
                    });
        }

        $scope.enterCodingPage = function() {
            $window.location.href = '/codingPage';
        };
    })
</script>
</body>
</html>

Also should I put my service in app.js or index.js?

score 3 · Answer 1 · answered Oct 10 '16 at 15:22

The best way to share data between controllers or components (wrappers for directives) is to use angular services and inject them into controllers. Cuz services are singletons so each of them presents single state for all components where it will be injected.

How to share data between controllers in AngularJS?

1 Answers1