I am currently implementing nested views within a mobile application. In my attempts to incorporate this functionality, I came across the following module:
However, despite observing the templates being loaded via XHR, nothing is displayed on the page.
I am uncertain whether the controllers are being properly loaded as well; in the example app, there seems to be a mix of passing the controller reference as a string or by reference.
I experimented with UI-router and encountered more success. However, it appears that animated views are no longer supported with the latest RC of AngularJS, which is an essential feature for my app.
Below is the content of my app.js file:
var app = angular.module('HealIntApp', ['ngRoute', 'angular-carousel', 'ngAnimate', 'ngTouch', 'route-segment', 'view-segment']);
app.config(['$routeSegmentProvider', '$routeProvider', function($routeSegmentProvider, $routeProvider){
$routeSegmentProvider.options.autoLoadTemplates = true;
$routeSegmentProvider
.when('/', 'index')
(more code...)
}]);
My main.html partial that should be pulled into the DOM at the root URL:
<div class="pure-u-1">
<a href="#/setup" class="pure-button pure-button-primary">Setup</a>
</div>
And the associated controller that logs nothing:
app.controller('CtrlMain', function ($scope, $rootScope) {
console.log('main controller loaded');
});