Angular Example?

[jcphlux]

I am trying to figure out if this is a fit for my project. Client is wanting to add CMS like features to there site that is built with asp core back end Angular front end. Wanted to know if there is a sample project or a tutorial on how to use piranha with Angular?

[tidyui]

From a structural point of view it would be really good match. However we just haven't had time to add a WebAPI module for exposing the application API, there's an issue for it here (https://github.com/PiranhaCMS/piranha.core/issues/229). Creating such a module is a fairly quick taks as it's really only a matter of exposing the existing API in a different way.

So it all comes down to how fast you want to get going :) If you want to contribute on making issue #299, either with coding, testing or giving input it's a good match, but if you just want to install a complete package it might not be a perfect match at the time being.

Best regards

Håkan

[jcphlux]

I have looked in on This project from time to time but have not had a chance to learn to use it. I would not mind helping out if I can find the time. I would need to weigh the time it would take to make these changes vs creating a custom solution to meet my clients needs.

[tidyui]

I pushed a new branch where I added two Api controllers with methods for getting the sitemap and a page by id just to give you an idea of how simple it really is to expose the api.

https://github.com/PiranhaCMS/piranha.core/tree/features/webapi-module/core/Piranha.AspNetCore.Api

Calling the sitemap api method on the example project produces the following output:

GET /api/sitemap

[
  {
    "originalPageId": null,
    "parentId": null,
    "sortOrder": 0,
    "title": "Welcome to Piranha CMS",
    "navigationTitle": "Home",
    "menuTitle": "Home",
    "pageTypeName": "Teaser Page",
    "permalink": "/",
    "isHidden": false,
    "published": "2018-07-04T05:16:38.058617",
    "created": "2018-07-04T05:16:38.1795",
    "lastModified": "2018-07-04T05:16:38.145315",
    "id": "91e9283b-12f0-4d64-99a3-0f3df49a6d73",
    "level": 0,
    "items": []
  },
  {
    "originalPageId": null,
    "parentId": null,
    "sortOrder": 1,
    "title": "Blog Archive",
    "navigationTitle": "Blog",
    "menuTitle": "Blog",
    "pageTypeName": "Blog Archive",
    "permalink": "/blog",
    "isHidden": false,
    "published": "2018-07-04T05:16:38.32583",
    "created": "2018-07-04T05:16:38.332486",
    "lastModified": "2018-07-04T05:16:38.329409",
    "id": "25403073-09e1-4219-99dd-309cabc8b824",
    "level": 0,
    "items": []
  },
  {
    "originalPageId": null,
    "parentId": null,
    "sortOrder": 2,
    "title": "Docs",
    "navigationTitle": null,
    "menuTitle": "Docs",
    "pageTypeName": "Standard page",
    "permalink": "/docs",
    "isHidden": false,
    "published": "2018-07-04T05:16:38.305499",
    "created": "2018-07-04T05:16:38.311007",
    "lastModified": "2018-07-04T05:16:38.309732",
    "id": "9337ff73-b274-465c-9166-6ad3429587bb",
    "level": 0,
    "items": []
  }
]

Getting the Startpage with the api gives the following output:

GET /api/page/91e9283b-12f0-4d64-99a3-0f3df49a6d73

{
  "teasers": [
    {
      "title": {
        "value": "Cross Platform"
      },
      "image": {
        "id": "0fa5570a-f671-422e-8771-dc51cbd45596",
        "hasValue": true
      },
      "body": {
        "value": "<p>Built for <code>NetStandard</code> and <code>AspNet Core</code>, Piranha CMS can be run on Windows, Linux and Mac OS X.</p>"
      }
    },
    {
      "title": {
        "value": "Super Fast"
      },
      "image": {
        "id": "485c0343-1611-4876-a5a8-ada1be08ed5a",
        "hasValue": true
      },
      "body": {
        "value": "<p>Designed from the ground up for super-fast performance using <code>EF Core</code> and optional Caching.</p>"
      }
    },
    {
      "title": {
        "value": "Open Source"
      },
      "image": {
        "id": "57049311-7f62-4e37-add0-6a07648ee6ee",
        "hasValue": true
      },
      "body": {
        "value": "<p>Everything is Open Source and released under the <code>MIT</code> license for maximum flexibility.</p>"
      }
    }
  ],
  "heading": {
    "primaryImage": {
      "id": null,
      "hasValue": false
    },
    "ingress": {
      "value": "The CMS framework with an extra bite"
    }
  },
  "isStartPage": true,
  "siteId": "d2222ef5-01b3-44ce-9888-a70b6ed52678",
  "contentType": "Page",
  "parentId": null,
  "sortOrder": 0,
  "navigationTitle": "Home",
  "isHidden": false,
  "redirectUrl": null,
  "redirectType": 0,
  "originalPageId": null,
  "blocks": [
    {
      "body": {
        "value": "<h2>What is Piranha.Core</h2><p>This is a <strong>complete rewrite</strong> of Piranha CMS for <code>NetStandard</code>. The goal of this rewrite is to create a version capable of targeting multiple platforms &amp; frameworks with minimal depenencies, but still provide a flexible & high performance CMS library.</p>"
      }
    },
    {
      "body": {
        "value": "<p>Piranha is currently built for <code>NetStandard 2.0</code> and uses the following awesome packages:</p><ul> <li>AutoMapper <code>6.2.1</code></li><li>Markdig <code>0.14.6</code></li><li>Microsoft.EntityFrameworkCore <code>2.0.1</code></li><li>Newtonsoft.Json <code>10.0.3</code></li></ul>"
      }
    },
    {
      "body": {
        "value": "<h2>Licensing</h2><p>Piranha CMS is released under the <strong>MIT</strong> license. It is a permissive free software license, meaning that it permits reuse within proprietary software provided all copies of the licensed software include a copy of the MIT License terms and the copyright notice.</p>"
      }
    }
  ],
  "slug": "home",
  "permalink": "/home",
  "metaKeywords": "Piranha, Piranha CMS, CMS, AspNetCore, DotNetCore, MVC",
  "metaDescription": "Piranha is the fun, fast and lightweight framework for developing cms-based web applications with AspNetCore.",
  "route": "/teaserpage",
  "published": "2018-07-04T05:16:38.058617",
  "id": "91e9283b-12f0-4d64-99a3-0f3df49a6d73",
  "typeId": "TeaserPage",
  "title": "Welcome to Piranha CMS",
  "created": "2018-07-04T05:16:38.1795",
  "lastModified": "2018-07-04T05:16:38.145315"
}

These api methods were created with minimal effort, so it's really just about what methods are needed from an application point of view.

Best regards

[tidyui]

What methods do you need in the api besides Sitemap & Page? I’m guessing the following is needed:

• Get archive with filter
• Get archive by category with filter
• Get archive by tag with filter
• Get post

It would be easy to incorporate preview of unpublished pages & posts depending on the claims of the current user.

Other than that I’m assuming it’s read only and the manager is used for editing.

[jcphlux]

Yeah that would probably handle most of what I need. I am sure once I get into it and know how to use it better I could help figure out any nuances that would make it better.

[jcphlux]

Let me build a test site with Piranha today before I play with this. I need a baseline to compare too.

[jcphlux]

ok I have been playing with the code and I think I have an understanding on how it works. I almost want to see if I could rebuild the manager and the test site with Angular.

[tidyui]

Rebuilding the test site is a nice the starting point. I don’t recommend rebuilding the manager as it relies a lot on resolving views based on CLR type and custom model binders, plus the fact that it would be extremely specific for your project and probably would make upgrading harder. However if you have a fixed application where you want to incorporate Piranha data in your admin it’s always an idea, we’ve actually done that in a project as well.

[jcphlux]

I am about half way though recreating an exact copy of the the test site using angular 6 I have created a test site that sits in the in the examples folder and works with the current master branch not the API branch. Is this something you would be interesting in merging in once I get it completed?

[jcphlux]

@tidyui I have the Angular 6 example site about 95% done at this point. I have a few things I would like to work with you on to get all the info I need to display blocks correctly and I think there is a better way to get the image Urls then the way I am handling it. Is there a better way we could communicate to tackle these last few issues I am having?

[jcphlux]

@tidyui I think I figured out all my issues. I am creating a pull request after I run through some testing and update the readme for the angular site on steps to get it working.