Develop Reference

Directives angular

i'm really new on angular.
Im using angular 1.6, and i need to do some changes on a existing app.
As i could search, the previous developer was using http://www.codingdrama.com/bootstrap-markdown/ to have a textarea with some text options and a preview. My task now is to override the preview button to call our API with the text inserted and API return some result. On docs of that markdown I added up I found this.
onPreview: function(e) {
var previewContent
if (e.isDirty()) {
var originalContent = e.getContent()
previewContent = "Prepended text here..."
+ "\n"
+ originalContent
+ "\n"
+"Apended text here..."
} else {
previewContent = "Default content"
}
return previewContent
},
So i started to override that:
app.directive("markdowntextarea", ['$http', function ($http) {
return {
link: function (el_scope, element, attr) {
var previewContent = "preview";
element.markdown(
{
autofocus: false,
savable: false,
onPreview: function (e) {
console.log('1');
if (e.isDirty()) {
console.log('2!!')
var originalContent = e.getContent();
$http({
url: '/api/markdown/',
data: {"body": originalContent, "actual_format": "md", "desire_format": "html"},
method: 'POST'
}).then(function successCallback(response) {
console.log(response.data.content);
previewContent = response.data.content;
});
}else{
console.log('3')
previewContent = "";
}
previewContent = 'test';
return previewContent;
},
});
}
}
}]);
I can't find the error I have, but the previewContent always return "preview". From API side is ok, and the response.data.content is also correct.
Have no idea what to do next

The challenge is that you execute an asynchronous function and want to return it's value. In your code example you already returned from the onPreview function while the async function is still executed in the background. In AngularJS you can use promises to solve this kind of problem: "A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing".
BUT: As far I can see from the source the markdown component does not support promises. The onPreview method expects a string to be returned. The only option is to wait inside onPreview until the AJAX request returns - which is strongly discouraged. So IMHO it is not possible to use an AJAX request inside of onPreview.
IF the bootstrap-markdown would support promises you could try this:
app.directive("markdowntextarea", ['$http', '$q', function ($http, $q) { // inject $q
...
onPreview: function (e) {
console.log('im here!!');
var deferred = $q.defer();
if (e.isDirty()) {
var originalContent = e.getContent();
$http({
url: '/api/markdown/',
data: {"body": originalContent, "code": "a"},
method: 'POST'
}).then(function successCallback(response) {
console.log("successCallback", response.data.content);
deferred.resolve(response.data.content);
}, function errorCallback(response) {
console.log("errorCallback");
deferred.reject("error");
});
} else {
// quando esta vazio
deferred.resolve("");
}
return deferred.promise;
},
...
Here is a JSFiddle that demonstrates the concept. It's an update of Dave Kerr's AngularJS Promises - The Definitive Guide Part 2 - JSFiddle to AngularJS 1.6.

How to make multiple http requests in my case

I'm trying to chain a promise with Angular $resource.
I have the following factory:
angular.module('myApp').factory('Product', ['$resource', function ($resource) {
return $resource(
'/api/product/:name',
{ name: '#name' },
{ 'getSub': {
url: '/api/product/getSub/:name',
method: 'GET'}
}
);
}]);
I make multiple queries using my Product factory as such:
Product.query({'name': name}, function(product) {
Product.getSub({'name': product.name}, function(subItem) {
Product.getSub({'name':subItem.name}, function(childItem) {
//do stuff with child item
})
})
})
Is there a better way to do this? I feel like nesting all these calls is not a best practice.

You can chain the promises together!
Product.query({'name': name}).$promise
.then(function(product){
return Product.getSub({'name': product.name}).$promise;
})
.then(function(subItem){
return Product.getSub({'name': subItem.name}).$promise;
})
.then(function(item){
// etc
})

you can use waterfall of async library or implement it yourself.
here's sample code for your case.
async.waterfall([
function(callback) {
Product.query({'name': name}, function(product) {
callback(null, product);
})
},
function(product, callback) {
Product.getSub({'name': product.name}, function(subItem) {
callback(null, product, subItem);
})
},
function(product, subItem, callback) {
Product.getSub({'name':subItem.name}, function(childItem) {
var result = {};
result.childItem = childItem;
result.subItem = subItem;
result.product = product;
callback(null, result);
})
}
], function (err, result) {
//do stuff with result
});

If you want the requests to be done one after another (like you have in your example) you could do a recursive function like this:
in this example i want to upload a couple of images (calling a http route):
$scope.uploadImageLayout = function (currentIndex, numberOfItems) {
if (currentIndex === numberOfItems) {
// in here you could do some last code after everything is done
} else {
Upload.upload({
url: 'localhost:3000/ficheiros',
file: $scope.imagesToUpload[$scope.auxIndex].file
}).success(function (data, status, headers, config) {
if ($scope.auxIndex < numberOfItems) {
$scope.uploadImageLayout(currentIndex + 1, numberOfItems);
}
});
}
};
and the first time you call just do this:
$scope.uploadImageLayout(0, $scope.imagesToUpload.length);
in you case its the same but instead of the Upload.upload request you should have your request and catch the callback function(s).

A useful solution maybe use $q library
https://docs.angularjs.org/api/ng/service/$q
You can use the method $q.all() to send a lot of request and manage only one callback then() or make $q.defer() and resolve por reject your oun promises.
I currently answer this question from a mobile device and i can't make an example. Sorry about that.
If when I get home that mistake trains still try to help

angular resource - $resource:badcfg

My angular throws me
Error: [$resource:badcfg] Error in resource configuration for action query. Expected response to contain an array but got an object
I have no idea why this happens. I have a db with schools, and each schools has a city property. i'm trying to get all the schools in a given city.
On the server, my controller has a function which is supposed to do exactly that:
getSchoolByData: function(req, res, next) {
School.find({city: req.params.reqCity}).exec(function (err, collection) {
if (err) {
console.log("Could not load desired school: " + err);
}
res.send(collection);
});
}
On my client side I have a resource and another controller:
resource:
app.factory('SearchSchoolResource', function($resource) {
var SearchSchoolResource = $resource('/schoolSearchResult/:reqCity', {city: 'reqCity'}, { update: {method: 'PUT', isArray: false}});
return SearchSchoolResource;
});
controller:
app.controller('SearchSchoolCtrl', function($scope, $routeParams, SearchSchoolResource) {
$scope.schools = SearchSchoolResource.query({city: $routeParams.reqCity});
});
I have no idea which one of these fails to work properly and I have no idea how to check. I'm new to angular and node, and I spent over 72 hours on this, so if someone can tell me how to fix this, it will be amazing!
Other than that I managed to return all the schools, and a single school based on given id just fine, but returning schools based on city fails.
EDIT:
If I just put the name of the city in the find function like
... find({city: 'name'}) ...
It works, but if I use req.params.reqCity it doesn't. I can't figure out why it doesn't work, it seems like req.params.reqCity is returning something different and not the given city name. Tried just using .ToArray instead of .exec and it doesn't work again. Can't figure out what the req.params.reqCity returns and still can't figure out how to fix this.

Try this way, it should work. In addition to get i am also adding other operation's syntax.
Service:
app.factory('SchoolService',function($resource){
return $resource('/schoolSearchResult/:reqCity',
{
reqCity: '#reqCity'
},
{
'update': { method:'PUT' }
},
{
'get': { method: 'GET', isArray: false }
},
{
'delete': { method: 'DELETE'}
}
);
});
controller:
app.controller('SearchSchoolCtrl', function($scope, $routeParams, SchoolService) {
var schoolService = new SchoolService();
schoolService.$get({reqCity : $routeParams.reqCity},function(result){
$scope.schools = result;
});
});

$save gives me TypeError: undefined is not a function when saving model that is a list in angular

I am using current versions of asp.net, mvc, rest api, and angular.js. I populate my page with a list then on $save it gives me error TypeError: undefined is not a function
$scope.scacTaskPLDetails = {};
$scope.onGetTaskList = function () {
var scacTaskRes = $resource("api/ScacTaskPLDetails");
scacTaskRes.query({ taskID: scacTaskID }, function (scacTaskPL) {
$scope.scacTaskPLDetails = scacTaskPL;
});
}
/************************ Save Task **************************/
$scope.onSaveScacTask = function () {
if (!$scope.isEditing) {
$scope.$broadcast('show-errors-event');
if ($scope.TaskForm.$invalid) { return; }
$scope.$broadcast('show-errors-event');
if ($scope.TaskForm.$invalid) { return; }
}
$scope.scacTaskPLDetails.$save(function (results) {
if (results.successful) {
Notifications.success(results.serverMessage);
$scope.onReloadPage();
}
else {
Notifications.error(results.serverMessage);
}
});
}
I hope this is enough information. I have had no trouble up until now and the only thing different is that I am saving a list instead of a single object. In debugging I can see the list of objects populating the viewmodel scacTaskPLDetails.

you should use your resource to send an action to your endopint, not the response you got from the resource
try something like
var scacTaskRes = $resource("api/ScacTaskPLDetails");
$scope.scacTaskRes.$save(function (results) {
if (results.successful) {
Notifications.success(results.serverMessage);
$scope.onReloadPage();
}
else {
Notifications.error(results.serverMessage);
}
});

Thanks for the tips. I finally got it to save my collections with isArray: true
app.factory("SaveArrayOfTaskPLObjects", ['$resource', function ($resource) {
return $resource(
"api/ScacTaskPLDetails",
{},
{
save: {
method: 'POST',
isArray: true
}
}
);
}]);

AngularJS Services (Update/Save)

New to AngularJS and trying to get a grasp of the framework, and trying to build a basic CRUD app. I can't seem to figure out what is needed to Update an existing record. Here is my service:
angular.module('appServices', ['ngResource']).
factory('App', function ($resource) {
var Item = $resource('App/:AppId', {
//Default parameters
AppId: '#id'
}, {
//Actions
query: {
method: 'GET',
isArray: true
},
getById: {
method: 'PUT'
},
update: {
method: 'POST'
}
});
return Item;
});
I can run a basic Get all query, and getById to populate an edit form, but that's where I'm stuck. Here is example code for getById
$scope.apps = App.query();
$scope.getEdit = function(AppId) {
App.getById({id:AppId}, function(app) {
$scope.original = app;
$scope.app = new App(app);
});
};
$scope.save = function() {
//What type of information should go here?
//Do I need to make changes to the appServices?
};
I guess, I'm just not sure what's next concerning Updating existing information, or how the "app" object gets passed to the API, can anyone point me in the right direction, or show me a quick update method?

This is a really messy way of handling save operations in angular. For one - you should not be using PUT operations for retrieval requests and secondly - all of this is already built-in to angular. See below.
var Item = $resource( 'App/Details/:AppId', { AppId: '#id' } );
var item = Item.get({ id: 1 }, function( data ) {
data.setAnothervalue = 'fake value';
data.$save();
);
What I'm doing here is retrieving an "Item" and then immediately saving it with new data once it's returned.
Angular JS provides a stack of defaults already, including query, save, remove/delete, get.etc. And for most RESTful APIs, you really shouldn't need to add much, if anything at all. See the resource docs for more information, particularly the information on defaults: http://docs.angularjs.org/api/ngResource.$resource
Additionally, once you get a handle on that - you may want to use $save for both create/update operations, but using POST/PUT (RESTful conventions). If you do, see my article that I wrote about not too long ago: http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/

After doing a bit more research, and reviewing Daniel's link (thanks). I got it working.
Controller method:
$scope.save = function() {
$scope.app.update();
};
Service Factory:
var Item = $resource('App/Details/:AppId', {
//Default parameters
AppId: '#id'
}, {
//Actions
query: {
method: 'GET',
isArray: true
},
getById: {
method: 'PUT'
},
update: {
method: 'POST'
}
});
Item.prototype.update = function (cb) {
console.log(this.AppId);
return Item.update({ AppId: this.AppId },
angular.extend({}, this, { AppId: undefined }), cb);
};
return Item;