Skip to main content
Home  ›  Blog

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:

  1. It's not inline any more, so the preview of the page perfect
  2. There is now only one quick-dialogs on screen, making it easier to use
  3. 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 :)

  1. Typescript and new JavaScript with "let" and lambdas - things are very different here compared to the old JS-style programming
  2. Observables instead of promises - very different way of programming, gotta get used to it
  3. Reconfiguring $http is very different - no more $httpProvider.defaults... instead you have to "inherit" the http-class and specify it in the depedency injection...
  4. ...and that's very important, because DNN can't handle http-requests without the special, secret headers :)
  5. Modules / Components are very different - took some time to get into that
  6. Routing is special - again a learning curve
  7. The CLI, AOT and special compiles of Angular-code 
  8. Paths to script-loading is fairly tricky, because angular CLI provides a cache-breaking mechanism which we cannot use in DNN
  9. ...and more

I'll tell you way more at my Angular session at DNN-Connect 2017 - see you there! 

Love from Switzerland,
Daniel & Christoph & Luca

PS: Image courtesy to StarWars.com

PPS: Download the latest 2sxc on Github now :)


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 github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler