Working example - Githubissues

jdorz commented 10 years ago

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 commented 10 years ago

+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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

jdorz commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 8 years ago

+1

bluebaroncanada commented 8 years ago

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

rochapablo commented 8 years ago

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/

marklagendijk / ui-router.stateHelper

Working example #9