New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

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.

JavaScript MVC 2.1 - Understanding a real AngularJS App-View

This is a part of my second short series about JavaScript MVC Frameworks. In this part I'll show you a real-life AngularJS App (albeit a simple one) and explain all relevant parts so that you can create your own. I've split it into multiple posts - this one explains all the angular magic in the HTML-View, while the other posts focus on the Controller, Model and more.

If you have not already read the previous parts, I would highly recommend you start there: 1.1 Why you need JS MVC, 1.2 Why Angular beats knockout, 1.3 Views and Templates and 1.4 Learn AngularJS Fundamentals in 70min.


To learn AngularJS you will have to get your hands dirty. So go ahead and install DNN with 2sxc as explained in this post  and install this demo-App containing all the code explained here.

Looking at the App Output

I will use the same JS Framework Demo-App demonstrating various Binding methods, because the included example is very simple. I've enhanced the solution to use more AngularJS features. So this is the output for the end user:

And this is what the editor sees

If you visit the demo (second module on the demo page here) todo:link or if you installed the app in your DNN, you'll see that there is a small delay before the items appear. This is because the questions are being loaded using JSON provided by 2sxc.

Discover / Understand the Code

Let's look at the code, and discover what each part does.

The HTML-View

This is what each part does

  1. Green: the AngularJS template
  2. Pink: important scripts to include
  3. Blue: initialization script

Let's dig deeper

The features you see here are

  1. id="app-demo-[Module:ModuleId]": this will give the app a unique Id. This is important because we often don't have SPAs (Single Page Applications) but more like MAPs (Multiple Applications per Page). So with this, we'll ensure that the server token engine will replace the [Module] token and create an app-demo-17 or something.
  2. data-moduleid: this is the moduleid - ready for AngularJS to use
  3. ng-cloak: this will hide the template till Angular has been loaded. Otherwise the end-user may see unsexy placeholders like {{header.Title}} and similar.
  4. ng-show: this will also hide the template - after angular was loaded, before data (items) are loaded
  5. ng-controller: this tells AngularJS which controller is to be used (it's in a separate file)
  6. {{variable}}: is the data-binding syntax for simple stuff
  7. ng-bind-html: is for data-binding raw HTML. This only works if the HTML was marked safe in the controller (read more about the $sce if you're interested)
  8. ng-repeat: is like a foreach loop
  9. ng-click: a small JS-expression which runs when clicked. Our simple showDetails = !showDetails will just switch that state back and forth from true/false whenever clicked (and this change will affect visibility of details below).
  10. ng-show: will show/hide this tag and it's contents if the value exists and doesn't return a false…
    1. ng-show="showDetails" will show the details if showDetails is true, not if it's null (initial state) or false (later state)
    2. ng-show="item.Link" will show the tag if item.Link is something
  11. Note that the [Source:Key] notation (blue underline) is resolved by DNN before AngularJS sees it. So AngulaJS doesn't get [Module:ModuleId] but 274 or something.

Features you don't see here

Many angular examples will show you an ng-app attribute. They do it, because it's easier to show you some demos that way, but it assumes that there is only 1 angular app on your page. In DNN, this will normally not be the case, because every module can be an app, and 2sxc also creates a few app of their own for the edit-UI. Since we have MAPs (Multiple Applications per Page) the ng-app doesn't work.

Initialization of the App

angular.bootstrap is the command you need to initialize one or more apps manually. This is what we use instead of ng-app because we don't have a SPA (Single Page Application) but a MAP (Multiple Applications per Page). To really understand the Initialization takes a bit more to explain - this will be part 2.4 of my blog series. In brief - this is what happens: On ready, angular will…

  1. Look for the DIV where the entire app is hosted (and in our case, also contains the templates)
  2. But before it does this, it will check if all dependencies are loaded - specified in the array ["DemoFaqAppAdvanced"]. So AngularJS will ensure the proper loading-order :)
  3. Retrieve that app and look at the ng-xxx things
  4. It will then get the controller by the name demoController as specified in ng-controller…
  5. ...and initialize that controller

That's the entire sequence. Of course, the controller will then do the init (typically retrieving JSON data or something) and then bind the viewmodel (within the $scope) to the placeholders. We'll cover the controller in the next post.

You must get your hands dirty!

Reading this won't make you smarter if you don't try it yourself. Just use 30 minutes to download the App, make some adjustments (like adding fields or changing the JS-effects). That way you'll get smart really fast!

With love from Switzerland,

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 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.



Fuji Nguyen
Good job with using color to explain block of code. Will give it a try.
Fuji Nguyen Thursday, November 20, 2014 4:20 PM (link)

Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
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 (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (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)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out