Best practice for angular with custom backoffice sections
I've been following some tutorials to setup a custom section in the backoffice. I've managed to create a new section, add a tree controller and load a custom angular view.
This works fine for me if the view I'm using shows pretty basic content, but I question what the best practices are for handling more complex situations?
In my current scenario, I have an angular view that displays a list of members. But what if I want to have this listview click through to member details?
At the moment I handle all the functionality within a single controller, showing the list view when I want to list all members, then hiding it and displaying a single member's details on the page when I drill down, but I'm not sure if this is ideal.
Since angular apps pretty much work off a single html page, loading in the appropriate views, I wonder if this is the approach I should use for my custom sections? Should one of my custom section views be treated as a standalone angular app? ie. should I use angular's routing and state provider to handle all the different views I may use, or should it be divided out into separate views, using umbraco's routing to handle the different sections?
Hey Alimac,
You have two options really. You could do as you say as and using angular routing to pass the relevant information needed to view a single member's data or alternatively you could leverage the <umb-overlay /> directive or dialog service.
I'd recommend you use the routing approach if you're going to have a lot of information on a member (eg. multiple tabs or more than 5 properties).
For a quick view of a member information the overlay is perfect as it takes up a small potion of the screen.
If you need any implementations of these let me know. Otherwise check out the following API docs:
Jamie, you're a mind reader! I was literally trying to get a modal service to work with the back-end just now but had to give it up as there were issues with the angular versions used in the back end.
I didn't even realise the umbOverlay directive existed - it's exactly what I'm looking for in this scenario...
I wish I could high-five you again. Thanks so much!
Best practice for angular with custom backoffice sections
I've been following some tutorials to setup a custom section in the backoffice. I've managed to create a new section, add a tree controller and load a custom angular view.
This works fine for me if the view I'm using shows pretty basic content, but I question what the best practices are for handling more complex situations?
In my current scenario, I have an angular view that displays a list of members. But what if I want to have this listview click through to member details?
At the moment I handle all the functionality within a single controller, showing the list view when I want to list all members, then hiding it and displaying a single member's details on the page when I drill down, but I'm not sure if this is ideal.
Since angular apps pretty much work off a single html page, loading in the appropriate views, I wonder if this is the approach I should use for my custom sections? Should one of my custom section views be treated as a standalone angular app? ie. should I use angular's routing and state provider to handle all the different views I may use, or should it be divided out into separate views, using umbraco's routing to handle the different sections?
Hey Alimac,
You have two options really. You could do as you say as and using angular routing to pass the relevant information needed to view a single member's data or alternatively you could leverage the
<umb-overlay />
directive or dialog service.I'd recommend you use the routing approach if you're going to have a lot of information on a member (eg. multiple tabs or more than 5 properties).
For a quick view of a member information the overlay is perfect as it takes up a small potion of the screen.
If you need any implementations of these let me know. Otherwise check out the following API docs:
Thanks,
Jamie
Jamie, you're a mind reader! I was literally trying to get a modal service to work with the back-end just now but had to give it up as there were issues with the angular versions used in the back end.
I didn't even realise the umbOverlay directive existed - it's exactly what I'm looking for in this scenario...
I wish I could high-five you again. Thanks so much!
Glad I could help :) umbOverlay is pretty cool and a bit more flexible than dialogService.
Happy Umbracoing! #h5yr!
is working on a reply...