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: 33 Comment(s)
custom essay writing service
This post has many good ideas. I really liked the way you prepared this post. A writing is conventional method to verbal communication. It required a skill to express the thought clearly to the readers. https://supremeessaywritingservice.com/
Tuesday, December 12, 2017 · reply ·
janywatson
Interview on TV isn't an easy thing to do because someone doing cross questioning with you and you'll do that answer immediately without https://www.essayhelperuk.co.uk any hesitation. If someone going out from this process so they got a good confidence later.
Saturday, December 16, 2017 · reply ·
hillarydavidson
I get the chance to see all the more fascinating stuff from you in future. Incredible post keeps up posting https://www.dissertationwritinguk.co.uk such great information provides best papers for their customers.
Saturday, December 16, 2017 · reply ·
kathybrunt
Inspiring room of the day for the more decoration and designs always,keep making with this informative colortheory site. All are improving https://www.assignmentcrux.co.uk their rooms and better thoughts always,keep making with us.
Monday, December 18, 2017 · reply ·
Jack kevin
With a specific end goal to enlist JavaScript and css record we have included two new tokens. These tokens are somewhat unique in relation to the current Tokens. If you want help in assignment visit our website http://www.assignmentbay.co.uk
Wednesday, February 7, 2018 · reply ·
Set Up Business in Dubai
https://www.uaefreezone.xyz/ I loved the way you discuss the topic great work thanks for the share.
Monday, February 12, 2018 · reply ·
Yousuf Media
https://www.yousufmedia.com/ Social Media Agency I'm getting excited about this kind of beneficial information of your stuff in the future
Monday, February 12, 2018 · reply ·
joeym.silva
https://www.uaefreezone.xyz/ Set Up Business in Dubai They are not able to finish the writing assignments on time. For some students, writing any writing assignments is able to waste their time
Monday, February 12, 2018 · reply ·
Medical Science Writing Service
Really i appreciate the effort you made to share the knowledge. This is really a great stuff for sharing. Keep it up . Thanks for sharing.
Monday, February 26, 2018 · reply ·
victoriakeating
An understatement very good. This book I would have at least 10 X faster on the Drupal 8 development all in Drupal 8 to sort through the documents is allowed to accelerate. My book is in Drupal a huge train Empire. If you https://www.dissertationhub.co.uk/ need to create 8 version and you to do this well, how fast you need to get on the fast track to information, this is the book for you.
Tuesday, March 6, 2018 · reply ·
cara mengobati bisul
Thursday, March 8, 2018 · reply ·
Do My Psychology Projects
I'm getting excited about this kind of beneficial information of your stuff in the future https://www.psychologyassignments.com/
Thursday, March 8, 2018 · reply ·
lijirahi
Case Study Solutions They are not able to finish the writing assignments on time. For some students, writing any writing assignments is able to waste their time https://caseassistant.xyz
Thursday, March 8, 2018 · reply ·
Alfredo C. Burgess
Such a nice post, keep up the fantastic work https://www.accountingmanagerial.com/trial-balance-assignment-help-21087 This site and the resources you provide is really nice keep it up.
Friday, March 16, 2018 · reply ·
Albert Ambrose
Hi buddy, your blog' s design is simple and clean and i like it. Your blog posts about Online Dissertation Help are superb. https://asphelponline.com/formatting-text-14255 Please keep them coming. Greets!!
Friday, March 16, 2018 · reply ·
Malpractice Assignment Help
They are not able to finish the writing assignments on time. For some students, writing any writing assignments is able to waste their time https://assignmentassistant.xyz/malpractice-22017
Friday, March 16, 2018 · reply ·
Malpractice Assignment Help
This is really a great stuff for sharing. Thanks for sharing. https://assignmentassistant.xyz/malpractice-22017
Friday, March 16, 2018 · reply ·
Cottage Cheese
Cool you write, the information is very good and interesting, I'll give you a link to my site. http://www.naturalfoodseries.com/9-benefits-cottage-cheese/
Saturday, March 24, 2018 · reply ·
Benefits of Broccoli
Cool you write, the information is very good and interesting, I'll give you a link to my site. http://www.naturalfoodseries.com/13-incredible-benefits-broccoli
Saturday, March 24, 2018 · reply ·
Parsley
I've been looking for info on this topic for a while. I'm happy this one is so great. Keep up the excellent work http://www.naturalfoodseries.com/11-health-benefits-parsley
Saturday, March 24, 2018 · reply ·
Benefits of Cilantro
This is a fabulous post I seen because of offer it. It is really what I expected to see trust in future you will continue in sharing such a mind boggling post http://www.naturalfoodseries.com/13-benefits-cilantro-coriander/
Saturday, March 24, 2018 · reply ·
Benefits of Avocado
very interesting post.this is my first time visit here.i found so many interesting stuff in your blog especially its discussion..thanks for the post! https://www.naturalfoodseries.com/15-benefits-avocado
Saturday, March 24, 2018 · reply ·
Manganese
This is truly an practical and pleasant information for all. Thanks for sharing this to us and more power https://www.naturalfoodseries.com/11-benefits-manganese
Saturday, March 24, 2018 · reply ·
Chamomile Tea
Great tips and very easy to understand. This will definitely be very useful for me when I get a chance to start my blog. http://www.naturalfoodseries.com/11-chamomile-tea-benefits
Sunday, March 25, 2018 · reply ·
Benefits of Potatoes
Thanks a lot for one’s intriguing write-up. It’s actually exceptional. Searching ahead for this sort of revisions. http://www.naturalfoodseries.com/11-benefits-potatoes/
Sunday, March 25, 2018 · reply ·
essentials of human anatomy and physiology 11th ed
Truly, this article is really one of the very best in the history of articles. I am a antique ’Article’ collector and I sometimes read some new articles if I find them interesting. And I found this one pretty fascinating and it should go into my collection. Very good work! https://www.testbankcampus.com/test-bank-for-essentials-of-human-anatomy-and-physiology-11th-edition-by-marieb.html
Tuesday, March 27, 2018 · reply ·
European Law homework help
Things are very open and intensely clear explanation of issues. was truly information. Your website is very beneficial. European Law homework help https://lawassignmentshelp.com/european-law-assignment-help-19565
Wednesday, April 4, 2018 · reply ·
Jerry kane
Reports And File Maintenance MYOB Project Help Its amazing way for the post. Thanx for the great ideas keep it up. https://myobassignments.xyz/reports-and-file-maintenance-assignment-help-18349
Wednesday, April 4, 2018 · reply ·
Wilson Larrie
I appreciate this work amazing post for us I like it. µVision IDE Project Help https://www.psychologyassignments.com/%C2%B5vision-ide-assignment-help-19916
Wednesday, April 4, 2018 · reply ·
joeym.silva
I am so happy to read this. Abu Dhabi Airport Free Zone business registration This is the kind of manual that needs to be given and not the random misinformation that's at the other blogs. https://uaefreezone.xyz/abu-dhabi-airport-free-zone-20491
Wednesday, April 4, 2018 · reply ·
lijirahi
I appreciate this work amazing post for us I like it. CaseAssistant.xyz https://caseassistant.xyz
Wednesday, April 4, 2018 · reply ·
charlieputh
4Ps of Marketing Homework Help The leading assignment help UK firm offers state of the art services to its clients with a promise of delivering all the required work well within the deadline. https://www.marketingassignmentz.com/4ps-of-marketing-assignment-help-19510 This is really great work. Thank you for sharing such a good and useful information here in the blog for students.
Wednesday, April 4, 2018 · reply ·
emmaferri
We're not by any means going to utilize this field. Clear the check box on the correct that says "Make registry for https://www.assignmenthub.co.uk/ Solution" and the name of the arrangement textbox is turned gray out
Wednesday, April 18, 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 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
Rapid Module Development Part 2 - The multilanguage thing…
4/7/2014 7:32 PM | Torsten Weggen

My Twitter

Torsten Weggen 3/1/2018

Yeah! Booked my journey to #DNNConnect2018 ! Will be great to meet old friends again and have some Guiness together! #DNNCMS rulez !

Torsten Weggen 2/17/2018

Yess! My first commercial hybrid mobile App build with #ionic + #Angular and connected with #DNNCMS is online now https://t.co/61nDXYXu14

Torsten Weggen 1/13/2018

@TChailland Hi Thomas - no problem! Have a nice vacation and let me know when you're back.