Umbraco 7 custom section editor, move controller deftination from view to separate file

Question

I have created my new custom section for Umbraco 7 backend. Now I have created edit.html file property editor purpose with code:

<script type="text/javascript">
function CustomSectionEditController($scope, $log, $routeParams) {
    $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };

    $scope.EditMode = function () {
        $log.warn($routeParams);
        return $routeParams.create == 'true';
    };
}
</script>

<div ng-controller="CustomSectionEditController">
    <umb-panel>
        <umb-header tabs="content.tabs">
            <div class="umb-headline-editor-wrapper span12 ng-scope">
                <h1 class="ng-binding">My custom section {{id}}</h1>
            </div>
        </umb-header>

        <umb-tab-view>
            <umb-tab id="tab1" rel="svensson">

                <div class="umb-pane">
                    This is tab content for tab 1<br />
                    <p ng-show="EditMode()">
                        <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
                    </p>
                </div>
            </umb-tab>

            <umb-tab id="tab2" rel="kalle">

                <div class="umb-pane">

                    This is tab content for tab 2
                </div>
            </umb-tab>

        </umb-tab-view>
    </umb-panel>

</div>

And it works well, but I want move business logic from view to separate file. I have tried to move JS code to separate file, and make link to it like this:

<script type="text/javascript" src="Controllers/StoreEditController.js"></script>

And Angular doesn't want to inject my controller into app. How I can move controller to separate file and make link to this in my view? Is it possible?

Excuse my English please. Regards, Anton

Logan · Accepted Answer · 2014-06-17T15:13:35.917

I just did the same thing not too long ago in Umbraco 7. What does your JS file look like? My guess is that you aren't adding your controller to the "umbraco" app like this in you separate js file.

    angular.module("umbraco").controller("CustomSectionEditController",
        function ($scope, $log, $routeParams) {
                $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };
                $scope.EditMode = function () {
                     $log.warn($routeParams);
                     return $routeParams.create == 'true';
                };
          }
     });

Also, be sure to include this new js file in your package.manifest.

I hope this is what you are looking for!

score 0 · Answer 2 · answered Jan 07 '15 at 19:04

Make sure you use the minification safe syntax for dependency injection.

angular.module("umbraco")
  .controller("ExampleController",
  ['$scope', '$log', function($scope, $log) {
    //do some stuff
  }]);

Also, add a package.manifest file directly under App_Plugins/YourPlugin/ with the following contents:

{   
    //array of files we want to inject into the application on app_start
    javascript: [
        '~/App_Plugins/YourPlugin/path/to/jsfile.js'
    ]
}

Here is the best example of this that I have found:

UkFest-AngularJS-Demo

Umbraco 7 custom section editor, move controller deftination from view to separate file

2 Answers2