Please excuse my annoyed tone ;)

So, I'm developing this custom backoffice section for a client, but the experience of writing a custom plugin to Umbraco is (from my current perspective) one of the worst developer experiences I've had.. Maybe I'm doing something horrible wrong, I really hope that I am.

I've followed this tutorial from the docs: https://our.umbraco.com/documentation/Extending/Section-Trees/sections

The problem I'm running into is two-fold.

1. When making the smallest possible chance to the view, the changes aren't displayed on the screen. Sometimes it's enough to rebuild and refresh the page, sometimes it's enough to touch web.config and force the app-pool to recycle (running Umbraco from visual studio which should be supported as per the documentation). And sometimes I just furiosuly refresh the page and voila! my change appears

2. It seems like my package.manifest aren't loading the relevant javascript to the leads.html view. As the browser console tells me: "The controller with name 'Rexolution.GodMode.LeadsController' is not registered

I've tried to put the javascript inside a script-tag right in the leads.html view, but that doesn't allow me to register the controller either.

PLEASE, if you are a package developer, tell me or guide me through your workflow. Because I'm pulling my hair out right now........

My relevant files are as follows:

package.manifest

{
  "sections": [
    {
      "alias": "rexelGodMode",
      "name": "God Mode"
    }
  ],
  "javascript": [
    "~/App_Plugins/RexelGodMode/backoffice/rexelGodModeTree/leads.controller.js"
  ]
}

GodModeTreeController.cs

[Tree("rexelGodMode", "rexelGodModeTree", TreeTitle = "God mode", SortOrder = 1)]
    [PluginController("RexelGodMode")]
    public class GodModeTreeController : TreeController
    {
        protected override MenuItemCollection GetMenuForNode(string id, [ModelBinder(typeof(HttpQueryStringModelBinder))] FormDataCollection queryStrings)
        {
            // this tree does not support any menu item collections
            return new MenuItemCollection();
        }

        protected override TreeNodeCollection GetTreeNodes(string id, [ModelBinder(typeof(HttpQueryStringModelBinder))] FormDataCollection queryStrings)
        {
            // this tree doesn't support rendring more than 1 level of tree nodes
            if (id != "-1")
                throw new NotSupportedException();

            // create our node collection
            var nodes = new TreeNodeCollection();

            // add tree nodes, each node representing
            nodes.Add(CreateTreeNode("leads", "-1", queryStrings, "Leads", "icon-wallet", false, $"/rexelGodMode/rexelGodModeTree/leads"));

            return nodes;
        }
    }

leads.html

<div ng-controller="Rexolution.GodMode.LeadsController">
    <h1>Leads</h1>

    <table style="width: 100%">
        <thead>
            <tr>
                <th>Datum</th>
                <th>4-fas</th>
                <th>3-fas</th>
                <th>Kontakt</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2020-01-20</td>
                <td>10</td>
                <td>0</td>
                <td>Pelle Svanslös</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

leads.controller.js

'use strict';
(function () {
    //create the controller
    function leadsController($scope) {
        console.log('hello from the leads controller');
    };
    //register the controller
    angular.module("umbraco").controller('Rexolution.GodMode.LeadsController', leadsController);
})();

File structure