@2sic.com/dnn-sxc-angular

dnn-sxc-angular - Connecting Angular to DNN and/or 2sxc

This is a connector for angular 6-11+ (git | web) for developers using

1. the open source platform DNN 7-9+ (git | web)
2. and/or the open source CMS 2sxc 10-11+ (git | web)

This connector...

1. allows you to develop from local while running with hot-reload on a DNN, even on the production site
2. automatically provides all important dnn-parameters (module ID, security token, etc.) to angular
3. adds an Http Interceptor for the HttpClient which automatically applies these parameters to all requests
4. gives you quick commands like data.query$ to get data with little effort from the server
5. prevents the enter-key from causing DNN form submits (optional, you can override this)
6. enables content-editing toolbars to work directly in Angular views

It uses observables to make it happen, thereby avoiding timing / async problems common in this scenario.

Setup & Discover Dnn-Sxc-Angular

TODO: update these docs to the latest angular 11 sample

It's published on npm, so the most common way is to get it using npm with npm i "@2sic.com/dnn-sxc-angular" --save. But we recommend that you follow the quick-start guide.

1. Start discovery using the tutorial app - ideally using the getting started recipe
2. If you've already mastered the basics and wish to build your own, you can
   1. Rename the tutorial app and continue working with that
   2. or modify an existing app to work with the same conventions

How To Use

Using WebAPIs inside DNN

This will now work automatically, because all headers etc. are now automatically added by the system. So just use your normal http-requests and everything works like magic :)

Using 2sxc Content-Items, Queries and APIs

This package is fully documented with intellisense. It contains a Data and Api object, which provides 3 observable streams

• content$
• query$
• api$

To use them, best check out the tutorial app or simply work through TypeScript intelisense - we documented all the commands.

History

1. ca. 2015 first version for Angular 2
2. ca. 2016 enhanced for Angular 6 and latest 2sxc features
3. 2019 Enhanced with Hot-Reloading features for Angular 8 and completely reworked how context is detected in DNN
4. 2020 Improved Hot-Reloading
5. 2021-02 Added tag-toolbar attribute and created refresh callback so the page doesn't reload (requires 2sxc 11.12)

Todo (status 2021-02)

These are things the 2sxc developers plan on enhancing

• enhance the content-manager to provide write commands (ATM read-only) - you can still do this, but must use the context.sxc... classic JS API
• enhance the content-manager to provide create-metadata commands - you can still do this, but must use the context.sxc... classic JS API