X
dnn.blog.
Back

DNN module development with AngularJS (Part 3)

The view control

In the last blog we finished the service layer. It's time now to start our UI! Let us add a new WebuserControl View.ascx to the root folder of our project:

View control

Code Behind

After adding the control, we have to change some things in the codebehind file:

Original:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Angularmodule
{
    public partial class View : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

The first thing to do is changing the base class of our WebUserControl to a DNN module base class (needs using DotNetNuke.Entities.Modules also):

public partial class View : PortalModuleBase

In the Page_Load event, we insert some code to include the DNN antiforgery and ajax support (needs using DotNetNuke.Services.Exceptions also):

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        DotNetNuke.Framework.ServicesFramework.Instance.RequestAjaxScriptSupport();
        DotNetNuke.Framework.ServicesFramework.Instance.RequestAjaxAntiForgerySupport();
    }
    catch (Exception exc) //Module failed to load
    {
        Exceptions.ProcessModuleLoadException(this, exc);
    }
}

Normally this is all you need in the codebehind file. But to keep some things simple later we add some more properties to this file helping us with localization, settings and others:

Users

We need a list of all users with username and userid to interactively assign an item to an user. (This could also be done with an WebApi call. But it is easier to include this lookup list data at page generation time so we do not have to do an extra ajax roundtrip for this). The user list is generated as json array string

protected string Users
{
    get
    {
        var users = UserController.GetUsers(PortalId).Cast<UserInfo>()
            .Select(u => new { text = u.Username, id = u.UserID });
        return ClientAPI.GetSafeJSString(JsonConvert.SerializeObject(users));
    }
}

additional usings to DotNetNuke.Entities.Users, DotNetNuke.UI.Utilities and Newtonsoft.Json are needed

Resources

To be able to use static content localization, we use somethings similar. To hold localized strings for our application we make use of the .NET resource files. Add a special folder App_LocalResources to your project and inside this folder add a new RESX file with the same name as your UserControl: View.ascx.resx. Additional languages are simply added by View.ascx.de-DE.resx etc. In the resx file(s) you can enter a key and the corresponding localized string for every language you want to support. Please make use of the standard DNN syntax for the keys (e.g. cmdSave.Text for the text property of a commandbutton or EmptyField.Error for an error Message). Unfortunately we need an extra using to System.Resources from the System.Windows.Forms reference here. Hope that in later versions of DNN this is not needed because something similar is implemented in the core...

protected string Resources
{
    get
    {
        using (var rsxr = new ResXResourceReader(MapPath(LocalResourceFile + ".ascx.resx")))
        {
            var res = rsxr.OfType<DictionaryEntry>()
                .ToDictionary(
                    entry => entry.Key.ToString().Replace(".", "_"),
                    entry => LocalizeString(entry.Key.ToString()));

            return ClientAPI.GetSafeJSString(JsonConvert.SerializeObject(res));
        }

    }
}
ModuleSettings

If we need informations of the module settings it is very handy to have them also onboard:

protected string ModuleSettings
{
    get
    {
        return ClientAPI.GetSafeJSString(JsonConvert.SerializeObject(Settings));
    }
}
Editable

If someone is logged in who has edit rights to the module and when the module is in EditMode we want to show some additional UI elements:

protected bool Editable
{
    get { return IsEditable && EditMode; }
}

needs additional usings to DotNetNuke.Security and DotNetNuke.Security.Permissions

The View

Including Javascript and CSS files

Time to add our references to the angular libs and other needed javascript and css stuff. As mentioned in Part 1 of this blog series, we do not include the needed libs directly in our module. Instead we only reference the installed libraries in DNN:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="Angularmodule.View" %>
<%@ Register TagPrefix="dnn" TagName="JavaScriptLibraryInclude" Src="~/admin/Skins/JavaScriptLibraryInclude.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:JavaScriptLibraryInclude runat="server" Name="AngularJS" />
<dnn:JavaScriptLibraryInclude runat="server" Name="angular-route" />
<dnn:JavaScriptLibraryInclude runat="server" Name="angular-ng-progress" />
<dnn:DnnCssInclude runat="server" FilePath="~/Resources/libraries/angular-ng-progress/01_00_07/ngProgress.min.css" />
<dnn:JavaScriptLibraryInclude runat="server" Name="angular-ui-sortable" />
<dnn:JavaScriptLibraryInclude runat="server" Name="angular-ng-dialog" />
<dnn:DnnCssInclude runat="server" FilePath="~/Resources/libraries/angular-ng-dialog/00_05_01/ngDialog.min.css" />
<dnn:DnnCssInclude runat="server" FilePath="~/Resources/libraries/angular-ng-dialog/00_05_01/ngDialog-theme-default.min.css" />

Unfortunately there is nothing similar for CSS like for Javascript files, so we need to reference the css files with their installed path instead of only using the library name even if the css files are included in the library package.

If you do not want to build the appropriate Javascript packages by yourself (see Part 1 of this blog series) you can download the needed Angular Libraries InstallPackage from here!

The HTML

The HTML part is very short. The div with the attribute ng-app is the place where all the magic happens later. Important is the fact that the outer div has a unique id (we use the moduleID) so that we can bootstrap Angular later with this ID. In a normal Angular App outside of DNN this is not needed. But in an environment where two or more instances of the same module could reside on the same page this is very important to keep the data apart!

<div id="itemApp<%=ModuleId%>" class="itemApp">
    <div ng-view>Loading...</div>
</div>
The Bootstrapping script

When the loading of the page is ready, the Angular app will be initialized. Because we need to send an Antiforgery token together with TabId and ModuleId in the header of each WebApi request (remember the [ValidateAntiForgeryToken] of your WebApi methods?) we preconfigure the Angular $httpProvider with these DNN specific headers.

After initialization we add the properties from our codebehind file (View.ascx.cs) to the app and bootstrap angular on the outer div of our html part.

<script>
    angular.element(document).ready(function () {

        function init(appName, moduleId, apiPath) {
            var sf = $.ServicesFramework(moduleId);
            var localAppName = appName + moduleId;
            var application = angular.module(localAppName, [appName])
                .constant("serviceRoot", sf.getServiceRoot(apiPath))
                .config(function($httpProvider) {
                    var httpHeaders = { "ModuleId": sf.getModuleId(), "TabId": sf.getTabId(), "RequestVerificationToken": sf.getAntiForgeryValue() };
                    angular.extend($httpProvider.defaults.headers.common, httpHeaders);
                });
            return application;
        };

        var app = init("itemApp", <%=ModuleId%>, "Angularmodule");
        app.constant("userlist", "<%=Users%>");
        app.constant("resources", "<%=Resources%>");
        app.constant("editable", "<%=Editable%>");
        app.constant("moduleId", "<%=ModuleId%>");
        app.constant("settings", "<%=ModuleSettings%>");
        var moduleContainer = document.getElementById("itemApp<%=ModuleId%>");
        angular.bootstrap(moduleContainer, [app.name]);
    });
</script>

Lets run !

There are only few steps before we can run our angular app.

The first thing: Build your application now!

At the moment our module is located in the DNN installation files but DNN does not know about it. So we need to register our module first. Login as a superuser and navigate to Host-Extensions. CLick the last button on top Create new Module. Fill out the form you see in the image and click OK:

Registering the module in DNN

Now the module is registered in the system and you can add it to a page. (I think you know how this works. If not: see some basic videos on youtube about DNN!)

Normally the module should look like this in the page:

Loading...

as we see, nothing happens! When we take a look in the browser developer tools we see an error:

Error in developer console

Clicking on the error opens an error page in the browser:

Errorpage from Angular

This one does not help because its somewhere in Angular. We first have to click us through by clicking the blue link 3 or 4 times to get to the real error:

The real error

OK: module 'itemApp' is not available. Yeah thats right. We haven't created a Javascript Angular App yet. But that is something for the next part of my blog series!

Back
Total: 54 Comment(s)
Buy dissertations online
Absolutely unique and fine piece of information. I've never spent that much time reading before but this is really awesome.
Wednesday, June 6, 2018 · reply ·
windows live support number
Nice post, all issue related with your computer Antivirus, mail and security. We provide online solution. Call us toll free windows live support number +1-877-2498558. For more information visit here:- https://www.montechsupport.com/windows-live-support/">windows live support,
Tuesday, June 12, 2018 · reply ·
JaniceLewis
Games are our best https://www.apkcoach.win/ companion for leisure hours ,in fact, some games are so addictive that we find spare hours out of our busy schedule just to play them
Thursday, June 14, 2018 · reply ·
Infertility Treatment
Thank you so much for giving such valuable information. Now I got exactly that I want.
Wednesday, June 20, 2018 · reply ·
atari breakout game
The article you have shared here very awesome. I really like and appreciated your work. I read deeply your article, the points you have mentioned in this article are useful http://ataribreakout.org
Wednesday, June 27, 2018 · reply ·
appleworldsupport
Nice post, all issue related with your mobile Antivirus, mail and security. We provide online troubleshooting solution. Call us at toll free apple support number +1-877-2498558. For more information visit here:- http://www.appleworldsupport.com">apple support number, http://www.appleworldsupport.com">apple technical support, http://www.appleworldsupport.com/itunes.html">itunes technical support, http://www.appleworldsupport.com/itunes.html">itunes technical support, http://www.appleworldsupport.com/iphone.html">iphone technical support, http://www.appleworldsupport.com/iphone.html">iphone support number, http://www.appleworldsupport.com/ipad.html">ipad support number, http://www.appleworldsupport.com/ipad.html">ipad technical support, http://www.appleworldsupport.com/macbook.html">macbook support number, http://www.appleworldsupport.com/macbook.html">macbook technical support, http://www.appleworldsupport.com/mac.html">mac support number, http://www.appleworldsupport.com/mac.html">mac technical support,
Wednesday, June 27, 2018 · reply ·
SPSS Online help
Great Info! I Recently Came Across Your Blog And Have Been Reading Along. I Thought I Would Leave My First Comment. I Don’t Know What To Say Except That I Have
Tuesday, July 3, 2018 · reply ·
SPSS Online help
Great Info! I Recently Came Across Your Blog And Have Been Reading Along. I Thought I Would Leave My First Comment. I Don’t Know What To Say Except That I Have http://www.spsshelponline.com/">SPSS Online help
Tuesday, July 3, 2018 · reply ·
Do My Law Assignments
This A Good Way To Appreciate The Teacher As They Put Their Efforts To Train Students. UK Dissertation Writers Appreciates The Teachers.
Tuesday, July 3, 2018 · reply ·
Do My Law Assignments
This A Good Way To Appreciate The Teacher As They Put Their Efforts To Train Students. UK Dissertation Writers Appreciates The Teachers. https://lawassignmentshelp.com
Tuesday, July 3, 2018 · reply ·
Roadrunner Email Setup
This article is very informative. If you are troubling in your roadrunner email setup, than you can directly contact us on our toll free helpline number +1-888-338-6033. Our technical team is always available to help you.
Tuesday, July 3, 2018 · reply ·
 Roadrunner Email Setup
This article is very informative. If you are troubling in your roadrunner email setup, than you can directly contact us on our toll free helpline number +1-888-338-6033. Our technical team is always available to help you. https://www.roadrunnermailsupport.com/roadrunner-email-settings/
Tuesday, July 3, 2018 · reply ·
Ronald Harris
My Nes Emulator has been really successful in the development and peacefully passing all the tests and in the development time of the latest version been put up to testing. https://mynes.org/
Thursday, July 5, 2018 · reply ·
shawnjasper
i read a lot of stuff and i found that the way of writing to clearifing that exactly want to say was very good so i am impressed and ilike to come again in future.. https://www.theacademicpapers.co.uk/cheap-dissertation-writing-service.php
Monday, July 9, 2018 · reply ·
 roadrunner technical support number
Thanks for the post, If anyone needs help to resolve technical issues of roadrunner email, then contact our roadrunner technical support number +1-888-338-6033.
Wednesday, July 11, 2018 · reply ·
Economics Homework Help Expert
I Appreciate Your Efforts In Preparing This Post. I Really Like Your Blog Articles.
Thursday, July 12, 2018 · reply ·
nikil
Taco Cabana is always ready to bring joy to your taste buds and to provide you with the mouth-watering journey of spicy and crunchy platters. You can visit their any outlet and will find the food on Taco Cabana Menu extremely satisfying. Taco Cabana stores are painted with the signature pink colour of the food chain https://www.foodmenuwithprices.com/taco-cabana-menu-prices/
Saturday, July 14, 2018 · reply ·
huji
iTunes Gift Cards by mail. Apple has specially crafted their iTunes Gift Card so that you can now enter your text manually. With iTunes Gift card, you can purchase books, music, TV shows, and other items from the Apple Store at reasonable and discounted prices. Visit: https://www.findgiftcardbalance.com/itunes-gift-card-balance-check/
Saturday, July 14, 2018 · reply ·
Kaun Hai Drama
bookmarked!!, I love your site! http://kaunhaidrama.com">Kaun Hai Drama
Monday, July 23, 2018 · reply ·
katelyn
I Appreciate Your Efforts In Preparing This Post http://www.horsyland.com
Wednesday, July 25, 2018 · reply ·
net worth
It looked fascinating and I chose to investigate each substance and I read yours. My compliment about this blog is exceptionally positive. I visit this blog first time and inspire by this good stuff work https://www.idolnetworth.com/
Thursday, July 26, 2018 · reply ·
Mickey Mcginnes
Great article. It is very informative. You sound very knowledgeable in your profession...sentence structure need a little work. I'm saying this to help you, because I think the article is a great. https://www.celebsleatherjackets.com/579/bill-goldberg-wwe-harley-jacket.html
Monday, August 6, 2018 · reply ·
Distressed Cafe Racer Jacket
The brand Maybelline. There is one that you shake up and its called Dream Nude Airfoam and it feels like.
Thursday, August 9, 2018 · reply ·
www.website.com
Saturday, August 11, 2018 · reply ·
192.168.l.l
I thank you for the information! I was looking for and could not find. You helped me!
Friday, August 17, 2018 · reply ·
panistefani
https://19216811.software/ I would like to read about it anymore. Prompt, what literature to study?
Friday, August 17, 2018 · reply ·
Tutuapp
Nice Article Very Helpful ! Thanks for sharing ! Also check https://tutuappapkdownload.com/
Friday, August 17, 2018 · reply ·
phamyen
This article is really fantastic and thanks for sharing the valuable post. http://run3page.com
Tuesday, August 28, 2018 · reply ·
Jack
Thank you for sharing this information! https://treesurgeonbedford.co.uk
Tuesday, August 28, 2018 · reply ·
Momina Mustehsan
I’m Really Impressed With Your Article, Such Great & Usefull Knowledge You Mentioned Here https://mominamustehsans.com
Wednesday, August 29, 2018 · reply ·
Physics Homework Help
This Site And The Resources You Provide Is Really Nice Keep It Up. http://physicsmax.com
Wednesday, August 29, 2018 · reply ·
C Homework Help
My friend recommended this blog and he was totally right keep up the good work https://www.chelponline.com
Tuesday, September 11, 2018 · reply ·
Computer Science Assignment Help
I personally like your post; you have shared good insights and experiences. Keep it up. https://computerscienceassignmentshelp.xyz
Wednesday, September 12, 2018 · reply ·
www.office.com/setup
I am thankful for the article post.Really looking forward to read more. Great.
Friday, September 14, 2018 · reply ·
www.office.com/setup
I am thankful for the article post.Really looking forward to read more. Great. https://officecomsetup-office.org
Friday, September 14, 2018 · reply ·
office.com/setup
Office 365 available for both Windows computer or Mac computer.
Tuesday, September 18, 2018 · reply ·
office.com/setup
Office 365 available for both Windows computer or Mac computer. http://www-officecomsetup.com/
Tuesday, September 18, 2018 · reply ·
Painted Elephant
There's a massive distinction between a boring, low-conversion internet site and one with a view to construct your commercial enterprise. Learn a way to build it the proper manner. If you have decided to begin an internet commercial enterprise, or an internet thing for a bricks and mortar corporation, then you definitely are probable considering beginning a website. The method may be a chunk daunting, but here are some easy steps to help you create a internet site so that it will construct your commercial enterprise.
Wednesday, September 19, 2018 · reply ·
John
Thank you for sharing this article! https://carpetcleaningmiddlesbrough.co.uk/
Monday, October 1, 2018 · reply ·
new josb
new jobs here get jobs fast
Tuesday, October 2, 2018 · reply ·
www.office.com/setup
I am having a look ahead in your subsequent submit, I will try to get the cling of it! You really make it appear really easy together with your presentation however I in finding this matter to be really one thing which I feel I might by no means understand. It kind of feels too complicated and very vast for me.
Thursday, October 11, 2018 · reply ·
www.office.com/setup
I am having a look ahead in your subsequent submit, I will try to get the cling of it! You really make it appear really easy together with your presentation however I in finding this matter to be really one thing which I feel I might by no means understand. It kind of feels too complicated and very vast for me. http://www.officee-setup-install.com/">www.office.com/setup https://www.install-office-setup.com/">www.office.com/setup
Thursday, October 11, 2018 · reply ·
www.office.com/setup
I am having a look ahead in your subsequent submit, I will try to get the cling of it! You really make it appear really easy together with your presentation however I in finding this matter to be really one thing which I feel I might by no means understand. It kind of feels too complicated and very vast for me. http://www.officee-setup-install.com https://www.install-office-setup.com
Thursday, October 11, 2018 · reply ·
fanciko
Very Interesting and wonderful information keep sharing this post kindly check http://getwindowssupport.blogspot.com/
Friday, October 12, 2018 · reply ·
Jack
Thank you for sharing this article https://carpetcleaningmiddlesbrough.co.uk
Sunday, October 14, 2018 · reply ·

about.me.

Torsten WeggenMy name is Torsten Weggen and I am CEO of indisoftware GmbH in Hanover, Germany. I'm into DNN since 2008. Before this, I did a lot of desktop stuff mainly coded with Visual Foxpro (see http://www.auktionsbuddy.de). 

I'm programmer, husband, father + born in 1965.

Please feel free to contact me if you have questions.

Latest Posts

DNN module development with Angular 2+ (Part 7)
6/10/2018 1:43 PM | Torsten Weggen
DNN module development with AngularJS (Part 6)
12/16/2016 7:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 5)
12/16/2016 6:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 4)
12/16/2016 5:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 3)
12/16/2016 4:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 2)
12/16/2016 3:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 1)
12/15/2016 7:19 AM | Torsten Weggen
Blogging in DNN with Markdown Monster by Rick Strahl
11/27/2016 1:14 PM | Torsten Weggen
Creating a global token engine
11/18/2016 10:25 AM | Torsten Weggen
DnnImagehandler - Hot or not ?
2/21/2015 11:52 PM | Torsten Weggen

My Twitter

Torsten Weggen 10/11/2018

Evernote or OneDrive user and love #markdown #markdownmonster ? Take a look at Joplin! https://t.co/4bzkiD6CHn

Torsten Weggen 9/14/2018

@booler @kristofclaes @RickStrahl until a phone is not able to be a complete replacement for my laptop (with a dock) thats ridiculous

Torsten Weggen 9/12/2018

Just finished the course "Angular RxJs Reactive Programming & FREE Ebook" https://t.co/2H0Rk3NuRB via @udemy