Hi all! I just managed to code my first Angular JS page to connect to a back-end REST Service. The layout is just minimal: items are displayed into a <div> section:
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/> <!-- Load AngularJS --> <script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script type="text/javascript"> var app = angular.module("PersonManagement", []); //Controller Part app.controller("PersonManagementController", function ($scope, $http) { //Initialize page with empty data $scope.persons = []; $scope.form = { name: "", surname: "" }; //Now load the data from server _refreshPageData(); //HTTP POST methods for add data $scope.add = function () { var data = { "name": $scope.form.name, "surname": $scope.form.surname }; $http({ method: "POST", url: '/persons', data: angular.toJson(data), headers: { 'Content-Type': 'application/json' } }).then(_success, _error); }; //HTTP GET- get all persons collection function _refreshPageData() { $http({ method: 'GET', url: '/persons' }).then(function successCallback(response) { $scope.persons = response.data; }, function errorCallback(response) { console.log(response.statusText); }); } function _success(response) { _refreshPageData(); _clearForm(); } function _error(response) { alert(response.data.message || response.statusText); } //Clear the form function _clearForm() { $scope.form.name = ""; $scope.form.surname = ""; } }); </script> </head> <body ng-app="PersonManagement" ng-controller="PersonManagementController"> <div class="container"> <h1>REST Service Demo</h1> <form ng-submit="add()"> <div class="row"> <div class="col-6"><input type="text" placeholder="Name" ng-model="form.name" size="60"/></div> </div> <div class="row"> <div class="col-6"><input type="text" placeholder="Surname" ng-model="form.surname" size="60"/></div> </div> <input type="submit" value="Save"/> </form> <h3>Person List</h3> <div class="row"> <div class="col-4">Name</div> <div class="col-8">Surname</div> </div> <div class="row" ng-repeat="person in persons"> <div class="col-4">{{ person.name }}</div> <div class="col-8">{{ person.surname }}</div> </div> </div> </body> </html> I'd like to replace the last <div> section (which iterates over the person object) with a data grid component which shows data in tabular format. I'm quite new to the AngularJS ecosystem: can you recommend me one which would require the least amount of code change? Thanks Francesco -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. To view this discussion on the web visit https://groups.google.com/d/msgid/angular/d0044167-7cb2-4ce7-bde1-30ef58467e41%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
