Call component from a service

Question

I am trying to call a component from service I am injecting, which is in a controller - main_controller.js

I have main.html inside the same folder. "/app/abc"

<li ng-click="$ctrl.openUpload()">Upload</li>

Here is the code in the controller.

function MainCtrl($window, $cookies, $stateParams, $state, 
    modalService, $q) {

     var modal = modalService.open({
            size: 'upload',
            backdrop: 'static',
            component: 'assetUpload',
            resolve: {
                saveMsg: function () {
                    return 'Uploading…';
                },
                isModal: true,
                isReady: function () {
                    return function () {
                        return renderedPromise;
                    };
                },
                onCancel: function () {
                    return function (ctrl) {
                        ctrl.modalInstance.dismiss();
                    };
                }
            }
        });
 }

My component is in, "/app/component/_asset_upload/" folder.

When I call the upload function from controller, it gives me an error, "/abc/app/components/_asset_upload/asset_upload.html" 404 (Not found)

I dont understand why is it looking the component in "abc" folder (same folder as controller) rather than looking into "/app/components/_asset_upload/" folder.

How can I make the code better. Please help even if its a different architecture. Thanks

Answer 1

While defining the component you must have set templateUrl like this

templateUrl : 'app/components/_asset_upload/asset_upload.html'

This will search your HTML from the current folder, so change it to

templateUrl : '/app/components/_asset_upload/asset_upload.html'

This will search your HTML from the app root.