Umbraco 7 custom property editor using angular file upload

Question

I am using angular file upload in a custom property editor for Umbraco 7.0.3. I am following this tutorial in order to create the editor.

I am quite new to angular, so my question maybe trivial for some of you: I cannot resolve dependency to file upload service in my controller soon enough. My HTML template looks like:

<div ng-controller="MyCustomController">
    <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

The controller function would need $upload service as an argument, however I inject that service at the beginning of the function:

angular.module("umbraco")
    .controller("MyCustomController", function ($scope, assetService, $upload) {

    assetsService
        .load([
            "/App_Plugins/MyCustomPlugin/angular-file-upload.min.js",
        ])
        .then(function () {
            alert('upload service loaded');
        });

    $scope.onFileSelect = function ($files) {
        alert('file selected');
    }
});

So, it is definitely not right this way. I was trying to load the upload service before the controller initialization, however it loads asynchronously, so the service cannot get defined before the controller anyway.

How can I declare my controller function only after the upload service is loaded, or how can I get a reference to the service other than an argument?

Thanks,

EDIT

The only solution I've found so far was to include the actual file upload codebase into the controller of the custom property editor. I used this paper as a starting point for my own codebase for its simplicity. However I am still looking for the 'proper' way of loading an external module in this case.

Answer 1

Include your code as a service instead.

The code angular.module line can take extra parameters if you see its documentation page. It is here that you should look to include any third party libs. For example, I use ngTable - an AngularJS wrapper around a jQuery sortable and filterable table plugin. To include its usage, I have to add it as a service to the current application's module like so:

var app = angular.module("umbraco", ['ngTable']);

All I then have to remember to do is to reference the scripts, and I can use the code as though I had included the body of the code itself. Therefore, I presume that you would reference your service JS files, and write your code to reference the service like this:

angular.module("umbraco", "MyCustomController");

I would however rename the code as services rather than controllers.

It's a steep learning curve for AngularJS, and even when you've used it a lot, there are a lot of common gotchas. I hope this explains it a bit more.