Angular controller errors in Umbraco 10 with Razor Class Library
Hi
I'm trying to build a package using a razor class library, just to learn about how they work. I'm using Umbraco 10.8.4. After some initial frustrations most of the functionality is working great but I am having some persistent trouble with my angular controllers for a custom tree section.
angular.module("umbraco").controller("CSTest.DeleteController", function ($scope) {
function performDelete() {
}
});
And the view looks like this:
<div class="umb-dialog umb-pane" ng-controller="CSTest.DeleteController">
<div class="umb-dialog-body">
<p class="umb-abstract">
Are you sure you want to delete this product: <strong>{{currentNode.name}}</strong> ?
</p>
<umb-confirm on-confirm="performDelete" on-cancel="cancel">
</umb-confirm>
</div>
</div>
When running the project the delete.html view is found and rendered but the angular code within it is rendered on screen instead of executed and I get a console error:
angular.js:15697 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.8.3/$controller/ctrlreg?p0=CSTest.DeleteController
at angular.js:99:1
at angular.js:11787:17
at ea (angular.js:10818:34)
at p (angular.js:10603:32)
at g (angular.js:9942:13)
at angular.js:9807:30
at Object.link (angular.js:29993:9)
at angular.js:1391:15
at Ca (angular.js:11376:9)
at p (angular.js:10695:11) '<div class="umb-modalcolumn-body ng-scope" ng-include="view">'
I've also tried creating a basic edit view and controller with exactly the same results.
The JavaScript file for the controller is there if I browse to the URL so that has copied across from the RCL correctly.
Tearing my hair out trying to get this working so any help or insights would be much appreciated!
Thanks to Kevin Jump's excellent series of articles on razor class libraries I've now got to the bottom of this.
In Umbraco 10 package.manifest files are not picked up from the RCL by Umbraco so you need to add them programmatically. First you need to define the manifest in a class. Here's my example:
public class RegisterManifestFilters : IComposer
{
public void Compose(IUmbracoBuilder builder)
{
builder.ManifestFilters().Append<AddManifestFilters>();
}
}
Thanks to Kevin for the helpful articles - I only wish I'd come across them earlier!
Angular controller errors in Umbraco 10 with Razor Class Library
Hi
I'm trying to build a package using a razor class library, just to learn about how they work. I'm using Umbraco 10.8.4. After some initial frustrations most of the functionality is working great but I am having some persistent trouble with my angular controllers for a custom tree section.
Following the docs on this page https://docs.umbraco.com/umbraco-cms/v/10.latest-lts/extending/section-trees/trees I created a delete.html view and a delete.controller.js JavaScript file and copied the content into each. The JavaScript is also included in the package.manifest file as per the instructions.
The folder structure looks like this:
The controller looks like this:
And the view looks like this:
When running the project the delete.html view is found and rendered but the angular code within it is rendered on screen instead of executed and I get a console error:
I've also tried creating a basic edit view and controller with exactly the same results.
The JavaScript file for the controller is there if I browse to the URL so that has copied across from the RCL correctly.
Tearing my hair out trying to get this working so any help or insights would be much appreciated!
What does your package.manifest look like?
It's super simple, again just based on the example docs:
Thanks to Kevin Jump's excellent series of articles on razor class libraries I've now got to the bottom of this.
In Umbraco 10 package.manifest files are not picked up from the RCL by Umbraco so you need to add them programmatically. First you need to define the manifest in a class. Here's my example:
Then you need to add the manifest via a composer:
Thanks to Kevin for the helpful articles - I only wish I'd come across them earlier!
is working on a reply...