programing

프로그래밍 방식으로 서버에서 모델 데이터를 다시로드 / 새로 고침하는 방법은 무엇입니까?

nasanasas 2020. 11. 25. 08:01
반응형

프로그래밍 방식으로 서버에서 모델 데이터를 다시로드 / 새로 고침하는 방법은 무엇입니까?


배경

가장 기본적인 "초보자"AngularJS 질문이 있습니다. 내 무지를 용서하십시오. 코드를 통해 모델을 어떻게 새로 고칠 수 있습니까? 어딘가에서 여러 번 대답했다고 확신하지만 단순히 찾을 수 없었습니다. http://egghead.io에서 멋진 비디오를보고 튜토리얼을 빠르게 살펴 봤지만 여전히 매우 기본적인 것을 놓치고 있다고 느낍니다.

여기에서 관련 예제를 하나 찾았 $route.reload()지만 ( ) 아래 예제에서 사용 방법을 이해하지 못했습니다.

설정은 다음과 같습니다.

controllers.js

function PersonListCtrl($scope, $http) {
  $http.get('/persons').success(function(data) {
    $scope.persons = data;
  });
}

index.html

...
<div>
    <ul ng-controller="PersonListCtrl">
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
</div>
...

이 모든 것이 놀랍도록 잘 작동합니다. 페이지가 새로 고침 될 때마다 예상대로 사람 목록이 표시됩니다.

질문

  1. 새로 고침 버튼을 구현하고 싶다고 가정 해 보겠습니다. 모델이 프로그래밍 방식으로 다시로드되도록하려면 어떻게해야합니까?
  2. 모델에 어떻게 액세스 할 수 있습니까? Angular가 내 컨트롤러의 인스턴스를 마술처럼 인스턴스화하는 것 같지만 어떻게 손에 넣을 수 있습니까?
  3. EDIT 는 # 1과 같은 세 번째 질문을 추가했지만 JavaScript를 통해 어떻게 순전히 수행 할 수 있습니까?

나는 기본적인 것을 놓치고 있다고 확신하지만, 그것을 알아 내려고 한 시간을 보낸 후에는 질문을 할 가치가 있다고 생각합니다. 중복인지 알려 주시면 닫기 + 링크하겠습니다.


당신은 혼자서 절반 정도입니다. 새로 고침을 구현하려면 범위의 함수에 이미있는 것을 래핑하면됩니다.

function PersonListCtrl($scope, $http) {
  $scope.loadData = function () {
     $http.get('/persons').success(function(data) {
       $scope.persons = data;
     });
  };

  //initial load
  $scope.loadData();
}

그런 다음 마크 업에서

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="loadData()">Refresh</button>
</div>

"모델에 액세스"하는 한 컨트롤러에서 $ scope.persons 배열에 액세스하기 만하면됩니다.

for example (just puedo code) in your controller:

$scope.addPerson = function() {
     $scope.persons.push({ name: 'Test Monkey' });
};

Then you could use that in your view or whatever you'd want to do.


Before I show you how to reload / refresh model data from the server programmatically? I have to explain for you the concept of Data Binding. This is an extremely powerful concept that will truly revolutionize the way you develop. So may be you have to read about this concept from this link or this seconde link in order to unterstand how AngularjS work.

now I'll show you a sample example that exaplain how can you update your model from server.

HTML Code:

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="updateData()">Refresh Data</button>
</div>

So our controller named: PersonListCtrl and our Model named: persons. go to your Controller js in order to develop the function named: updateData() that will be invoked when we are need to update and refresh our Model persons.

Javascript Code:

app.controller('adsController', function($log,$scope,...){

.....

$scope.updateData = function(){
$http.get('/persons').success(function(data) {
       $scope.persons = data;// Update Model-- Line X
     });
}

});

Now I explain for you how it work: when user click on button Refresh Data, the server will call to function updateData() and inside this function we will invoke our web service by the function $http.get() and when we have the result from our ws we will affect it to our model (Line X).Dice that affects the results for our model, our View of this list will be changed with new Data.

참고URL : https://stackoverflow.com/questions/14693815/how-to-reload-refresh-model-data-from-the-server-programmatically

반응형