Working example
Opened this issue · 13 comments
Could you please attach working example with html and nested views (with they controllers) because I can't make nested views work and from ReadMe file I don't see why.
+1. I just spent > 1 hour moving all of my previously working nested views to use the stateHelper and now nothing loads and no error message is thrown.
I am working with a cool admin theme Angulr - Bootstrap Admin Web App with AngularJS. For whatever reason I cannot get contacts/list in the slightly modified example below to load. There no errors. Template if found and loaded however the page is not rendered. There are no errors. Perhaps this relates another currently opened issue.
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'apps',
templateUrl: 'tpl/layout.html',
children: [
{
name: 'contacts',
templateUrl: 'tpl/apps/contacts/contacts.html',
children: [
{
name: 'list',
templateUrl: 'tpl/apps/contacts/contacts.list.html'
}
]
}
]
});
})
Did you try to place url property like in the following example:
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'apps',
templateUrl: 'tpl/layout.html',
children: [
{
name: 'contacts',
url: '\contacts'
templateUrl: 'tpl/apps/contacts/contacts.html',
children: [
{
name: 'list',
url: '\list'
templateUrl: 'tpl/apps/contacts/contacts.list.html'
}
]
}
]
});
})
Thank you for the reply. Here is my config. I have the following link:
<a ui-sref="apps.contacts.list">Contacts</a>
When I mouse over the link, it correctly points to #/apps/contacts/list however, the angular doesn't route to that location. Just sort of blinks without any errors displayed.
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'apps',
url: 'apps',
templateUrl: 'tpl/layout.html',
children: [
{
name: 'contacts',
url: '/contacts',
templateUrl: 'tpl/apps/contacts/contacts.html',
children: [
{
name: 'list',
url: '/list',
templateUrl: 'tpl/apps/contacts/contacts.list.html'
}
]
}
]
});
});
Ok. I had similar mind breaking problem and i solved this like that:
On the page with router ex. index.HTML You shpuld have tag witg ui-view eg.
Then in the states You should place
Sorry for brealing in the middle of sentence but i'm writing on mobile and i'm in the bus.
So You shoud place in the states that had to change this div something like:
view: {templateUrl: "here/write/URL"}
Hope this would help. I will try write more understandable example later.
Thanks for trying to clue me in. I am afraid I will need to wait for a more clear answer. :) Thank You
This is why I asked for working example.
ok i will try to show this on the most basic example
First of all (like I write before) you should have in your file index.html a tag that contains ui-view which you would like to change/fill dependant on the path(url) that user is visiting
For example it could look:
so you would have in index html something like that:
.....
<body>
<div>static div with static content</div>
<div ui-view></div>
<div ui-view="secondViewToReplace"></div>
<body>
....
Now in the router configuration you could replace those divs like that
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'apps',
url: 'apps',
views: {
'': { //this one will be applied to not named view
templateUrl: "tpl/layout.html"
},
'secondViewToReplace@apps': { //this one will be applied to the named view
templateUrl: "tpl/someOtherHtmlFile.html"
}
}
});
Now try to make this working
use this for debuging:
angular.module('here are your module name and dependencies')
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
and you could now use this or your page ex. index.html:
<pre>
<!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams -->
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
$state full url = {{ $state.$current.url.source }}
<!-- $state.$current is not a public api, we are using it to
display the full url for learning purposes-->
</pre>
and you can see if state is changing
and then i suggest you to read this:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
and this:
http://angular-ui.github.io/ui-router/sample/#/about
and if it still want work I suggest you to put your sample code on the fiddle or somewhere so I could try to help you fix it.
i had a similar problem and posted a question on stack overflow http://stackoverflow.com/questions/28161642/how-to-get-ui-router-statehelper-working - while I went back to $stateProvider dot notation because I couldn't be bothered continuing with stateHelper - someone kindly provided a working example that you'll see in the accepted response.
My advice is to avoid libraries / directives etc who's authors can't be bothered providing decent documentation with working examples for all the important options. If it's not worth their time (like 5 minutes in this case) to create a working plunker or jsfiddle, you know they're either not in it for the long haul or simply incompetent - and you're bound to have problems down the road.
This is GitHub, you could just submit a pull request with more doc on the readme. Also you do realize the entire source code for the project is basically 39 lines?? You could actually read the source. The project literally converts your JSON structure into dot notation, if you can use dot notation and not this project you didn't take the 5 minutes to read the readme.
+1
It's not clear from the readme.md that there is actually a 'url' field.
Guys! Finally I got this!
<html ng-app="App">
<body>
<h1>Body</h1>
<div ui-view></div>
<script type="text/ng-template" id="main.html">
<h2>Main</h2>
<div ui-view></div>
</script>
<script type="text/ng-template" id="dashboard.html">
<h3>Dashboard</h3>
<div ui-view></div>
</script>
<script type="text/ng-template" id="two-columns.html">
<h4>Left</h4>
<div ui-view="numbers"></div>
<h4>Right</h4>
<div ui-view="letters"></div>
</script>
<script type="text/ng-template" id="numbers.html">
<h5>1</h5>
<h5>2</h5>
<h5>3</h5>
</script>
<script type="text/ng-template" id="letters.html">
<h5>One</h5>
<h5>Two</h5>
<h5>Three</h5>
</script>
</body>
</html>
stateHelperProvider.state({
name: 'main',
templateUrl: 'main.html',
children: [
{
name: 'dashboard',
templateUrl: 'dashboard.html',
children: [
{
name: 'two-columns',
templateUrl: 'two-columns.html',
children: [
{
url: '/',
views: {
'numbers': {
templateUrl: 'numbers.html'
},
'letters': {
templateUrl: 'letters.html'
}
}
}
]
}
]
}
]
});
And if you need see this working: http://codepen.io/rochapablo/pen/Zpyamb/