AngularJS Best Practices for modifying view - angularjs

Question

I currently have an Angular application with one module. This module defines a controller and a service. I'm currently using the service to update my view. Should services update view logic? Or should this be done in a separate Angular component?
index.html
<div ng-controller="AppController as AppCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<button ng-click="AppCtrl.getPeople()" ng-model="AppCtrl.getPeopleButtonText" ng-bind="AppCtrl.getPeopleButtonText"></button>
<button ng-click="AppCtrl.clearPeople()">Clear</button>
{{AppCtrl.errorMessage}}
</div>
app.js
angular.module('app', ['ui.grid'])
.controller('AppController', ['$scope', "PersonService", function ($scope, PersonService) {
var controllerScope = this;
controllerScope.getPeopleButtonText = "Get People";
this.getPeople = function(){
PersonService.getPeople($scope, controllerScope);
};
this.clearPeople = function(){
PersonService.clearPeople($scope, controllerScope);
};
}])
.service("PersonService", ["$http", function($http) {
var refreshCount = 0;
this.getPeople = function(rootScope, controllerScope){
var sampleData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": refreshCount%2 == 1
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": refreshCount%2 == 0
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": refreshCount%2 == 1
}
];
$http.post("https://httpbin.org/post", sampleData)
.success(function(data){
rootScope.myData = JSON.parse(data.data);
refreshCount++;
controllerScope.getPeopleButtonText = "Refresh " + refreshCount;
controllerScope.errorMessage = "";
})
.error(function() {
controllerScope.errorMessage = "An error has occurred."
});
};
this.clearPeople = function(rootScope, controllerScope) {
rootScope.myData = [];
controllerScope.getPeopleButtonText = "Get People";
}
}]);
Is there a better way to structure this code?
Another approach I have read about was to create a ViewService and expose the ViewService into the root scope.
EDIT Nov 19
I'm using an Angular Promise to handle the success/error cases of a service call in a controller, rather than inside the service. This allows me to move view updates into the controller. Is this the right place to keep the view updates?
this.getPeople = function() {
PersonService.getPeople()
.then(function(data) {
$scope.myData = JSON.parse(data);
controllerScope.getPeopleButtonText = "Refresh";
controllerScope.errorMessage = "";
}, function(error) {
controllerScope.errorMessage = "An error has occurred."
});
};
Here's an example plnkr
http://plnkr.co/edit/tzuSX3aAcUqpH5bM7cIa?p=preview

Answer 1

Never use $rootScope to store data
Use the MVC pattern if you like, so:
One view, has one controller, has as many services as you need.
Your view shows data which are in the $scope
Your Controller is getting the data from your PersonService
The PersonService (or just the API service) gets the data from a backend.
Best practices would be like this (simplyfied):
Api.js
angular
.module( 'api', [])
.service('Api', Api);
Api.$inject = ['$http'];
function Api($http) {
var baseUrl = '/api/url/';
function getPersons() {
return $http({
method: 'GET',
url: baseUrl + 'YOUR/PERSON/URL'
});
}
return {
getPersons: getPersons
}
}
PersonController.js
angular
.module('personApp')
.controller('PersonController', PersonController);
PersonController.$inject = ['$scope', '$state', 'Api'];
function PersonController($scope, $state, Api) {
$scope.getPersons = function() {
Api.getPersons().then(function(response) {
$scope.persons = response.data;
}, function(error) {
// error message
});
};
}
Persons.html
<div ng-controller="PersonController">
<div id="grid1" ui-grid="{ data: persons }" class="grid"></div>
<button ng-click="getPersons()"></button>
</div>
Summary
Your view displays the data which is inside the $scope
The view has a controller, which is there for just getting the data and storing it in the $scope, providing the functions for the buttons
Your services are delivering the data to the controller