Being new to Angular has been quite challenging for me. I've attempted various approaches and codes from different sources.
I have a simple view that retrieves/ adds data from a database via WEBapi.
3 questions:
1/ Why is IE not passing the data to the view here? 2/ What am I doing wrong in Chrome that prevents the SUBMIT action from working? 3/ What is the best approach to make it work on both browsers?
I can't seem to figure out what's going wrong. The Chrome console doesn't show any errors, but ngclick does not submit the form.
https://i.sstatic.net/yQZNV.png
On the other hand, IE fails to display the data in the list and shows an error in the console.
https://i.sstatic.net/60nEx.png
Regarding the WEBapi, it seems to be functioning correctly (tested using both browsers and Fiddler).
index.html
@{ Layout = null; }
<!DOCTYPE html>
<html lang="pl">
... [omitted for brevity] ...
module.js (consolidating code from other .js files)
<pre><code>var app;
(function () {
app = angular.module("APIModule", []);
app.service("APIService", function ($http) {
this.getParcels = function () {
var urlBase = 'http://localhost:1797/api';
return $http.get(urlBase + '/webapi');
}
this.saveParcel = function (par) {
var urlBase = 'http://localhost:1797/api';
return $http.post(urlBase + '/webapi', par);
}
});
app.controller("APIController", function ($scope, APIService) {
getAll();
$scope.getAll = function () {
var servCall = APIService.getParcels();
servCall.then(function (d) {
$scope.parcel = d.data;
});
};
$scope.addParcel = function () {
var parcel = {
Name: $scope.Name,
PostalCode: $scope.PostalCode,
City: $scope.City,
Phone: $scope.Phone,
Email: $scope.Email,
Street: $scope.Street,
RegistrationDate: new Date()
};
var saveParcel = APIService.saveParcel(parcel);
saveParcel.then(function (d, $scope) {
// Return here
$scope.getAll();
});
};
});
})();