How to get Angular states and component binding to work

Question

I've been upgrading some angular stuff and decided i might like to use states and components to do a list/detail view.

I have a state defined like so. i know the clientsService, which is a $resource works. i can var d = clientsService.list().$promise; d.then(function(r){ console.log(r.data);}; and get an array of clients. My problem seems to be the associated component is not rendered. clients should be rendered inside my SPA index.html page

My version of angular is 1.6.4. I was following the tutorial here https://ui-router.github.io/ng1/tutorial/hellosolarsystem but i'm stuck. Is there any reason why this is not working?

//States:
$stateProvider
.state('clients', {
        url: '/clients',
        component: 'clients',
        resolve: {
            clients : function(clientsService) {
                return clientsService.list().$promise;
            }

        }
});

//Component
hiamsApp.component('clients', {
bindings: {clients: '<'},
template: '<h3 style="top-margin:10px;">Some Clients:</h3>' +
          '<ul>' +
          ' <li ng-repeat="client in $ctrl.clients">' +
          '     <a ui-sref="client({clientId: client._id})">' +
          '         {{client.firstName}}' +
          '     </a>' +
          ' </li>' +
          '</ul>',  
});

index.html

    <div class="container-fluid">
        <ui-view></ui-view>
    </div>

just for completeness here is my $resource.

hiamsApp.factory('clientsService', ['$resource', 'authenticationInterceptor', function($resource, authenticationInterceptor){
return $resource('/api/client', 
    {},
    {
        'query': {method: 'GET', url: '/api/client', isArray: true, interceptor: authenticationInterceptor},
        'list': {method: 'GET', url: '/api/clients', isArray: true, interceptor: authenticationInterceptor},
        'update': {method: 'PUT', interceptor: authenticationInterceptor}
    }
);
}]);

Changed my state and Component names. still no go. After giving this some more thought. the view is only rendered after the resolve is completed. maybe there is some wrong with the resolve?

//States:
$stateProvider
.state('clients', {
    url: '/clients',
    component: 'myclients',
    resolve: {
        allClients : function(clientsService) {
            return clientsService.list().$promise;
        }

    }
});

//Component
hiamsApp.component('myclients', {
bindings: {allClients: '<'},
template: '<h3 style="top-margin:10px;">Some Clients:</h3>' +
      '<ul>' +
      ' <li ng-repeat="person in $ctrl.allClients">' +
      '     <a ui-sref="person({clientId: person._id})">' +
      '         {{person.firstName}}' +
      '     </a>' +
      ' </li>' +
      '</ul>',  
});

This is how i know my service returns data.

resolve: {
        allClients : function(clientsService) {
                        var d = clientsService.list().$promise;
                        d.then(function(r){
                            console.log(r.data);
                        };
                });
            return clientsService.list().$promise;
        }

    }                   

Actually i think my problem is not having a master html page to display my component in. I will try again tomorrow.

well now i am really stuck. I commented out the resolve in my state. i commented out the binding in my component. just wanted to display an real simple. Still no good. Can you mix old style states with templateUrl and controller with component based states?

This displays nothing.

}).state('appointments', {
        url: '/appointments',
        templateUrl: 'appointments.html',
        controller: 'appointmentsController'
    // }).state('clients', {
    //  url: '/clients',
    //  templateUrl: 'clients.html',
    }).state('clients', {
        url: '/clients',
        component: 'clients',
        // resolve: {
        //  allClients : function(clientsService) {
        //      return clientsService.list().$promise;
        //  }
        // },
    });

hiamsApp.component('clients', {
// bindings: {allClients: '<'},
template: '<h3>Im a component</h3>'
// template: '<ul>' +
//        ' <li ng-repeat="person in $ctrl.allClients">' +
//        '     <a ui-sref="person({clientId: person._id})">' +
//        '         {{person.firstName}}' +
//        '     </a>' +
//        ' </li>' +
//        '</ul>',  
});

this really is some BS. Spent two days trying to get this to work, useless.

two components with bindings that don't seem to work.

hiamsApp.component('allClients', {
bindings: {allClients: '<'},
template: '<div>' +
          '    <div>' +
          '        <h4>In Component</h4>' +
          '        <ul>' +
          '            <li ng-repeat="client in $ctrl.allClients">' +
          '                <a ui-sref-active="active" ui-sref="clients.client({ clientId: client._id })">' +
          '                    {{client.firstName}}' +
          '                </a>' +
          '            </li>' +
          '        </ul>' +
          '    </div>' +
          '    <ui-view></ui-view>' +
          '</div>', 
});

hiamsApp.component('client', {
bindings: {client: '<'},
template: '<h3>A person!</h3>' +

        '<div>Name: {{$ctrl.client.firstName}}</div>' +
        '<div>Id: {{$ctrl.client._id}}</div>' +
        '<div>Email: {{$ctrl.client.email}}</div>' +
        '<div>Address: {{$ctrl.client.address}}</div>'
});

and two states.

}).state('clients', {
        url: '/clients',
        component: 'allClients',
        resolve: {
                     allclients: function(clientsService){
                     clientsService.query().$promise.then(function(response){
                                        //return response.data;
                                        return [{firstName : 'Gary', _id : 1, email : 'abc@dot.com', address: '123 street'}, {firstName : 'Shelly', _id : 2, email : 'xyx@dot.com', address: '456 street'}];
                                        });
                    }
                }
                }
    }).state('clients.clientlist', {
        url: '/{clientId}',
        component: 'client',
         resolve: {
                    client : function(allClients, $stateParams) {
                        return allClients.find(function(client){
                            return client._id === $stateParams.clientId;
                        });
                    }

                }
    })

and my index.html page defines

<ui-view></ui-view>

the other six states, that combine templateUrl and controller work fine and place the template into the and the controller works great.

however using the component approach fails.

Helps please?

Answer 1

guess i'm using the wrong ui.router release. 0.4.2. component routing not available until 1.*

yup, 10 minutes with the right version of the ui.router and component routing is working. duh!