Creating an Angular Front-end with Umbraco Back-end
Because Umbraco 7 is so easy and friendly to extend, nowadays it sometimes makes more sense to use Umbraco as a content provider for a greenfield project in AngularJS instead of creating an own back-office.
I can easily come up with a few ideas how to serve my content to my Angular frond-end, but I'm wondering what is the best technical solution with things that Umbraco serves from the core out.
1) Make a few custom RestAPi's which consume UmbracoContext
This looks to me the most flexible approach and seems to make every idea possible. But, are there any considerations to make or ways to approach using the UmbracoContext releated to performance/caching?
2) Use the UmbracoRestApi and access all data using it's API's
Would this be a good idea? I'm actually a little bit concerned as I only see one release in 2015. Or is this part of the core now? I didn't really find a reference to it in a quick glimse at the release notes. Are there any limitations using this approach?
3) Is there a Hijacking approach possible? Imagine something as adding an Attribute to each controller [RenderAsRestObject] or just Hijack everything myself and return a Rest Actionresult?
--
I found some old blogposts from 2014 and beginnen 2015, maybe things have changed since then. Which approach should I use to consume from Umbraco and render data in my Angular views?
<script type="text/javascript">
window['banner-callout-85346127613e4513a7f41903f33684a7'] = [{"item":{"header":"Global Giving","summary":"\u003cp\u003eQuality of vision is an essential foundation with potentially profound impacts on quality of life, an individual’s potential opportunities for education, career choices, and the ability to not only sustain, but participate and fully experience our families, lives and communities. We’re proud to go beyond our day-to-day business as we look for ways to give back to the community that supports us.\u003c/p\u003e","image":{"url":"/media/1253/biking-duo-crop.jpg","alt":"NVISION global giving ","width":1390,"height":631},"tabletImage":{"url":"/media/1003/biking-duo.jpg","alt":"NVISION global giving ","width":1440,"height":654},"mobileImage":{"url":"/media/1254/biking-duo-2.jpg","alt":"NVISION global giving ","width":1128,"height":512},"link":{"url":"/about/global-giving","label":"Read the Story","newWindow":false}}}][0];
</script>
<ri-json-source data-source="banner-callout-85346127613e4513a7f41903f33684a7">
<ri-banner-callout data-item="::ctrl.item"></ri-banner-callout>
</ri-json-source>
You'll see a bunch of code that looks like that. Basically, we're embedding JSON on the page and passing it to Angular directives. No need to hit an endpoint after the page loads.
There is actually a better way to do this that I've been going with recently, but I don't have an example of that live yet. The idea is the same though. You can render out everything you need in the initial page load.
Haven't tried Umbraco REST API myself, but it seems like it would be an OK approach. You can also create your own API controller if you want to return a bit of JSON for consumption by Angular. See here: https://our.umbraco.org/documentation/reference/routing/webapi/
Did you found a solution or any guideline? Any information about this thread can be useful because I will need to use Angular2 for the frontend part and keep Umbraco for the backend API.
Hi, I'm using Angular 5 in FE and umbraco as backend. Recently i added Table in Richtexteditor and i am wondering how can i connect the design so that an editor adds a table in RTE and it renders in Angular site with same css. Any tips would be appreciated
Creating an Angular Front-end with Umbraco Back-end
Because Umbraco 7 is so easy and friendly to extend, nowadays it sometimes makes more sense to use Umbraco as a content provider for a greenfield project in AngularJS instead of creating an own back-office. I can easily come up with a few ideas how to serve my content to my Angular frond-end, but I'm wondering what is the best technical solution with things that Umbraco serves from the core out.
1) Make a few custom RestAPi's which consume UmbracoContext
This looks to me the most flexible approach and seems to make every idea possible. But, are there any considerations to make or ways to approach using the UmbracoContext releated to performance/caching?
2) Use the UmbracoRestApi and access all data using it's API's
Would this be a good idea? I'm actually a little bit concerned as I only see one release in 2015. Or is this part of the core now? I didn't really find a reference to it in a quick glimse at the release notes. Are there any limitations using this approach?
3) Is there a Hijacking approach possible? Imagine something as adding an Attribute to each controller [RenderAsRestObject] or just Hijack everything myself and return a Rest Actionresult?
--
I found some old blogposts from 2014 and beginnen 2015, maybe things have changed since then. Which approach should I use to consume from Umbraco and render data in my Angular views?
Check out the source of this site: https://nvisioncenters.com/
You'll see a bunch of code that looks like that. Basically, we're embedding JSON on the page and passing it to Angular directives. No need to hit an endpoint after the page loads.
There is actually a better way to do this that I've been going with recently, but I don't have an example of that live yet. The idea is the same though. You can render out everything you need in the initial page load.
Haven't tried Umbraco REST API myself, but it seems like it would be an OK approach. You can also create your own API controller if you want to return a bit of JSON for consumption by Angular. See here: https://our.umbraco.org/documentation/reference/routing/webapi/
Hi Gaitano Boeraeve
How have you incorporated Umbraco as the CMS for your Angular Frontend?
I am going to use Angular 2 but I'm stuck how I am going to combine the two together.
Thank you in advance.
Kind Regards
How can I actually use the Umbraco CMS Only but not the frontend.
Using only Web Api Controllers for getting data?
Any guidelines please?
Kind Regards
Hi Simon,
Did you found a solution or any guideline? Any information about this thread can be useful because I will need to use Angular2 for the frontend part and keep Umbraco for the backend API.
Thanks in advance,
best regards
Hi, I'm using Angular 5 in FE and umbraco as backend. Recently i added Table in Richtexteditor and i am wondering how can i connect the design so that an editor adds a table in RTE and it renders in Angular site with same css. Any tips would be appreciated
is working on a reply...