This is a complete template DNN module .ascx for DNN 7.x and Angular 6. Useful for legacy DNN.
Note: if you are using DNN 9.x you can use specific template.
To Develop Angular 6 project with DNN you need 2 different project:
-
Angular CLI project (template-dnn-7.x-for-angular-6-CLI)
<link>
: https://github.com/OPSI-srl/Angular-6---CLI-Template-for-DNN-7.x-8.x-9.x. -
DNN module that host your angular (this project)
This is a best practice for your developer frontend, because it is independent from DNN.
Frontend developer should love it.
- How to develop your Angular CLI (Tested for Angular CLI: 6.1.2) and deploy inside DNN 7.x.
- How to pass information from DNN to Angular
- Angular 6 is too fast to load information than DNN. You need to make all information available to DNN in the correct format.
- How to use DNN webapi and angular
<base href="<%= Request.RawUrl%>">
<script>
var serviceFramework = $.ServicesFramework(parseInt('<%=ModuleId %>'));
<%--
2 -> Rename AngularTEMPLATE inside window["AngularTEMPLATE"], with same name in dnncontext.service.ts
--%>
window["AngularTEMPLATE"] =
{
"Resources": {
"Example01": "lorem ipsum 01",
"Example02": "lorem ipsum 02",
},
"Settings": {
"AllowIndex": "True"
},
"routingWebAPI": "/DesktopModules/Rainbow_Staging/API/",
"IsEditable": <%= Editable.ToString().ToLower()%>,
"EditMode": <%= EditMode.ToString().ToLower() %>,
"IsAdmin": false,
"ModuleId": <%=ModuleId%>,
"PortalId": <%= PortalId %>,
"UserId": <%= UserId %>,
"HomeDirectory": "Portals/<%= PortalId %>/",
"ModuleDirectory": "<%= ControlPath %>",
"RawUrl": "<%= Request.RawUrl%>",
"PortalLanguages": ["<%= PortalSettings.CultureCode %>"],
"CurrentLanguage": "it-IT",
"Users": [],
"TabId": <%= TabId %>,
"locale": $("html").attr("lang"),
}
</script>
Example:
- "routingWebAPI": "/DesktopModules/MyDemo/API/",
- "IsEditable": false,
- "EditMode": true,
- "IsAdmin": false,
- "ModuleId": 13914,
- "PortalId": 1,
- "UserId": 5,
- "HomeDirectory": "Portals/1/",
- "ModuleDirectory": "/DesktopModules/DemoTemplate/",
- "RawUrl": "/MyDemoTemplate/tabid/9424/language/it-IT/Default.aspx/",
- "PortalLanguages": ["it-IT"],
- "CurrentLanguage": "it-IT",
- "Users": [],
- "TabId": 9424,
- "locale": $("html").attr("lang"),
You should use DNN webapi, so you can use [DnnAuthorize] and [ValidateAntiForgeryToken]
<link>
: https://talkdotnet.wordpress.com/tag/dnnauthorize/
<link>
: http://www.dnnsoftware.com/community-blog/cid/144400/webapi-tips
You should pass 3 variable via http header to DNN. The solution is to intercept http from Angular (this is explain in Angular cli project). Now you should just know that you need these variables:
- moduleId:
- tabId:
- antiForgeryToken: is created by $.ServicesFramework
<link>
: (http://www.dnnsoftware.com/wiki/services-framework-webapi)
Version control for now is indipendent from DNN, next relese I will take dnn version.
<script src="<%= ControlPath %>dist/runtime.js<%= version %>"></script>
<script src="<%= ControlPath %>dist/polyfills.js<%= version %>"></script>
<script src="<%= ControlPath %>dist/styles.js<%= version %>"></script>
<script src="<%= ControlPath %>dist/vendor.js<%= version %>"></script>
<script src="<%= ControlPath %>dist/main.js<%= version %>"></script>
From codebehind of your .ascx you can pass whatever you want to angular.
[I need to test it, this part is from template Torsten Weggen template - bitboxx.com] Building your solution with visual studio on Release mode automaticaly visual studio make DNN package zip file with all informations.
- Create a Folder (example: "Demo-Angular6") inside your DNN /desktopmodule/Demo-Angular6/
- Clone this project from git inside /desktopmodule/Demo-Angular6/ (all files should be in root folder)
- Open TemplateDNN7NG6.sln with visual studio 2015
- Re-naming the project/solution
- Change Assembly name and Namespace
- Maybe change guid project (I need to check)
- Inside file view.ascx.cs change namespace
- Inside file view.ascx change Inherits <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="DemoAngular6.View" %>
- [Skip for now] Change ZipFileNamePrefix and DesktopFolderName for correct building name. File \Installation\Project.targets line 38 and 39.
- Build your solution and check any error.
- Check in bin folder your dll project (Demo-Angular6.dll)
- It's time to register Module inside your DNN
- Login as host.
- Go to host->Estension->Create new module
- select control module
- select module file
- Select resource: view.ascx
- insert module name: Demo Angular 6
- Add new page
- Add your module inside page
- Publish/copy your angular files inside dist folder (/desktopmodule/Demo-Angular6/dist/)
- Open View.ascx file
- change selector "app-root-md" with the same on your Angular module (app.component.ts)
<app-root>
<p>Loading...</p>
</app-root>
- change "AngularTEMPLATE"
window["AngularTEMPLATE"] =
{
- Loading Multilanguage resources [Next release]
- Building DNN package via visual studio on Release build. (I need to tested, sholud work this tempalte is from Torsten Weggen - bitboxx)
This project is just an avolution or code encapsulation made from these important resources by Torsten Weggen and Danile Mettler:
<link>
: http://www.bitboxx.net/Blog/Post/525/DNN-module-development-with-Angular-2-Part-7#/
<link>
: https://2sxc.org/en/blog/post/how-to-correctly-connect-dnn-to-angular-4-5-using-reactive-javascript