I am relatively new to AngularJS and have done many training courses and searching forums and need some guidance on how to solve what I think is a relatively simple problem.
Background I have an MVC App using entity framework code first for backend with sql server db.
On the client side I have serving up the initial Angular View as a .cshtml view via an MVC controller and then using Angular for all the client side partial views and communicating back to the server via Api calls.
Problem I can successfully read data from the database and also save data back to the database. However when I save data back to the database I have to refresh the page to see the data.
I have solved the problem by updating the in-memory objects and I let Angular handle all the binding.
However this does not seem to be a very good architecture as other users could be adding data to the database and I would never see the entries unless I did a page refresh.
What I am looking for is the best method for getting the data to refresh.
Service
appMainModule.factory('cmOrgChartService', function ($http,$q) {
return {
getList: function () {
var deferred = $q.defer();
$http.get('api/orgchart/list').success(deferred.resolve).error(deferred.reject);
return deferred.promise;
},
save: function (orgChart) {
$http.post('api/orgchart/saveOrgChart', orgChart);
},
saveList: function (list) {
$http.post('api/orgchart/saveOrgCharts', list);
},
delete: function (list) {
$http.post('api/orgchart/deleteOrgChart', list);
},
};
});
Controller
appMainModule.controller("cmOrgChartController", ['$scope', '$http', '$location', '$route', 'cmOrgChartService', function ($scope, $http, $location, $route, cmOrgChartService) {
$scope.orgChartModel = new window.Mojito.OrgChartModel();
$scope.viewList = [];
$scope.editList = [];
$scope.getList = function () {
cmOrgChartService.getList().then(function (result) {
$scope.viewList = (result !== null) ? result : {};
}, function (reason) {
console.log('Error', reason);
});
};
$scope.getList();
$scope.edit = function (orgChart) {
$scope.editMode = true;
if (orgChart == null) {
$scope.editList = $scope.viewList;
} else {
$scope.editList.push(orgChart);
}
};
$scope.save = function () {
if ($scope.editList.length == 1) {
$scope.orgChartModel = $scope.editList[0];
cmOrgChartService.save($scope.orgChartModel);
} else {
cmOrgChartService.saveList($scope.editList);
}
$scope.editList = [];
$scope.editMode = false;
};
$scope.delete = function (orgChart) {
cmOrgChartService.delete(orgChart);
var index = $scope.viewList.indexOf(orgChart);
$scope.viewList.splice(index, 1);
$scope.editMode = false;
};
$scope.init = false;
}]);