CODEWITHSUNDEEP
asp.netangularjssharepointsingle-page-application
dafyddPrys
dafyddPrys

Reputation: 918

Starting an AngularJS Single Page App on a Sharepoint app site

I am trying to create a Single Page App to sit in the Default.aspx page of my sharepoint-hosted app. So far, I cannot get the $route and ng-view to bind as I want.

So far I have tried plugging some html into the "PlaceHolderMain" placeholder of a standard Default.aspx page that you get when you open a new Sharepoint App project in Visual Studio 2013, like so:

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<div>
    <p id="message">
        <!-- The following content will be replaced with the user name when you run the app - see App.js -->
        initializing...
    </p>
</div>
<div data-ng-app="app">
    <div data-ng-controller="MainController as vm">
        <a href="/TrainingApp/training">link </a>
        <br />
        <div data-ng-view></div>
    </div>
</div>

I have set up the app and controller as follows:

App module:

(function () {
'use strict';

// create app
var app = angular.module('app', [
  // ootb angular modules
  'ngRoute',      // app route (url path) support
  'ngSanitize',   // fixes HTML issues in data binding
  'ngCookies'
]);

// startup code
app.run(['$route', function ($route) {
}]);
})();

Controller:

(function () {
'use strict';

var controllerId = 'MainController';
angular.module('app').controller(controllerId,
    ['$rootScope', '$route', MainController]);

//create controller
function MainController($rootScope, $route) {
    var vm = this;
    this.string = "hello";
}
})();

and the module routing is configured as follows:

(function () {
var app = angular.module('app');

//get all the routes
app.constant('routes', getRoutes());

//configure routes and their resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);

function routeConfigurator($routeProvider, routes) {
    routes.forEach(function (route) {
        $routeProvider.when(route.url, route.config);
    });

    $routeProvider.otherwise({ redirectTo: '/' });
}

//build the routes
function getRoutes() {
    return [
        {
            url: '/',
            config: {
                templateUrl: 'App/Layout/splash.html',
                title: 'Splash'
            }
        },
        {
            url: 'training',
            config: {
                templateUrl: 'App/Layout/training.html',
                title: 'Training'
            }
        }
    ];
}
})();

However, when I try and click on the link that takes me to /TrainingApp/Training (TrainingApp is app web url), then the routing does not take effect and the whole page is rerouted and i get a 404.

Do I need to increase my scope of the app module on the page? Do I need to add a ng-app directive in the master page somewhere?

Any help would be greatly appreciated.

Both training.html and splash.html exist and just contain divs with some text.

Upvotes: 0

Views: 1824

Answers (1)

Zaki
Zaki

Reputation: 5600

Try :

<a href="#/TrainingApp/training">link </a>

you can remove hash(#) from url by adding:

 $locationProvider.html5Mode(true); to your getRoutes();

Upvotes: 1

Related Questions