I need to have 3 elements in a same view and I do not know how to do it, I have my ui-view = 'main', I can display my menu but I do not know how to display the template Of the selected menu in the same view
this is my routing
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider){
$stateProvider
.state("connexion", {
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state("accueil", {
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state('agenda', {
url: "/agenda",
views: {
// for column two, we'll define a separate controller
'': {
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve:{
"check":function($cookies,$location){ //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')){ //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
}else{
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
},
'main':{
url: "/menu",
templateUrl: 'Template/menuAddAgenda.html'
/* //i want to put here
("bar", {
url: "/bar",
templateUrl: 'Template/bar.html'
})
("foo", {
url: "/bar",
templateUrl: 'Template/foo.html'
})
*/
}
}
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
this is my modal code
<div class="modal-body" id="modal-body">
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view="main"></div>
</div>
</div>
<div ng-view></div>
and this my code menu
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="foo">Route 1</a></li>
<li><a ui-sref="bar">Route 2</a></li>
</ul>
</div>
My menu displays correctly but I do not know how to set the route with my ui-sref To be displayed in the same view
if some one can help me
thans in advance
EDIT
I tried with this but it does not work with this error Error: Could not resolve 'bar"' from state 'agenda'
.state('bar', {
url: '/bar',
views: {
'main@agenda': {
abstract :true,
template: '<h1>bar</h1>'
}
}
})
and with this it works well in my ng-view = "main" but my first ng-view without name behind the window modal disappears
.state("bar", {
url: "/bar",
views: {
'main':{
template: '<h1>bar</h1>'
}
}
})
and when a put the parent it does not work again
.state("bar", {
url: "/bar",
parent:'agenda',
views: {
'main':{
template: '<h1>bar</h1>'
}
}
})
RE EDIT
i read the docs and i see this
Before 1.2.0 .setNestedState was used instead of .state. In 1.2.0 setNestedState was deprecated in favour of .state,
so i make this one
i need view but does nt work
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){
stateHelperProvider
.state({
name: "connexion",
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name: "accueil",
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state( {
name:'agenda',
url: "/agenda",
children: [
{
views: {
// for column two, we'll define a separate controller
'': {
abstract: true,
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve: {
"check": function ($cookies, $location) { //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')) { //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
} else {
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
},
'main': {
abstract: true,
templateUrl: 'Template/menuAddAgenda.html',
children:[
{
name:'foo',
abstract: true,
template: '<h1>foo</h1>'
},
{
name:'bar',
abstract: true,
template: '<h1>bar</h1>'
}
]
}
}
}]
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
})
but this one works for the view='' , but not for the view='main'
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){
stateHelperProvider
.state({
name: "connexion",
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name: "accueil",
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state( {
name:'agenda',
url: "/agenda",
views: {
// for column two, we'll define a separate controller
'': {
abstract: true,
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve: {
"check": function ($cookies, $location) { //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')) { //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
} else {
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
}
},
children: [
{
views:{
'main': {
abstract: true,
templateUrl: 'Template/menuAddAgenda.html'
},
'foo': {
abstract: true,
template: '<h1>foo</h1>'
},
'bar': {
abstract: true,
template: '<h1>bar</h1>'
}
}
}]
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
})
i create a plunker
https://plnkr.co/edit/Zyrj3gRv1cGZpcWwhXfL?p=preview
but i have a problem with this plunker because my menu have to be in the modal (view='main') and not outside in other view=''
