DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact [email protected].

May the 4th Angular be with you: 2sxc 9.0 with Angular 4

2sxc 9 is out and it's bringing the future to DNN. The foundation is now based on EF Core, new UIs use Angular 4, a Dutch language pack was added and way more. In this post I would like to tell you more about the Angular 4 integration.

2sxc is a Material Girl

The first thing you'll notice with 2sxc 9 is the new look, based on the material design paradigm. Here's a quick look at the new In-Page UI with FABs (Floating Action Buttons):

2sxc and Angular 4

We're fully commited to modern JS development stacks like React and Angular. For consistency, our drug of choice for 2sxc UIs is Angular - now Angular 4. It's impossible to refactor an application like 2sxc in any reasonable time, so our first focus is the end-user experience - and the first part we're recreating is the Quick-Dialog-Experience.

As you can see, it's almost the same as before, but with important changes:

It's not inline any more, so the preview of the page perfect

There is now only one quick-dialogs on screen, making it easier to use

The quick-dialog floats in from above allowing you to scroll and see your content - this is also in anticipation of better mobile editing

Here's another view, with App-configuration buttons:

We're not done yet :) - this release 9.0 is especially made for the International Star-Wars day, but in about a week we'll deliver a nicer tile-based selector instead of the drop down, so stay tuned.

Angular 4 Pains and Lessons Learned

A word of warning to all you Angular lovers - going to Angular 4 has a steep and rewarding learning curve. I would just like to give you a quick overview of things we ran into which took "longer than expected" - if you know what I mean :)

Typescript and new JavaScript with "let" and lambdas - things are very different here compared to the old JS-style programming

Observables instead of promises - very different way of programming, gotta get used to it

Reconfiguring $http is very different - no more $httpProvider.defaults... instead you have to "inherit" the http-class and specify it in the depedency injection...

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in
Switzerland and Liechtenstein, an 20-head web specialist with over 800
DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

@kurt thanks :)We're just perfecting the setup right now for the session at DNN-Connect :). It's actually very tricky if you want to do it right (dependency injection, automatic module-id detection, etc.) but we've spent more than 2 days on this! and we have a solution :)We'll then release both demo apps as well as NPM packages for developers starting from scratch

@Daniel, did you ever release a npm package for the developers. I have a couple angular 4 apps out in the wild but had to "force" them to work in DNN. I would love to see how you guys solved some of the same issues.

thanks Daniel, I look forward to it. I see that for angular4+ you have extended the existing http provider to account for the needed headers in a DNN web api request. I'm still fighting with the best way to capture the moduleId, services framework etc in the module html and pass it into the angular app. I have a method that works but I was curious as to what you came up with. I use a html and not ascx file for the main view of my module. I extract the dnn wep api process into its own service. This allows me to build an app that would be easy to move into another environment because all I would have to do is change my rest end points. As a result, I have no dependency on webforms and I can look forward to asp.net core and DNN together... like you recent blog post suggests. The only other tightly coupled part of the app to DNN is the security roles and user accounts. But that is another hill to climb.

@Jordan: we're a bit late - sorry, will take another few days. When we wanted to publish our demo app we realized that it still has a few bugs. Since our work is usually used as templates for other work, we must be sure that it's really good.

BTW: our solution is really neat - we're injecting everything as various observables upon which httpclient must rely, which lets the application "boot" without a final state and wait for the observables to kick in...

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.