Skip to main content
Home  ›  Learn › Simple AngularJS in DNN with 2sxc4ng

Simple AngularJS in DNN thanks to 2sxc4ng

AngularJS is a very powerful JavaScript framework to develop Apps with. You can use it for

  1. Very simple Apps - like contact forms
  2. Multi-dialog Apps
  3. Data management Apps
  4. Galleries, image rotators etc.
  5. extremely complex things like ERPs and similar

Basically anything you can dream of in JavaScript can be done with AngularJS, and it's probably easier to do it in AngularJS than with any other JavaScript framework at the time. The information on this page are meant to help you get started with AngularJS. It's very easy from within 2sxc, because we added some helpers to automate all the difficult things for you. 

    Discover how easy AngularJS is with best practices

    This is a recorded session from DNN Connect 2015 where I showed how to use AngularJS within DNN. It includes a lot of best practices which make it much easier to get started with AngularJS. Highly recommended both for newbies as well as people who have experience with Angular or DNN - because in combination it has a few aspects which make it easy to go wrong. 

    The slogan: If you're new to AngularJS or if you're still using $scope in your code, you have to watch this. 

    Tutorial App - Feedback Form Best Practices

    The App from the video which uses REST, AngularJS and many best practices. It has lots of commented code to ensure you will be able to create your own solutions based on this. 

    > Details

    Documentation AngularJS and 2sxc 7

    The following pieces of information should help you get started. It will focus on using AngularJS within DNN, not specifically on learning AngularJS by itself. We'll cover the following topics:

    1. Scripts to include in your HTML to ensure that all components work automatically
    2. What you must do with your HTML template that the App starts automatically
    3. Some background so you understand what the auto-start will do with your App
    4. Documentation related to the 2sxc4ng system so you can use it within your App

    Scripts to include in your page

    Whenever you use AngularJS in your code you should add the following scripts to your page

    1. angularjs.min.js - contains AngularJS in minified code. If you use the copy in 2sxc you'll also benefit from un-minified debugging
    2. 2sxc.api.min.js - the 2sxc javascript controller - contains helper code which is very valuable for JSON services; it's required by 2sxc4ng
    3. 2sxc4ng.min.js - this starts your AngularJS application automatically and takes care of various important things

    Normally you will also want to specifiy loading order etc., so this is the code you should use:

    <script src="/DesktopModules/ToSIC_SexyContent/JS/2sxc.api.min.js" data-enableoptimizations="100"></script> 
<script src="/DesktopModules/ToSIC_SexyContent/Js/AngularJS/angular.min.js" data-enableoptimizations="101"></script> 
<script src="/DesktopModules/ToSIC_SexyContent/Js/AngularJS/2sxc4ng.min.js" data-enableoptimizations="110"></script>
    In addition you'll need your own code files etc.

    Simple JS code snippet 

    // SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
// now for DNN thanks to http://2sxc.org/
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

    Use sxc-app instead of ng-app to auto-load

    In AngularJS there is a system called a bootstrapper, which loads all necessary components to ensure you app will work. This is a bit like compiling - just called bootstrapping in this case. Outside of DNN most demos will tell you to use ng-app="App-Name" etc. but in DNN we had to add more features. This has many reasons but the two most important ones are that

    1. In DNN we cannot assume that your AngularJS is the only app on a page (called a SPA = Single Page Application). Instead we must assume that multiple Apps can be on the same page - sometimes even multiple occurrences of the very same App.
    2. In your app you will often need to access services from the server - usually using $http, ngResource, content, query or similar. These all need to be preconfigured properly to ensure that security is maintained.

    So there are 2 things you must do to ensure your AngularJS App is auto-loaded (bootsrapped):

    1. Use attribute sxc-app="your-app-name" - this is the marker that will auto-load the app
    2. Use one of many possible attributes to tell the bootstrapper the DNN ModuleId. Typicall this is done through id="App-[Module:ModuleId]"