My angular app is integrated within a Symfony app, resulting in a different directory structure. All public resources are symlinked to a static directory, including the partials. The app loads and controllers work but the partials do not load for their respective controllers. It was functioning correctly as a standalone app outside of Symfony, so there must be something missing with the new configuration.
index.html.twig:
Note: JavaScript files load correctly- indicating the correct asset path
<body ng-controller="MainController">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#/">Home</a></li>
<li><a href="#/groups">Groups</a></li>
</ul>
</div>
</nav>
<div ng-view=""></div>
<div ng-view></div> <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="bundles/translations/webadmin/app/js/ngroute.js"></script>
<script src="bundles/translations/webadmin/app/js/app.js"></script>
<script src="bundles/translations/webadmin/app/js/services.js"></script>
<script src="bundles/translations/webadmin/app/js/controllers.js"></script>
<script src="bundles/translations/webadmin/app/js/filters.js"></script>
<script src="bundles/translations/webadmin/app/js/directives.js"></script>
</body>
app.js:
Note: Attempted to set templateUrl just to 'partials/'
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/groups', {templateUrl: 'bundles/translations/webadmin/app/partials/groups.html', controller: 'GroupsController'});
$routeProvider.when('/', {templateUrl: 'bundles/translations/webadmin/app/partials/home.html', controller: 'HomeController'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
controllers.js
Note: Alerts fire correctly, but partials do not load...
angular.module('myApp.controllers', [])
.controller('MainController', ['$scope', function($scope) {
alert('here?');
}])
.controller('HomeController', ['$scope', function($scope) {
alert('here2');
}])
.controller('GroupsController', ['$scope', function($scope) {
// TODO see below
}]);
Console output:
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) translations:1
Blink is considering rejecting non spec-compliant cross-origin web font requests: https://d3nkxvtkt5c8vi.cloudfront.net/0.4.2/fonts/proxima_nova_light_0.woff. Please use Access-Control-Allow-Origin to make these requests spec-compliant.
Can anyone provide insight into what might be missing here? Your help would be greatly appreciated.