Code Monkey home page Code Monkey logo

dnn-sxc-angular's Introduction

dnn-sxc-angular has moved

This was the old dnn-sxc-angular project.

We have now moved it to 2sxc.ui

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

This is a connector for angular 8+ (git | web) for developers using

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

This connector does

  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)

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

Setup & Discover Dnn-Sxc-Angular

It's published on npm, so the most common way is to get it using npm with npm install "@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 contains a Data 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.

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

  • enhance the content-manager to provide write commands (ATM read-only)

dnn-sxc-angular's People

Contributors

christophbuehler avatar ijungleboy avatar raphael-m avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

d-trattner jaxuk

dnn-sxc-angular's Issues

Error serving app on localhost

Hi,

I wanted to give this a try and ran into the following error:

ERROR in node_modules/@2sic.com/dnn-sxc-angular/dist/context/context.service.d.ts(22,32): error TS2304: Cannot find name 'SxcController'.

Do we need to have the 2Sxc App/Content module installed as well?

Thanks
Mark

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.