@2sic.com/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.

First Step: Watch Introduction Video

Best watch the introduction video and read the general docs.

Setup & Discover Dnn-Sxc-Angular

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 😊

Configuring Alternate Context / Startup Configuration

By default dnn-sxc-angular will pick up all the values on the page automatically by asking $2sxc for the initial values. Yet there are some things that $2sxc doesn't know, or why you may want to override.

Method 1: Attributes on the Angular app-root Tag

dnn-sxc-angular will check for some properties on the <app-root> tag to see if it should do something special. If not found, it will default to the most common value.

• edition would tell angular that it's running in an app-edition where multiple editions exist. So it would use live etc. for it base path. Default is empty/not set.
• api-edition is important to access another edition of the API. default is empty/not set
• angular-path (new in 11.01)

Method 2: Set values on initialization

Once installed correctly, the context is autoloaded when the AppComponent which inherits SxcAppComponent does the super(...) call - like this:

export class AppComponent extends SxcAppComponent {
  constructor(el: ElementRef, context: Context) {
    super(el, context);
  }
}

If you want to provide alternate configurations, you can do this here, by changing the super call. Here's an example (you can do more, check the code):

export class AppComponent extends SxcAppComponent {
  constructor(el: ElementRef, context: Context) {
    super(el, context.preConfigure({moduleId: 42}));
  }
}

Using 2sxc Content-Items, Queries and APIs

This package is fully documented with intellisense. Once configured it ensures that all HTTP requests in angular include DNN headers. It also contains a SxcData and Api object, which provides 3 observable streams

• SxcData.data$<T>(contentTypeName)
• SxcData.query$<T>(queryName)
• api.get$<T>(apiNameAndParams)
• api.post$<T>(apiNameAndParams)
• plus various overloads

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)
6. 2021-02-26 v.11.01 - added new attribute angular-path to use as base for lazy loading

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