How to programmatically update / update model data from the server?

Question

Background

I have the simplest AngularJS "newbie" question, excuse my ignorance: how do I update the model with code? I'm sure he answered several times, but I just couldn't find it. I watched some great videos here http://egghead.io and quickly went through the tutorial, but, nevertheless, I feel that I am missing something very simple.

I found one relevant example here ( $route.reload() ), but I'm not sure I understand how to use it in the example below

Here is the setting

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

All this works surprisingly well, every time the page reloads, I see a list of people as expected

Questions

• Say I want to implement an update button, how can I say that the model is rebooting programmatically?
• How can I access the model? Angular seems to magically create an instance of my controller, but how can I figure that out?
• EDIT added a third question, like # 1, but how can this be done only with JavaScript?

I am sure that I am missing something basic, but after spending an hour trying to figure it out, I think he deserves a question. Please let me know if it is duplicated and I will close the + link to it.

Answer 1

You're halfway on your own. To implement the update, you simply wrap what you already have in the function in the field:

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

then in your markup

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

As for “accessing your model,” all you have to do is access the $ scope.persons array in your controller:

e.g. (only puedo code) in your controller:

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

You can then use this in your presentation or whatever you would like to do.

Answer 2

Before I show you how to programmatically update / update model data from the server? I have to explain the concept of data binding to you. This is an extremely powerful concept that truly revolutionizes the way you evolve. Perhaps you should read this concept from this or this seconde link in order not to understand how AngularjS works.

Now I will show you an example that exaplain how you can update your model from the 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 is named: PersonListCtrl and our model is named: . go to the js controller to develop a function called: updateData() that will be called when we need to update and update our face model.

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 will explain to you how it works: when the user clicks the Update Data button, the server will call the updateData () function, and inside this function we will call our web service with the $http.get() function and when we get the result from our ws , we will touch it in our model (line X). Determine what affects the results for our model, our view of this list will be changed using the new data.