I don't know what I'm doing wrong, but here's what I want.
To begin with, here's my body:
<body> <div ng-app="testApp" ng-controller="MainController" class="container-fluid"> <div ui-view class="row"></div> </div> </body> Now, inside the ui-view, I want some content depending on the URL. First, there will be the home state which will contain other states.
- Home - Recent Studies - Studies - Map - Study To do so, I'm trying to create a hierarchy of routes. This would be my home template (home.html), an abstract one, that would go in the ui-view above:
<div ng-controller="HomeController"> <header> <div class="row"> <div class="col-xs-6">Test Web Application</div> <div class="col-xs-6"> <p class="pull-right">Bonjour <strong>{{currentAccount.name}}</strong> ! <a href="#">Déconnexion</a></p> </div> </div> </header> <article class="row"> <div ui-view></div> </article> </div> Here's recent studies (home.recentStudies.html.twig), that I want to put inside the ui-view of home.html:
<p>Recent studies</p> Here are the routes definition:
angular.module('testApp').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/recentStudies'); $stateProvider .state('home', { url: '/', abstract: true, templateUrl: 'partials/home.html' }) .state('home.recentStudies', { url: '/recentStudies', templateUrl: 'partials/home.recentStudies.html' }) .state('home.studies', { url: '/studies', templateUrl: 'partials/studies.html' }) ; }]); My problem is that when I load the application, everything is blank and I don't seem to understand the problem.
It doesn't seem like I can't use templateUrl in plnkr so I transferred the code into template directly:
