如何让 Angular 状态和组件绑定工作

Question

我一直在升级一些有角度的东西，并决定我可能想使用状态和组件来做一个列表/详细视图。

我有一个这样定义的状态。我知道clientsService，这是一个$resource 的作品。我可以 var d = clientsService.list().$promise; d.then(function(r){ console.log(r.data);}; 并获取一组客户端。 我的问题似乎是关联的组件未呈现。客户端应该在我的 SPA index.html 页面中呈现

我的 Angular 版本是 1.6.4。 我在https://ui-router.github.io/ng1/tutorial/hellosolarsystem 上按照教程进行操作，但我被卡住了。有什么原因导致这不起作用？

//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>

为了完整起见，这里是我的 $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}
    }
);
}]);

更改了我的状态和组件名称。还是不行。 在考虑了这一点之后。仅在解析完成后才会呈现视图。可能解析有问题？

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

这就是我知道我的服务返回数据的方式。

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

    }                   

实际上我认为我的问题是没有一个主 html 页面来显示我的组件。我明天再试一次。

现在我真的被困住了。我评论了我所在州的决心。我注释掉了我的组件中的绑定。只是想展示一个真正的简单。 还是不行。 您可以将旧式状态与 templateUrl 和控制器与基于组件的状态混合使用吗？

这不显示任何内容。

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

这真的是一些废话。花了两天时间试图让它工作，没用。

两个组件的绑定似乎不起作用。

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

还有两种状态。

}).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;
                        });
                    }

                }
    })

我的 index.html 页面定义了

<ui-view></ui-view>

结合 templateUrl 和控制器的其他六个状态工作正常，将模板放入，控制器工作正常。

但是使用组件方法失败了。

请帮忙？

Answer 1

我猜我使用了错误的 ui.router 版本。 0.4.2。组件路由在 1 之前不可用。*

是的，使用正确版本的 ui.router 和组件路由需要 10 分钟。呵呵！