Как обмениваться данными между контроллерами в AngularJS?

У меня есть страница team_list и страница команды. У пользователя будет список команд, в которых он находится, на странице team_list, а затем щелкните одну из команд, чтобы перейти на страницу своей команды. Я не уверен, как отправлять данные, на которые страница команды, на которую собирается пользователь, это командный пункт Команды А или командная страница Команды B. Так как я могу делиться данными между контроллерами? Я знаю, что должен использовать сервисы, но я не уверен, как использовать их в этом контексте. Я пробовал некоторые методы и закомментировал некоторые, но я все еще не уверен, как поступить с этим.

Использование node.js и экспресс-фреймворка для бэкенда

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>

Также я должен поместить свой сервис в app.js или index.js?

Источник

1 ответ

Лучший способ обмениваться данными между контроллерами или компонентами (оболочками для директив) - использовать угловые сервисы и внедрять их в контроллеры. Сервисы Cuz являются синглетонами, поэтому каждый из них представляет единое состояние для всех компонентов, в которые он будет введен.

Источник
Другие вопросы по тегам