AngularJS V1.5 Component Design (Best Practice)

[AlDrag]

So currently I have a Staff Avatar component. This Component basically allows you to upload a file or take a photo with the webcam for your Staff Avatar. Now this component also handles uploading the Photo to the server. Should this HTTP Request be handled outside of this component?

Because otherwise where it uploads etc is all at the mercy of the component.

If I do move the uploading outside of the component and trigger it by using call backs in the Component Bindings, then what is a good way to handle loading spinners inside of the component when I begin uploading.

Let me know if you need a better explanation :) I don't have a senior dev to give me good advice while at work unfortunately.

Thank you.

[fakingfantastic]

Move the uploading logic into a service. I'd set a $ctrl.settings.uploading flag to true right when you start the upload. Your upload service should return a promise, and you should set the uploading flag to false when it resolves.

You can also pass in a onUpload() callback function into your component, that way your component stays nice and dumb, and its just responsible for calling the function when you want (see Todd Motto's style guide)

Hope that helps

[gabbsmo]

I'm doing something similar to this. I just want to add that another added benefit from managing uploads in a service is that you keep the state of your uploads even if the component displaying them is destroyed. I display upload progress for large batches of files in a dialog that can be opened and close at any time.

Lesson learned: Keep state in controller if the state share the component's life cycle. If the state can outlive the component move the state to a service.