I am trying to understand the logic of this factory thing. How can I use those variables, like save, drop, update. Can i use them like this ? X . Or i have to write something else to success.
app.factory("Inventory", function($resource){
return $resource(
"http://localhost/api/v1/inventory/:Id",
{Id: "#Id"},
{
update: {
method: 'POST',
params: {"update": true},
isArray: false
},
save: {
method: 'PUT'
},
create: {
method: 'POST'
},
drop: {
method: 'DELETE'
}
}
);
});
You need to define a controller and inject the dependency on it for you to be able to use this factory.
Example:
app.controller('myController', function($scope, Inventory) {
$scope.drop = Inventory.drop;
});
in your html:
<div ng-controller='myController'>
X
</div>
Related
I am new to AngularJS and I have a question here.
I am using $resource for my CRUD actions.
I currently have the code like this,
angular.module("dopAngular.services")
.factory("UserRoleService", ["$resource",
function ($resource) {
return $resource("api/UserRoleApi", {}, {
query: { method: "GET", isArray: true },
create: { method: "POST" },
get: { method: "GET" },
remove: { method: "DELETE" },
update: { method: "PUT" }
});
}]);
//below is the code in my controller
UserRoleService.query(function (data) {
vm.UserRoleLookups = data;
});
I would like to make my UserRoleService generic, which means I don't want to provide the specific URL for the API in the factory level.
I now modify my code a little bit,
angular.module("dopAngular.services")
.factory("UserRoleService", ["$resource",
function ($resource, url) {
return $resource(url, {}, {
query: { method: "GET", isArray: true },
create: { method: "POST" },
get: { method: "GET" },
remove: { method: "DELETE" },
update: { method: "PUT" }
});
}]);
My question is what I should do in my controller?
So, instead of directly returning $resource, we can encapsulate it with a function that accepts url as a param.
Something like this:
myApp.factory('UserRoleService', function($resource) {
return {
query: function(url) {
return $resource(url, {}, {
query: {
method: "GET",
isArray: true
},
get: {
method: "GET"
}
});
}
}
});
Now, in controller, you can call it like:
UserRoleService.query('//httpbin.org').get()
example fiddle
I am using ngCacheBuster in my app.js and
angular.module('myApp')
.factory('User', function ($resource) {
return $resource('api/users/:email', {}, {
'query': {method: 'GET', isArray: true},
'search':{
url:'api/search',
method:'GET',
params: {
email: '#email'
},
isArray:true
}
});
});
and calling as
User.search({email:$scope.nameQuery},function(result,headers){
$scope.users = result;
});
when I am trying to call this method, it is showing as
http://localhost:3000/myApp/api/search?cacheBuster=1488208210950&email=searchString
is there a way to remove cacheBuster from my url
I want something like
http://localhost:3000/myApp/api/search?email=searchString
Any help would be appreciated.
So I'm currently working with $ngResouce. My api: api/Content/resource/user.post.failed returns the following:
{
"user.post.failed": "Thing.."
}
app.factory('testResource', function ($resource) {
return $resource(apiurl + '/Content/resource/:resourcename', {}, {
show: { method: 'GET', isArray: false, params: {resourcename: '#resourcename'} },
update: { method: 'PUT', params: {id: '#id'} },
delete: { method: 'DELETE', params: {id: '#id'} }
})
});
This is what I call in my controller
$scope.test = testResource.get({resourcename: 'test'});
The question is actually really simple; how do I get just the 'content part' so test. I'm now getting the whole JSON part back.
So the scope test is now: {"user.post.failed":"Thing.."}
And I want the scope to be just Thing.
Probably really simple, but I couldn't find the answer.
Use the $promise property of the object to see errors:
$scope.test = testResource.get({resourcename: 'test'});
$scope.test.$promise.catch(function onReject(response) {
console.log('ERROR: ',response.status);
console.log(response);
});
So the scope test is now: {"user.post.failed":"Thing.."} And I want the scope to be just Thing.
console.log($scope.test["use.post.failed"]);
Use the property accessor syntax.
For more info see MDN JavaScript Reference -- Property Accessors
HTML
{{ test["use.post.failed"] }}
testResource.get({resourcename: 'test'}, function(data) {
$scope.test = data['user.post.failed'];
})
I am beginner learning Angularjs .Please help me with examples for following
script added
javascript -
var app = angular.module('myapp', []);
app.controller('MyCtrl1', ['$scope', 'UserFactory', function ($scope, UserFactory) {
UserFactory.get({}, function (userFactory) {
$scope.time = userFactory.time;
})
}]);
var service = angular.module('apiService', ['ngResource']);
service.factory('UserFactory', function ($resource) {
return $resource('http://time.jsontest.com', {}, {
query: {
method: 'GET',
params: {},
isArray: true
}
})
});
.html file
<body ng-app="myapp">
<divng-controller="MyCtrl1" >
<p>
Result from RESTful service is: {{ time }}
</p>
</div>
</body>
above snippet gives the out put as
Result from RESTful service is : {{time}}
and not the value i am expecting
..Reference : http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/
I want to write CRUD methods (GET/POST/PUT/DELETE) and I have started with GET.
Thanks
You need to make sure that your main app module injects your service. In your plnkr you have:
var app = angular.module('myapp', []);
where you should really have:
var app = angular.module('myapp', ['apiService']);
This ensures that the service module is injected into your app module, and you can use the UserFactory that you define in that module. For this simple case you could have also simply defined the UserFactory factory on the 'myapp' module as well
It's very close but you have a slight mistake in your app instantiation. It should be the following:
var app = angular.module('myapp', [ 'apiService' ]);
There's a couple other issues I see as well but one thing is I usually do the following for async requests
var promise = UserFactory.get({}).$promise;
promise
.then( function(response) {
$scope.time = userFactory.time;
});
EDIT: Here's an example for named methods for a given ReST service:
return $resource('/api/v2.0/user/lists/:listId',
{},
{
// POST - list create/product addition to list
'addProduct': {
method: 'POST',
isArray: false,
params: {
listId: '#listId',
productId: '#productId'
}
},
'createList': {
method: 'POST',
isArray: false,
params: {
listName: '#listName'
}
},
// GET - list of user lists/list details
'readLists': {
method: 'GET',
isArray: false,
params: {}
},
'readListsWithProductId': {
method: 'GET',
isArray: false,
params: {
productId: '#productId'
}
},
'readListById': {
method: 'GET',
isArray: false,
params: {
listId: '#listId',
sort: '#sort',
flags: true,
extendedInfo: true,
rows: '#rows',
start: '#start'
}
},
// PUT - list renaming
'renameList': {
method: 'PUT',
isArray: false,
params: {
newName: '#listName',
listId: '#listId'
}
},
// DELETE - list deletion/clear/product removal
'removeProduct': {
method: 'DELETE',
isArray: false,
params: {
listId: '#listId',
productId: '#productId'
}
},
'clearList': {
method: 'DELETE',
isArray: false,
params: {
listId: '#listId',
clear: true
}
},
'deleteList': {
method: 'DELETE',
isArray: false,
params: {
listId: '#listId'
}
}
});
You could access it like the following:
Factory.[methodName](payload)
i'm started so ths is very elementar question.
I have a simple factory:
angular.module('notes', ['ngResource']).
factory('Notes_module', function ($resource) {
var Notes_items = $resource(BASE_URL + 'xxx/:method/:guid', {},
{
get_all: {method: 'GET', params: {method: 'get_all'}, isArray: true }
});
return Notes_items;
}
);
and controller to show note_items.
function Notes($scope, Notes_module) {
$scope.notes = Notes_module.get_all();
};
Now in my view I have simple button to get new notes_items from server:
<a ng-click="synchronize()">
and the controller:
function LeftBardController($scope, Queries_module) {
$scope.synchronize = function() {
$scope.notes = Queries_module.get_all_new_note();
};
}
the new factory for check new items:
angular.module('queries', ['ngResource']).
factory('Queries_module', function ($resource) {
var Queries_items = $resource(BASE_URL + 'xxx/:method/:guid', {},
{
get_all_new_note: {method: 'GET', params: {method: 'get_all_trash'}, isArray: true },
});
return Queries_items;
}
);
And the question is.
When I click on button 'synchronize' the database are updated ok.But the view are not refresh. When I refresh page then the view are also refresh.
When I change $scope in my controller to $rootScope (save notes in rootscope) it automatically refresh view as i want and it's great - but it is a good way to use $rootScope. How can i do this in other way ?
I read about $apply but when add it to my controller i does not work.