Working example #9

jdorz · 2014-10-27T08:38:31Z

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.

jelling · 2014-11-13T21:37:31Z

+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.

LarryEitel · 2014-12-01T17:42:23Z

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'
                        }
                    ]
                }
            ]
        });
})

jdorz · 2014-12-02T07:11:30Z

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'
                        }
                    ]
                }
            ]
        });
})

LarryEitel · 2014-12-04T14:47:24Z

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'
                        }
                    ]
                }
            ]
        });
});

jdorz · 2014-12-04T15:31:19Z

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

jdorz · 2014-12-04T15:39:49Z

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.

LarryEitel · 2014-12-04T16:02:07Z

Thanks for trying to clue me in. I am afraid I will need to wait for a more clear answer. :) Thank You

jdorz · 2014-12-04T20:48:41Z

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:

or if you want to have more such views you could use named ui-view

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.

gigmaps · 2015-01-28T17:08:58Z

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.

VictorioBerra · 2015-02-26T14:40:15Z

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.

rochapablo · 2016-04-19T20:57:15Z

+1

bluebaroncanada · 2016-08-17T06:28:45Z

It's not clear from the readme.md that there is actually a 'url' field.

rochapablo · 2016-09-28T12:10:25Z

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/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Working example #9

Working example #9

jdorz commented Oct 27, 2014

jelling commented Nov 13, 2014

LarryEitel commented Dec 1, 2014

jdorz commented Dec 2, 2014

LarryEitel commented Dec 4, 2014

jdorz commented Dec 4, 2014

jdorz commented Dec 4, 2014

LarryEitel commented Dec 4, 2014

jdorz commented Dec 4, 2014

gigmaps commented Jan 28, 2015

VictorioBerra commented Feb 26, 2015

rochapablo commented Apr 19, 2016

bluebaroncanada commented Aug 17, 2016

rochapablo commented Sep 28, 2016

Working example #9

Working example #9

Comments

jdorz commented Oct 27, 2014

jelling commented Nov 13, 2014

LarryEitel commented Dec 1, 2014

jdorz commented Dec 2, 2014

LarryEitel commented Dec 4, 2014

jdorz commented Dec 4, 2014

jdorz commented Dec 4, 2014

LarryEitel commented Dec 4, 2014

jdorz commented Dec 4, 2014

gigmaps commented Jan 28, 2015

VictorioBerra commented Feb 26, 2015

rochapablo commented Apr 19, 2016

bluebaroncanada commented Aug 17, 2016

rochapablo commented Sep 28, 2016