What about routing for SPA in AngularJS?

Dec 1, 2015 at 10:34 PM
Looking into 2sxc for DNN and am so far impressed by what I see. One thing I didn't seem to be able to find any info on was how to create a SPA application in AngularJS that naturally would require some routing in order to work. How would one go about doing that with 2sxc? Does "normal" (ie non DNN AngularJS routing) work or does DNN mess with the URLs or similar to cause problems?

Thank you.
Dec 2, 2015 at 1:02 AM
Edited Dec 2, 2015 at 1:02 AM
Just some info, after some initial struggle I was able to get this to work i 2sxc in a way that is very similar to "general AngularJS" so it seems like it works fine without any special solutions. Some challenges occurred due to the AngularJS app not running on it's own but within DNN but it could be worked out (or around) quite well. Probably even better by someone more knowledgeable with 2sxc than me, didn't even know the module existed a few hours ago :)

Great work 2sxc developers, this is a really good and handy module to have to revive DNN and not have to use WebForms. Thanks.
Dec 2, 2015 at 6:35 AM
Hi

Welcome to the 2sxc community :)

Your spa sounds interesting would you mind sharing a sample app that shows how you did this

Armand
2DNN
Dec 2, 2015 at 10:49 AM
Edited Dec 2, 2015 at 11:03 AM
Sure, included below. Please note that this is dirty "trial and error" code just to test functionality created with no priority of making good code. Some parts of this code, especially URL handing, could probably be done much better using placeholders etc. Also note that it 2sxc 8 seems to load AngularJS by itself, which doesn't seem to be the case with 2sxc 7. But you need to load AngularJS Routes as it is no longer included in AngularJS. Also please note that I haven't used any special 2sxc magic like support for multiple modules/apps on same page etc.


<div ng-app="testApp" ng-controller="mainController">

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular SPA</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </div>
    </nav>
    <div id="main">

        <div ng-view></div>

    </div>


</div>

<script>

    var testApp = angular.module('testApp', ['ngRoute']);

    testApp.config(function ($routeProvider) {
        $routeProvider

            .when('/home', {
                templateUrl: 'http://dnn7.improwise.local/Portals/0/2sxc/Test/pages/home.html',
                controller: 'mainController'
            })

            .when('/about', {
                templateUrl: 'http://dnn7.improwise.local/Portals/0/2sxc/Test/pages/about.html',
                controller: 'aboutController'
            })

            .when('/contact', {
                templateUrl: 'http://dnn7.improwise.local/Portals/0/2sxc/Test/pages/contact.html',
                controller: 'contactController'
            });
    });

    testApp.controller('mainController', function ($scope) {
        // create a message to display in our view
        $scope.message = 'Home';
    });

    testApp.controller('aboutController', function ($scope) {
        $scope.message = 'About';
    });

    testApp.controller('contactController', function ($scope) {
        $scope.message = 'Contact';
    });


</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js" data-enableoptimizations="112"></script>
It anyone with more knowledge about 2sxc can show how to improve this it would be appreciated. I guess there are some built in functionality that might handle URL building better than hard coded absolute paths.
.when('/home', {
                templateUrl: 'http://dnn7.improwise.local/Portals/0/2sxc/Test/pages/home.html',
                controller: 'mainController'
            })
(Sorry for all the edits, did tidy up the code a bit to make it more readable :) )
Coordinator
Dec 2, 2015 at 11:02 AM
Just as an inspiration: here's an angular SPA which uses HTML5 pushstate and google indexes the details-pages :)

http://www.zindel-maienfeld.ch/Referenzobjekte/cat/Alle
Dec 2, 2015 at 11:10 AM
@2sicdev ah the app that you are going to do a blog about right :)?
Dec 2, 2015 at 11:24 AM
nokiko wrote:
@2sicdev ah the app that you are going to do a blog about right :)?
I'm holding my breath waiting for it! :)
Dec 2, 2015 at 12:00 PM
for the hardcoded paths you can use
@App.Path/pages/home.html
Dec 2, 2015 at 12:01 PM
@improwise

Can you export the app and upload somewhere. A working example saves copy and paste time :)
Dec 2, 2015 at 12:18 PM
nokiko wrote:
@improwise

Can you export the app and upload somewhere. A working example saves copy and paste time :)
Sorry, have already deleted it but hopefully I will have a new improved version in a not to far future.

(Will I have to answer those damn CAPTCHA everytime I write something here?)
Dec 2, 2015 at 12:19 PM
nokiko wrote:
for the hardcoded paths you can use
@App.Path/pages/home.html
Thanks, I knew there had to be a better way.