I don’t know what I am doing wrong, but that’s what I want.
To start, here is my body:
<body>
<div ng-app="testApp" ng-controller="MainController" class="container-fluid">
<div ui-view class="row"></div>
</div>
</body>
Now, in ui-view, I want some content to depend on the URL. Firstly, there will be a state of the house, which will contain other conditions.
- Home
- Recent Studies
- Studies
- Map
- Study
To do this, I am trying to create a hierarchy of routes. This will be my home template (home.html), abstract, which will be presented in the ui-viewabove:
<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 are the latest studies (home.recentStudies.html.twig) that I want to put in the ui-view home.html:
<p>Recent studies</p>
Here is the definition of routes:
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 loading the application everything is empty and I do not seem to understand the problem.
It doesn't seem like I can use templateUrl in plnkr, so I immediately passed the code to the template:
http://plnkr.co/edit/kGIxPSNXGy2MLLhXFXva?p=preview