Help / Manual for Ui Router with Angular 1.5 Components ?

[iangregsondev]

Hi,

Can anyone point me in the right direction for help in integrating ui router with angular 1.5 components. I can't seem to find any concrete info, it appears that some functionality is working but not too sure whats in and whats not.

Can anyone help ?

Just interested in working with the ui router and angular 1.5. I am about to undertake a migration from 1.3 to 1.5 and using components, the current app uses ui-router with states and child states.

Thanks in advance

[zzeniou86]

+1

[christopherthielen]

Edit

tl;dr

The route-to-component guide for ui-router for ng1: https://ui-router.github.io/guide/ng1/route-to-component

The sample app is now all 1.5 components: https://github.com/ui-router/sample-app-ng1

https://github.com/ui-router/sample-app-ng1/blob/master/app/mymessages/mymessages.states.js

End Edit

---

ui-router 0.3.0 binds $resolve to the $scope, so you can use "route to component template" style, such as

.state('foo', {
  resolve: { mydata: (Service) => Service.getData() }
  template: '<foo-component data="$resolve.mydata"></foo-component>'
});

ui-router 1.0 supports routing directly to components, with resolves feeding into component bindings of the same name

.state('foo', {
  resolve: { mydata: (Service) => Service.getData() }
  component: 'fooComponent'
});

.component('fooComponent', {
  template: '<h1>{{$ctrl.data}}</h1>'
  bindings: { mydata: '<' }
})

See the 1.0 docs for the component: property of a view (and also bindings: here http://angular-ui.github.io/ui-router/1.0.0-alpha.5/interfaces/ng1.ng1viewdeclaration.html#component

There are some real world-ish examples in the angular-1.5-components branch of the ui-router sample app

https://github.com/ui-router/sample-app/blob/angular-1.5-components/app/mymessages/mymessages.module.js

[iangregsondev]

Great! Thanks. I presume we can still use abstract states and child states (dot notation) with component routing ?

[christopherthielen]

I presume we can still use abstract states and child states (dot notation) with component routing ?

yes, definitely.

[iangregsondev]

Great, Thanks for the prompt reply.

[karin-n]

            .state('parentState', {
                url: 'parent',
                abstract: true,
                views: {
                    main: 'parentComponent'
                }
            })
            .state('parentState.childState', {
                url: '/child',
                views: {
                    parent: 'childComponent'
                },
                resolve: {
                    parentObject: () => 'parentComponentControllerObject'
                }
            });

.component('childComponent', {
  template: '<div>{{parentObject.name}}</div>'
  bindings: {parentObject: '<'}
})
.

@christopherthielen Sorry if this is a silly question, but it would be awesome if you could explain how I can pass an object from my parent component controller to the child component controller.

I know how to inject data from a service, but not from the parent controller. Or maybe I should just be using the 'require' attribute on my child component and gain access to the parent controller that way?
Thanks in advance!

[vladimiry]

@karin-n The components way would look like passing callback method to the child component (surely if you don't go with events or another not angular specific data sharing approach):

<parent on-update="$ctrl.updateUser($event);">
    <child>
        ...
        <a href ng-click="$ctrl.onUpdate({$event: {user: $ctrl.user}});">Update</a>
    </child>
</parent>

So this way requires & binding defined for the child component:

{bindings:{onUpdate: '&'}}

I guess you can try to define your parent component as a string template (ui-router 0.3.0 approach):

{template: '<parent data="$resolve.mydata" on-update="$ctrl.updateUser($event);"></parent>'}

[karin-n]

@vladimiry thanks for your answer! I was hoping that I didn't need to use the string template approach, but I guess it's still a good solution.

[michahell]

And how do we access the resolved objects inside the component controller ?

$scope.$resolve.data?

[karin-n]

@michahell the resolved object will be bound to the controller, e.g. $ctrl.data in your html template, or this.data in your component controller.

[michahell]

@karin-n Thank you! I have just one thing to contribute that I was running into and that is:

• If you define 'dumb' components that are NOT accessible by a route (e.g. you comment out the url property in the state definition) then the resolve will never execute.
• If you need (grand)child (dumb) components to access some data, you can have a parent 'smart' component resolve that data and then pass it to some (grand) child component via thebindings property.

[klausbert]

Do you plan to support bindings to callback (&) functions with the new state.component() syntax?
Sort of:
.state('child', { url: '/child', component: 'child', resolve: { onUpdate: (param) =>{ console.log(param)} }})

where child component is

.component('child', { bindings: { onUpdate: '&' }, ... })?
It looks like 1.0.0 is only working with '<' or '=' bindings.
Thanks!

[freeman29]

Waiting for this^