Angular CRUD for more than one model object in one application
Question
I have an Angular application that has three different business objects which require CRUD operations to be implemented on all of them independently. Let's call them a,b,c. I have equivalent aCtrl,bCtrl,cCtrl and aSvc,bSvc,cSvc to manage these CRUD operations. So in this example, aCtrl manages CRUD for 'a'. aSvc helps persist the data to the backend with an ajax call. I also have an allCtrl and allSvc which pulls all the objects a,b,c together from the backend in one json object when the application loads for the first time (instead of pulling them separately, I designed the backend to push one unified json object with embedded a,b,c in it.
The 'all' object
{
a:{},
b:{},
c:{}
}
so I'm stuck in structuring the app in a straightforward meaningful way. When the app loads for the first time, I'll have 'all' object pulled in by the allSvc from the backend. This has all the data needed to perform CRUD (of course I have to keep it in sync with the backend). And when the app loads for the first time, I want to list the objects of type 'a' and then give the user options to edit/delete/add. Similarly, I have drop down navigation to do take the user to other pages that do exactly the same for object 'b', 'c'.
Here are some snippets of what I did so far and how I fail miserably :)
index.html
<html lang="en" ng-app="myApp">
...
...
<div class="" ng-view></div>
js
var myApp = angular.module('myApp', ['ngRoute','restangular']);
myApp.controller('aCtrl', function($scope, aSvc)
myApp.controller('bCtrl', function($scope, bSvc)
myApp.controller('cCtrl', function($scope, cSvc)
myApp.controller('allCtrl', function($scope, allSvc)
routes
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/a/list', {templateUrl: 'partials/a/list.html',controller: 'aCtrl'});
$routeProvider.when('/a/add', {templateUrl: 'partials/a/add.html', controller: 'aCtrl'});
$routeProvider.when('/a/edit/:id', {templateUrl: 'partials/a/edit.html', controller: 'aCtrl'});
$routeProvider.when('/a/delete/:id', {templateUrl: 'partials/a/list.html', controller: 'aCtrl'});
.... similary I have routes for b & c to perform crud
$routeProvider.otherwise({redirectTo: '/a/list'});
}]);
aCtrl
myApp.controller('aCtrl', function($scope, aSvc,allSvc) {
$scope.allCollection= allService.getAll();
$scope.aCollection = allCollection.a;
I'm unable to meaningfully setup routeParams in this design to perform edit/delete properly. I also have to account for the userId (the user who logs in for whom the CRUD operations need to be performed). How do I better manage the routes? should I use something like /a/edit/userId/aId for editing 'a' and /a/delete/userId/aId to delete 'a' as an example?
Please help me polish this turd.
1 answers
solution1
0 2016-06-23 05:36:38
I have separated the service/update/request calls in a controller and the project can be found at the below path. Let me know if anyone thinks it can be improved further. However, to test the services, I have used strongloop and the description can be found at the repository itself.
Angular - Create, Update, Delete
The sample would look like this:
'use strict'; function MainController($scope, $state, $rootScope, $window, $stateParams, HttpService) { $scope.init = function () { HttpService.load("http://0.0.0.0:3000/api/custdetails") .then(function (response) { if (response) { console.log(JSON.stringify(response.data)); $scope.showAllData = response.data; } }, function (error) { console.log("Error occurred"); }); }; $scope.addMoreData = function () { var data = { cust_name: $scope.custNameModel, phone_number: $scope.phoneNumberModel, id: $scope.idModel }; HttpService.update('http://0.0.0.0:3000/api/custdetails?', data); $scope.init(); }; $scope.updateData = function () { var data = { cust_name: $scope.custNameModel, phone_number: $scope.phoneNumberModel, id: $scope.idModel }; HttpService.patch('http://0.0.0.0:3000/api/custdetails?', data); $scope.init(); }; $scope.deleteData = function () { console.log("ID defined is: " + $scope.idModel); HttpService.delete("http://0.0.0.0:3000/api/custdetails", $scope.idModel); $scope.init(); }; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.