AngularJS Routing in a WordPress site

I am currently building a WordPress site which has a few interactive bits using AngularJS. Everything works fine, however, when I go to a page which corresponds to my Angular routing setup, the rest of the links on the site then fail to work.

<div ng-app="myApp" class="ng-view">
<ng-view></ng-view>
</div>

… my view is as follows:

Read More
<div class="row" ng-controller="LinksCtrl" ng-init="init()">
... rest of view ...
</div>

… any my routing is set up as follows:

$locationProvider.html5Mode(true);
$routeProvider.when('/links/', {
    templateUrl: APP_SETTINGS.baseUrl + '/assets/js/views/links.html',
    controller: 'LinksCtrl'
});

So, when I navigate around the site, all works OK, but when I then go to /links/, the page (and all Angular app related stuff works and loads), but the rest of the links in the site then fail to load.

So firstly, I am not sure I have to have the controller defined in both the view and routes, and secondly, surely the page should just init without routing? If I disable routing, non of the Angular view displays.

I guess my question should be as to whether or not this is actually possible.

Any help much appreciated.

Cheers,
Dave

Related posts

Leave a Reply

1 comment