Javascript 如何在AngularJS中的控制器之间共享数据？_Javascript_Angularjs_Node.js_Web_Controllers

Javascript 如何在AngularJS中的控制器之间共享数据？

javascript angularjs node.js web

Javascript 如何在AngularJS中的控制器之间共享数据？,javascript,angularjs,node.js,web,controllers,Javascript,Angularjs,Node.js,Web,Controllers,我有一个团队列表页面和一个团队页面。用户将在“团队列表”页面中列出他们所在的团队列表，然后单击其中一个团队转到其团队页面。我不确定如何发送数据，即用户要访问的团队页面是团队A的团队页面还是团队B的团队页面。那么如何在控制器之间共享数据呢？我知道我应该使用服务，但我不确定在这种情况下如何使用它们。我尝试了一些方法并注释了一些，但我仍然不确定如何进行在后端使用node.js和express framework team_list.html： <!DOCTYPE html> <h

我有一个团队列表页面和一个团队页面。用户将在“团队列表”页面中列出他们所在的团队列表，然后单击其中一个团队转到其团队页面。我不确定如何发送数据，即用户要访问的团队页面是团队A的团队页面还是团队B的团队页面。那么如何在控制器之间共享数据呢？我知道我应该使用服务，但我不确定在这种情况下如何使用它们。我尝试了一些方法并注释了一些，但我仍然不确定如何进行

在后端使用node.js和express framework

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>


团队名单
欢迎来到您的团队列表页面！

{{x.team_name}}


var page=angular.module（'teamListPage'，[]）；
/*page.factory（'myService'，function（））{
var user_id=[]；
var setUserID=函数（newObj）{
用户id.push（newObj）；
};
var getUserID=function（）{
返回用户id；
};
返回{
setUserID:setUserID，
getUserID:getUserID
};
});*/
page.factory（'myService'，function（））{
返回{
数据：{
用户ID:“”
},
更新：函数（用户ID）{
//根据需要改进此方法
this.data.user_ID=userID；
}
};
});
page.controller（'listController'，function（$scope，$http，$window，myService）{
log（myService.data）；
var login_http=$http({
方法：“GET”，
url:“/team_req”，
参数：{user_id:1}
}).那么(
功能（响应）{
//$window.alert（response.data[0]。团队名称）；
$scope.records=response.data；
//console.log（$scope.records[1]）；
//警报（'successfull…'）；
}，功能（回应）{
$window.alert（'错误的用户名/密码'）；
}
)
$scope.enterTeamPage=函数（）{
$window.location.href='/teamPage'；
};
$scope.enterCreateTeamPage=函数（）{
$window.location.href='/createTeamPage'；
};
})

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>


团队页面
团队页面
通讯板
聊天功能即将出现！
可视电话
视频通话功能即将出现！
屏幕共享
屏幕共享功能即将出现！
数据板
日历功能即将出现！
公告
所有功能很快就会出现！


var page=angular.module（'teamPage'，[]）；
page.controller（'teamController'，函数（$scope，$http，$window）{
//获取聊天板的历史记录
$scope.getChatHistory=函数（）{
var create=$http({
方法：“Get”，
url:“/chatHistory”
}).那么(
功能成功（响应）{
$scope.theResponse=response.data；
}，功能不成功（响应）{
警报（'从服务器返回错误'）；
$scope.theResponse=响应；
});
}
$scope.enterCodingPage=函数（）{
$window.location.href='/codingPage'；
};
})

另外，我应该将我的服务放在app.js或index.js中吗？

在控制器或组件（用于指令的包装器）之间共享数据的最佳方式是使用angular服务并将它们注入控制器。Cuz服务是单例服务，因此它们中的每一个都为将注入的所有组件呈现单一状态。

在控制器或组件（指令包装器）之间共享数据的最佳方式是使用angular服务并将其注入控制器。Cuz服务是单例的，因此它们中的每一个都为将被注入的所有组件呈现单一状态