How to make ember data fetch data from server. putting an AJAX call inside a component doesn't seem to be good practice to handle this
The Ember component is supposed to fetch data from the service, however I think that making AJAX calls inside the component is not a good practice.
Or use Route to fetch data and then pass the data to the component. But the route method cannot be easily shared between different routes.
source to share
All in all, you are right, it is not a good idea to put ajax calls into components. However, in the case where the data to be retrieved and displayed is closely related to the view - autocomplete might be one example - it should not be considered an anti-pattern.
If you find it important to decouple the ajax call, you can consider using a helper {{render}}
inside the component template and perform the ajax operation in a separate controller with an appropriate view that displays the results. The routes are not relevant here because they are related to navigation and URLs.
A component should only depend on the input that is passed to it.
If the component has some internal dependency (AJAX / Other data) for input, it is anti-pattern.
The deepened path will
1) Create a route: (get data into your application)
Sometimes you don't have a route for such data (for example, in your case). Here you can use the application route or any other parent route if available. Use setupController to inject this data into the appropriate controller
2) Pass data to component
Your data should now be a controller. Pass this data, like any other, to the required component
{{my-comp-here data="here" ajaxData=fromRoute }}
source to share