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 .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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



Read more posts by Daniel Mettler

Comments

kurt wilbies
Awesome, really great.

But could you please explain, in detail, and preferably with a non-2sxc module OR with useful sample code, how to correctly set Http Request Header, in Angular 4, using RequestOptions, in DNN modules.

I trully love 2sxc.
kurt wilbies Monday, May 8, 2017 9:06 AM (link)
Daniel Mettler
@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 Mettler Wednesday, May 24, 2017 6:14 AM (link)

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (28)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (29)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (146)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (2)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (272)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (53)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (39)
Will Strohl (164)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out