angularjs - reactivos - ¿Cómo volver a cargar/actualizar los datos del modelo desde el servidor mediante programación?

ng-src angular 5

Question

Fondo

Tengo la pregunta AngularJS "novata" más básica, perdona mi ignorancia: ¿cómo actualizo el modelo a través del código? Estoy seguro de que fue respondida varias veces en alguna parte, pero simplemente no pude encontrarla. He visto algunos videos geniales aquí http://egghead.io y repase rápidamente el tutorial, pero aun así siento que me falta algo muy básico.

Encontré un ejemplo relevante here ( $route.reload() ) pero no estoy seguro de entender cómo usarlo en el siguiente ejemplo

Aquí está la configuración

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>
...

Todo esto funciona increíblemente bien, cada vez que la página se recarga, veo la lista de personas como se esperaba

Las preguntas

1. Digamos que quiero implementar un botón de actualización, ¿cómo le digo al modelo que vuelva a cargar de forma programática?
2. ¿Cómo puedo acceder al modelo? parece que Angular está instanciando mágicamente una instancia de mi controlador, pero ¿cómo puedo tenerlo en mis manos?
3. EDIT agregó una tercera pregunta, igual que la # 1, pero ¿cómo se puede hacer simplemente a través de JavaScript?

Estoy seguro de que me falta algo básico, pero después de pasar una hora tratando de resolverlo, creo que merece una pregunta. Por favor, avíseme si es duplicado y cerraré + enlace a él.

Answer 1

¿Antes de mostrarte cómo volver a cargar / actualizar los datos del modelo desde el servidor mediante programación? Tengo que explicarles el concepto de enlace de datos . Este es un concepto extremadamente poderoso que realmente revolucionará la forma en que se desarrolla. Así que puede ser que tenga que leer sobre este concepto desde este link o este segundo enlace para entender cómo funciona AngularjS.

ahora le mostraré un ejemplo de muestra que explica cómo puede actualizar su modelo desde el servidor.

Código HTML:

<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>

Entonces nuestro controlador llamado: PersonListCtrl y nuestro Modelo llamado: personas . vaya a su Controlador js para desarrollar la función denominada: updateData() que se invocará cuando necesitemos actualizar y actualizar nuestras personas Modelo.

Código Javascript:

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

Ahora explico cómo funciona: cuando el usuario hace clic en Actualizar datos , el servidor llamará a la función updateData () y dentro de esta función llamaremos a nuestro servicio web mediante la función $http.get() y cuando tengamos el resultado de nuestro ws lo afectaremos a nuestro modelo (Línea X) .Dicho que afecta los resultados para nuestro modelo, nuestra Vista de esta lista se cambiará con los Datos nuevos.

Answer 2

Estás a mitad de camino por tu cuenta. Para implementar una actualización, simplemente ajustará lo que ya tiene en una función en el alcance:

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

luego en tu marcado

<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>

En cuanto a "acceder a su modelo", todo lo que necesita hacer es acceder a esa matriz $ scope.persons en su controlador:

por ejemplo (solo código de can) en su controlador:

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

Entonces podrías usar eso en tu vista o lo que quieras hacer.