Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@2sic.com/dnn-sxc-angular

Package Overview
Dependencies
Maintainers
2
Versions
96
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@2sic.com/dnn-sxc-angular

Connect DNN / DotNetNuke and 2sxc to Angular 4/5

  • 1.7.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
48
increased by1100%
Maintainers
2
Weekly downloads
 
Created
Source

dnn-sxc-angular

Connector for angular 4.3+ (git | web) if you're using

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

This is a helper system which

  1. automatically provides all important dnn-parameters (module ID, security token, etc.) to angular
  2. adds an Http Interceptor for the HttpClient which automatically applies these parameters to all requests
  3. prevents the enter-key from causing DNN form submits (you can override this)

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

How to get this package

It's published on npm, so the most common way is to get it using npm install:

  • npm install -d @2sic.com/dnn-sxc-angular

How To Use

Setup

The following instructions help you get started, but it's best to also look at a real app using this - like the Angular Directory App.

Make sure your application uses the Http Interceptor by adding the important providers to app.module.ts, so you'll need to add:

import { DnnSxcModule } from '@2sic.com/dnn-sxc-angular'

and this module to the @NgModule - here's an example from the Angular Directory App, yours will look a bit different.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DnnSxcModule,     // DnnSxc module ensures all connectors are available
    HttpClientModule, // important - this changed in Angular 4.3
    BrowserModule,    // the following are just examples
    FormsModule,
    DirectoryModule,
    RouterModule.forRoot(appRoutes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, make sure initializations happen, by changing your app.component.ts from

export class AppComponent {...}

to

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

You can compare it with the example from the Angular Directory App. That's it!

Using WebAPIs inside DNN

This will now work automatically, because all headers etc. are now automatically added by the system.

Using 2sxc Content-Items, Queries and APIs

This package contains a Data object, which provides 3 observable streams

  • content$
  • query$
  • api$

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

Getting ModuleId, TabId, etc. and the sxc Instance

There is a Context object which provides these properties as streams (observables). Just inject Context and access it from there. Note that you almost never need this, as the HttpClient is already configured and ready to go, including the headers it needs.

  • moduleId$
  • tabId$
  • sxc$
  • etc. (there are about 3 more...)

Internal Notes

Todo

  • create & test simple app-api access
  • enhance the content-manager to provide write commands (ATM read-only)

FAQs

Package last updated on 30 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc