Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jeriah Colasino 3 posts 94 karma points
    Jun 17, 2022 @ 18:53
    Jeriah Colasino
    1

    Angular frontend in my website.

    How can i implement angular as frontend in my website? I read about umbraco backoffice written with angular js. How about the website? Thank you in advance.

  • Alex Skrypnyk 6131 posts 23950 karma points MVP 7x admin c-trib
    Jun 17, 2022 @ 21:22
    Alex Skrypnyk
    101

    Hi Jeriah,

    You have complete control over the front end of your website. You can edit 100% of symbols in response to the browser. You can do Angular, React, and VueJS. All frameworks work with Umbraco CMS.

    So answer your question - you can implement angular js as a frontend in your Umbraco website in the same way as in just an HTML project, just add angular to the template, and that's it.

    Thanks Alex

  • Adriano Fabri 458 posts 1601 karma points
    Sep 27, 2022 @ 10:33
    Adriano Fabri
    0

    I Jeriah,

    can you give me an example? I already have an Angular 13 app and I would to integrate in my Umbraco 10 website

    This is the files structure...where i must put all angular files/folder?

    enter image description here

    Thank you Adriano

  • Adriano Fabri 458 posts 1601 karma points
    Sep 27, 2022 @ 14:49
    Adriano Fabri
    0

    OK I found the answer :-)

    It works like a charm.

    Thank you Adriano

  • ziyad 3 posts 74 karma points
    Oct 04, 2022 @ 07:11
    ziyad
    1

    Please share it here so others can use as benchmark

  • Adriano Fabri 458 posts 1601 karma points
    Oct 11, 2022 @ 13:42
    Adriano Fabri
    1

    You're right ziyad.

    This is what I've done:

    In wwwroot folder I created a new folder  with name "angular" (I'll use it for all angular applications)
    In the "angular" folder I created the app folder ("test-app") and I copied  all builded files (except the index.html file).
    I created a template for the app in which I inserted all html code contained in the index.html file.
    I corrected all js and css files path
    I update all angular routing to match the umbraco routing
    I checked that all links contained in the angular app are correct
    Finally I created a new content and assigned it the newly created template
    

    et voilĂ ...angular app works perfectly.

    I hope this can help

    Adriano

  • Rami Kanawati 7 posts 76 karma points
    Apr 26, 2023 @ 11:08
    Rami Kanawati
    0

    What if I want to put it inside the umbraco cms and not as a published site outside the CMS, i want it inside along with multiple other projects. that i can shuffle through, please assist

  • Adriano Fabri 458 posts 1601 karma points
    Apr 27, 2023 @ 10:06
    Adriano Fabri
    1

    Hi Rami,

    I know what you want to do but this is the only way (for now) I found to integrate Angular App in Umbraco (no manage).

    This is the steps:

    • Create in wwwroot folder an angular folder that will contain all angular projects umbraco folder wwwroot folder
    • Create the app folder and copy here all angular app files angular folder app folder
    • In Umbraco, create a simple document type (I created it with no fields) and the template (this is the content of the index.html) for your angular app (in my case Angular - Protocollo DS) and update all URL to your app (in my case rows 16, 35, 37, 42, 43, 44 and 45) Settings - Template
    • In Umbraco, create a the content node for your angular app and check that the URL of each one are correct Content Nodes
    • Finally you must update the file path in the main.js file update angular file path

    That's all.

    Now when you update your angular app, you must only copy or update the new files in the wwwroot/angular/YOURAPP/ folder and update the file path in the main.js file.

    I hope this help you

    Adriano

  • alaa almasri 5 posts 25 karma points
    Sep 06, 2023 @ 12:19
    alaa almasri
    0

    hello Adriano Fabri

    is there a GitHub repo you can give me to understand how it build

  • Adriano Fabri 458 posts 1601 karma points
    Sep 06, 2023 @ 15:44
    Adriano Fabri
    0

    Hi alaa,

    I have not created a github repository for publishing Angular applications inside Umbraco.

    Moreover, compared to what I had indicated in the thread, over time I have also improved the publication and updating of Angular applications in Umbraco.

    What I could do, if it's okay for you, is to provide a series of example's files and related screenshots of the configuration in Umbraco of the document type/Template/Partial Views that can help you to understand how publish Angular Applications using Umbraco

    It will take me a while but it could definitely help you understand better all the stages

    Adrian

  • alaa almasri 5 posts 25 karma points
    Sep 07, 2023 @ 07:54
    alaa almasri
    0

    sure that would be great I have been struggling to find code or any articles about this if you can explain to me in steps how to build an Umbraco project with angular that would be great

  • alaa almasri 5 posts 25 karma points
    Sep 26, 2023 @ 08:44
    alaa almasri
    0

    any update

  • Rami Kanawati 7 posts 76 karma points
    Apr 27, 2023 @ 10:10
    Rami Kanawati
    0

    are there any api calls that i can use, for example to get the umbraco user and only he/she can access my website? is that sth feasible

  • Adriano Fabri 458 posts 1601 karma points
    Apr 27, 2023 @ 10:23
    Adriano Fabri
    1

    You can done it in some ways:

    • directly in template before rendering the page
    • using a custom external method called before rendering the page
    • creating a custom RestAPI (C#) that manage the access (integrated with the Umbraco Members Authentication) that you can use in your angular app
    • or manage the access directly from angular (for example in the past I used the ADFS authentication cookie to check if user is logged and I put in the environment file the list of enabled user)

    Adriano

  • Rami Kanawati 7 posts 76 karma points
    Apr 28, 2023 @ 06:37
    Rami Kanawati
    0

    can you host more than one website in the cms or just one?

  • Adriano Fabri 458 posts 1601 karma points
    Apr 28, 2023 @ 14:22
    Adriano Fabri
    0

    Sure...in content section you can create one homepage node for every website and assign to each one a differnt host name using the "Culture and Hostnames" functionality

Please Sign in or register to post replies

Write your reply to:

Draft