hi i am creating a application with Angularjs,REST service with spring. i want to pass the object from angulajs url to rest service , but it does work, please any one help me, my jsp page code is like below,
<html ng-app="studentApp">
<body>
<div ng-controller="studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
</table>
</div>
</body>
</html>
and my angularjs code is,
var studentApp = angular.module("studentApp", []);
studentApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
studentApp.controller("studentController", [ '$scope', '$http',
function($scope, $http) {
$scope.toggle=true;
var urlBase="http://localhost:8080/studentweb/";
$scope.insertStudent = function inserStudent() {
$http({
method : 'POST',
url : urlBase+'/Student/insert',
data: {student:data}
}).success(function(data, status, headers, config) {
$scope.student=data;
$scope.toggle='!toggle';
}).error(function(data, status, headers, config) {
alert( "failure1");
});
and my rest service is,
public class StudentController
{
#RequestMapping(value="/Student/insert",method = RequestMethod.POST ,params= {"student"})
public String insertStudent(#RequestParam("student") StudentVO student) throws ParseException {
student.setFirstName(student.getFristName());
student.setLastName(student.getLstName());
studentcontrol.addStudent(student);
return "";
}
}
} ])
The problem is that you "usrlBase" variable has "student/" extra as you are already calling your Student controller in
url : urlBase+'/Student/insert'
Hence the complete URL becomes something like
http://localhost:8080/student//Student/insert whereas it should be something like:
http://localhost:8080/Student/insertStudent
Update:
Below is an absolutely fine working example with a sample restful service you had some brackets missing in your code. Please go through the below code and get back to me if required.
<html ng-app="studentApp">
<div ng-controller="studentController">
<table border="0">
<tr>
<td>Enter first name:</td>
<td><input type="text" ng-model="student.FirstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type="text" ng-model="student.LastName">
</td>
</tr>
</table>
</div>
Script:
var studentApp = angular.module("studentApp", []);
studentApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);
studentApp.controller("studentController", ['$scope', '$http',
function ($scope, $http) {
$scope.toggle = true;
//var urlBase = "http://localhost:8080/student/";
// $scope.insertStudent = function () {
debugger;
$http({
method: 'GET',
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Employees(1)?$format=json',
// data: { student: data }
}).success(function (data, status, headers, config) {
debugger;
$scope.student = data;
$scope.toggle = '!toggle';
}).error(function (data, status, headers, config) {
debugger;
alert("failure1");
});
// }
}]);
Related
I want to get status value from API in my grid made in angular js. Below is the code, I applied in my view file:
<tr ng-repeat="item in list">
<td>{{item.id}}</td>
<td class="text-center" ng-init="statusUpdate(item.id ,$index)">
</td>
<td>{{myVar[$index]}}</td>
</tr>
Then in my controller I added:
app.controller('MerchantController', function ($scope, MerchantService, Alert, toaster) {
$scope.statusUpdate = function (id, index) {
var api = MerchantService.statusUpdate(id, index).then(function (response) {
console.log($scope.myVar[index]);
$scope.myVar[index] = response.data;
console.log($scope.myVar[index]);
});
};
});
In my service file, I added:
app.service('MerchantService', function(API, $stateParams, $q,$http) {
this.statusUpdate = function(item,index) {
return $http({
url: 'http://10.10.10.7/petca_magento/integration/vendor/vendor/id/' + item,
method: "GET",
});
};
});
I want to get of status field dynamically based on the user id in {{myVar[$index]}}
I am beginning to learn Angular, and I am having this issue. I am getting data from a web service using REST, then passing this data to the controller as data.d.results, I check in developer tools and results.length is 11, all is fine. I modified my html to include ng-app,ng-controller. My HTML for the Controller wrapper looks like this:
<table ng-controller="ListsController as vm">
<thead>
<tr>
<td>Image</td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products">
<td>
<img ng-src="{{product.ImageUrl.Url}}" title="{{product.Title}}" style="width: 50px;margin:2px;" />
</td>
<td>{{product.Title}}</td>
<td>{{product.ProductCode}}</td>
<td>{{product.ReleaseDate}}</td>
<td>{{product.Price | currency}}</td>
</tr>
</tbody>
</table>
and My controllerJS file looks like this:
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
ListsController);
function ListsController() {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
}());
I am checking in developer tools, and at the end, vm.products is populated with the data from the service. But why my table isn't filled with the data? How can I troubleshoot problems related to it? No errors are shown for me or anything.
I suppose your getProducts is not implemented with angular's $http or $resource.
In such case, to achieve your goal, you have to inject $scope into your controller even though you are using controllerAs syntax.
(function () {
angular
.module("sitemanagerapp")
.controller("ListsController",
['$scope', ListsController]);
function ListsController($scope) {
var vm = this;
var getProducts = getAllItems('Products');
getProducts
.done(function (data, status, jqXHR) {
vm.products = data.d.results;
$scope.$apply();
})
.fail(function (jqXHR, status, error) {
LogError(error);
});
}
})();
I am using service to get JSON object using promises. It is then converted into array and assign to a property which is in $scope object. The problem is that array is not getting updated or any properties inside promise then() method.
Controller
var searchController = function ($scope, $SPJSOMService) {
$scope.myName = "old name";
$scope.getUsers = function ($event) { //called on button click
$event.preventDefault();
var queryText = "test user";
$SPJSOMService.getUsers(queryText)
.then(function myfunction(users) {
$scope.userCollection = JSON.parse(JSON.stringify(users)).d.results;
// $scope.$apply(); this line throwing error. $rootScope in progress
$scope.myName = "new name"; //not getting updated
}, function (reason) {
alert(reason);
});
};
};
Service
var SPJSOMService = function ($q, $http, $rootScope) {
this.getUsers = function (userToSerach) {
var deferred = $q.defer();
$http({
url:'some url',
method: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
}
})
.success(function (data, status, headers, config) {
deferred.resolve(data); //successfully return data
})
.error(function (data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
};
Updated
index.html
<div ng-include="'Search.html'">
</div>
<div ng-include="'searchResults.html'"></div>
search.html
<div id="containerDiv" ng-controller="searchController as search">
<input class="button" type="button" ng-click="getUsers($event);" value="Search" id="btnSearch" />
</div>
searchResults.html
<div ng-controller="searchResultController as result">
<table >
<thead>
<tr>
<th>Name</th>
<th>EMail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in userCollection">
<td>{{$index}} {{item.userName}}</td>
<td>{{$index}} {{item.userEmail}}</td>
</tr>
</tbody>
</table>
</div>
So search.html returns the data by calling the service and I am trying to pass it to the page namely searchResults.html which have its own controller.
$scope.users = $scope.userCollection;
Service class correctly returning data, but the problem is inside then(), which is not updating $scope.userCollection, hence UI is not getting updated.
Please help me out, what am I missing here.
In angular controllers can bind to the view in two ways:
"controller as"
through scope
It looks you are using the "controller as" flavor here...
<div ng-controller="searchResultController as result">
Refer to https://docs.angularjs.org/api/ng/directive/ngController for more information.
Change your controller code to:
var searchController = function ($scope, $SPJSOMService) {
//note use of "this" instead of "$Scope"
var _this = this;
_this.myName = "old name";
_this.getUsers = function ($event) { //called on button click
$event.preventDefault();
var queryText = "test user";
$SPJSOMService.getUsers(queryText)
.then(function myfunction(users) {
_this.userCollection = users.d.results; //You don't need JSON.parse not JSON.stringify
_this.myName = "new name";
}, function (reason) {
alert(reason);
});
};
};
and in your view use the controller "alias":
<div ng-controller="searchResultController as result">
...
<tr ng-repeat="item in result.userCollection">
...
You have to push it to the new array I think. Have you tried this in your then statement?
$scope.myName.push("new name");
It should put it in the existing array. Let me know if it works.
I tried to get the value from a table to my input text,this is my try:
this is the first page that contains the list of clients:
clients.html
<div id="ng-app" ng-controller="PostController">
<table class="table table-striped table-bordered" style="text-align:center" id="table" > <!--onClick="select()"-->
<thead>
<th align="center">Référence</th><th align="center">Nom</th><th align="center">Prenom</th><th align="center">Email</th><th align="center">Adresse Facturation</th><th align="center" colspan="2">Actions</th>
</thead>
<tbody>
<tr ng-repeat="post in posts | filter:posts.nom" >
<td align="center">{{post.id}}</td>
<td align="center">{{post.nom}}</td>
<td align="center">{{post.prenom}}</td>
<td align="center">{{post.email}}</td>
<td align="center">{{post.adresse}}</td>
<td align="center"><a ui-sref="app.modifier({customerID:post.id})">Modify</a></td>
</tr>
</tbody>
</table>
</div>
this is the "PostController" in which I get the list of clients:
.controller('PostsCtrlAjax', ['$scope','$rootScope', '$http' , '$window' ,function($scope,$rootScope,$http,$window) {
$scope.errors = [];
$scope.msgs = [];
$rootScope.usersData ;
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app.php/apiclient/clients.json'})
.success(function(data){
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.posts = data; // response data
$rootScope.usersData = angular.toJson($scope.posts);
console.dir($rootScope.usersData);
}).error(function(data, status, headers, config) {
console.log("data error ...");
});}])
When I clic on "Modify" link I am redirected to modify.html which contains the table's data values in input text:
<tabset class="tab-container">
<tab ng-controller="editController" >
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label">Nom:</label>
<div class="col-sm-1">
<input type="text" class="form-control rounded" ng-model="usernom" id="nom" value="">
</div>
</div></div> </tab></tabset>
the "editController" is responsible for sending the modified data(in case I modify) from the text inputs to the database with rest web services:
.controller('editController', ['$scope','$rootScope', '$http',function($scope,$rootScope,$http) {{
$scope.errors = [];
$scope.msgs = [];
$scope.usershow = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.path = window.location.href;
$scope.userid = $scope.path.split("/").pop();
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app_dev.php/apiclient/modifier?id='+$scope.userid+'&nom='+$scope.usernom}).success(function(data, status, headers, config){
if (data.msg != '')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
$scope.errors.push(status);
});}}])
the routing file:
.state('app.modifier', {
url: '/client/modifier/:customerID',
templateUrl: 'tpl/modify.html',
controller: 'editController'
})
the problem is that when I clic on button Modify,I didn't get values in the input text (in the modify.html page),How can I send the data from a table or that I get from a web service to an input text in another web page??thanks for help
You share data between controller via angular service instance
First, Create a angular service to retrieve and hold common table data
angular.module('app').service('TableService', function() {
var tableData = {};
this.getTableData = function() {
// use $http.get to get data from server
// save data in service local var
}
this.getTableRow = function(id) {
// return record from tableData that matches this ID
}
}
Second, inject this service in your controllers to access the data
angular.module('app').controller('editController', function(TableSerivce, $routeParams) {
var editingTableRow = TableService.getTableRow($routeParams.customerId);
// get the data that you need to update and put into the input text elements or components in your modify html via scope vars here
}
PS: This is a psuedo code to give you a brief idea of it. Watch this Egghead video for more details
I have a simple proof-of-concept I'm using as a base to learn some AngularJS. The code displays some JSON data in an HTML table, as follows:
HTML:
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<p>Click <a ng-click="loadPeople()">here</a> to load data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
</tr>
</table>
</div>
</div>
JS:
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
{
id: 1,
firstName: "Peter",
lastName: "Jhons"},
{
id: 2,
firstName: "David",
lastName: "Bowie"}
]));
var app = angular.module('myApp', []);
function PeopleCtrl($scope, $http) {
$scope.people = [];
$scope.loadPeople = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
$scope.people = data;
});
};
}
A fiddle is here: http://jsfiddle.net/TUJ9D/
This works nicely; when you click the link, it calls 'loadPeople' and the json is pulled into the table. However, what I'd like to do is bind this when the page loads, so the user doesn't have to manually click the link to see the data in the table.
I wondered what the best way to do this is? Instinct is telling me to call the function with jquery on page load, but then I don't know if that's a good approach or whether Angular could do this in a better way itself.
Thanks folks.
Just call the load function in your controller.
function PeopleCtrl($scope, $http) {
$scope.people = [];
$scope.loadPeople = function() {
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).success(function(data, status) {
$scope.people = data;
});
};
$scope.loadPeople();
}
http://jsfiddle.net/TUJ9D/1/
you can simple add ng-init="loadPeople()" directive inside your <div>.
i.e.
<div ng-controller="PeopleCtrl" ng-init="loadPeople()">