캔 각도외부 앱에 의해 영구 모델(서버 데이터베이스)이 변경된 경우 JS에서 보기를 자동으로 업데이트하시겠습니까?
이제 막 AngularJs에 익숙해지기 시작했는데, 서버측 데이터베이스에 변화가 생겼을 때 사용자가 실시간으로 자동(새로고침 없이) 볼 수 있는 웹 앱을 만들고 싶습니다.
캔 각도JS가 이 작업을 자동으로 처리합니까?그렇다면, 작동의 기본 메커니즘은 무엇입니까?
예를 들어, Angular를 어떻게 설정합니까?JS가 DB를 정기적으로 폴링하여 "모델" 변경 사항을 확인합니까?아니면 혜성 같은 메커니즘을 사용해서 앵귤러에게 알리거나모델이 변경된 JS 클라이언트 측 코드입니까?
제 어플리케이션에서는 웹 이외의 다른 서버측 소프트웨어가 데이터베이스를 갱신하는 것이 과제입니다.그러나 이 질문은 여러 클라이언트가 Angular를 통해 데이터베이스를 변경하는 순수 웹 애플리케이션에도 동일하게 적용됩니다.JS 웹 클라이언트 중 하나가 DB(모델)를 변경할 때 각각 업데이트해야 합니다.
몇 가지 선택권이 있어
을 할 수 .
$timeout
★★★★★★★★★★★★★★★★★」$http
중인 가 REST 서비스에 REST를 사용할 수$resource
$http
.구현을 하여 웹 소켓을 사용하는 를 만들 수 .
scope.$apply
소켓에 의해 푸시되는 변경을 처리합니다.「node.socket」소켓 소켓.이오오myApp.factory('Socket', function($rootScope) { var socket = io.connect('http://localhost:3000'); //Override socket.on to $apply the changes to angular return { on: function(eventName, fn) { socket.on(eventName, function(data) { $rootScope.$apply(function() { fn(data); }); }); }, emit: socket.emit }; }) function MyCtrl($scope, Socket) { Socket.on('content:changed', function(data) { $scope.data = data; }); $scope.submitContent = function() { socket.emit('content:changed', $scope.data); }; }
고도의 기술을 활용하여 Angular 모델을 서버와 동기화하는 웹 소켓 구현을 작성할 수 있습니다.클라이언트가 무언가를 변경하면, 그 변경은 자동적으로 서버에 송신됩니다.또는 서버가 변경되면 클라이언트에 전송됩니다.
다음은 소켓을 사용한 이전 버전의 Angular의 예입니다.io: https://github.com/mhevery/angular-node-socketio
편집: #3에서는 Firebase를 사용하여 이 작업을 수행했습니다.
노드 대신 jetty를 사용하는 구현이 있습니다.angularjs 부분은 angular-seed 앱을 기반으로 합니다.앵귤러 코드가 관용적인지는 모르겠지만...하지만 이게 효과가 있다는 걸 테스트해봤어요HTH - 토드
Timer Web Socket Servlet 참조
https://gist.github.com/3047812
controllers.controllers.displaces
// -------------------------------------------------------------
// TimerCtrl
// -------------------------------------------------------------
function TimerCtrl($scope, CurrentTime) {
$scope.CurrentTime = CurrentTime;
$scope.CurrentTime.setOnMessageCB(
function (m) {
console.log("message invoked in CurrentTimeCB: " + m);
console.log(m);
$scope.$apply(function(){
$scope.currentTime = m.data;
})
});
}
TimerCtrl.$inject = ['$scope', 'CurrentTime'];
서비스를 제공합니다.js
angular.module('TimerService', [], function ($provide) {
$provide.factory('CurrentTime', function () {
var onOpenCB, onCloseCB, onMessageCB;
var location = "ws://localhost:8888/api/timer"
var ws = new WebSocket(location);
ws.onopen = function () {
if(onOpenCB !== undefined)
{
onOpenCB();
}
};
ws.onclose = function () {
if(onCloseCB !== undefined)
{
onCloseCB();
}
};
ws.onmessage = function (m) {
console.log(m);
onMessageCB(m);
};
return{
setOnOpenCB: function(cb){
onOpenCB = cb;
},
setOnCloseCB: function(cb){
onCloseCB = cb;
},
setOnMessageCB: function(cb){
onMessageCB = cb;
}
};
})});
web.xml
<servlet>
<servlet-name>TimerServlet</servlet-name>
<servlet-class>TimerWebSocketServlet</servlet-class>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>TimerServlet</servlet-name>
<url-pattern>/api/timer/*</url-pattern>
</servlet-mapping>
당신이 찾고 있는 것은 Firebase와 Deployd입니다.Firebase에는 사용하기 쉬운 어댑터도 포함되어 있습니다.http://angularfire.com/
"운석 발견" 책에 따르면, 각도 시계/스코프는 반응도에 관한 Meteor의 계산과 유사합니다.그러나 Angular는 고객 전용이며 Meteor보다 입상 제어가 어렵습니다.
Meteor는 전체적으로 사용하면 급증하는 반면, Angular는 기존 앱에 반응성을 더하는 데 더 적합할 수 있습니다.하지만 아직 Angular에 대한 실제 경험은 없습니다(작은 Meteor 앱을 몇 개 만들었습니다만).
Andy Joslin은 제 의견에서 최적의 솔루션인 세 번째 옵션을 언급했습니다.이것은 웹소켓이나 다른 비동기 라이브러리(예를 들어 Chrome Extensions 및 Apps용 Chrome 메시지 API)를 통해 상태를 양방향으로 유지하는 것입니다.또한 Todg는 그 실현 방법의 예를 제시했습니다.단, 이 예에서는 Angular에서 안티 패턴을 구현하고 있습니다.서비스가 컨트롤러를 호출하고 있습니다.대신 모델을 서비스 내에 배치하고 컨트롤러에서 참조해야 합니다.
서비스 소켓콜백은 서비스 모델을 변경하고 컨트롤러에서 참조되므로 뷰를 업데이트합니다.그러나 재할당 가능한 원시 데이터 유형이나 변수를 다룰 때는 이 작업을 수행하려면 컨트롤러에 대한 감시가 필요합니다.
언급URL : https://stackoverflow.com/questions/11276520/can-angularjs-auto-update-a-view-if-a-persistent-model-server-database-is-chan
'programing' 카테고리의 다른 글
마크다운 파일을 리액트 컴포넌트에 로드하려면 어떻게 해야 합니까? (0) | 2023.03.14 |
---|---|
angularjs ui-module - 앱 전체에서 글로벌한 마스터 상태를 구축하는 방법 (0) | 2023.03.14 |
Oracle: 특정 범위에 걸쳐 "그룹화"하는 방법 (0) | 2023.03.14 |
spring-web 용 스프링 부트 자동 설정을 방지하는 방법 (0) | 2023.03.14 |
AJAX를 사용하는 jQuery Select2 컨트롤에 동적으로 항목 추가 (0) | 2023.02.15 |