angularjs – How to use angular 1.5 components with ui-router states

angularjs – How to use angular 1.5 components with ui-router states

I just shared this solution with a buddy. Not sure if it fits your exact requirements but with UI-Router 1.0.0 you can route directly to a component. To take this a step further, with nested states, we can specify a specific component on a named view. We then link to our child state in the markup using ui-sref. When this state becomes active, so does its views component.

If you want to make these views dynamic, say based on a user role, then you could use a templateProvider function. However, with templateProvider you cant use a component to define a view so you may have to just return the components tag.

e.g. <editAdminProfileForm></editAdminProfileForm>

For more on conditional views with templateProvider see my other answer here: Angularjs ui-router : conditional nested name views

And heres some additional reading on UI-Router with components:
https://ui-router.github.io/guide/ng1/route-to-component
https://ui-router.github.io/docs/latest/interfaces/ng1.ng1statedeclaration.html#component

app.js

...

.state(app, {
  abstract: true,
  templateUrl: templates/user-profile.html,
})

.state(app.profile, {
  url: /profile,
  views: {
    profile: {
      component: userProfile
    }
  }

})

.state(app.profileEdit, {
  views: {
    editProfile: {
      component: editProfileForm
    }
  }
});

user-profile.html

<ui-view>
  <div ui-view=profile></div>
  <div ui-view=editProfile></div>
</ui-view>

user-profile-component.js
profile-edit-component.js

yourApp.component(userProfile, { ... });

yourApp.component(editProfileForm, { ... });

user-profile-component.html

<button type=button ui-sref=app.profileEdit()>Edit Profile</button>

angularjs – How to use angular 1.5 components with ui-router states

Leave a Reply

Your email address will not be published.