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

right now, angular ui-router project didn't have explicit angular 1.5 components. project requirement use nested states , want use angular 1.5 components migrate angular 2. i'm looking best boilerplate of both. options 1,2 & 4 below link supported. want know optimal option nested states , migration angular 2.

angular 1.5 components nested states

i shared solution buddy. not sure if fits exact requirements ui-router 1.0.0 can route directly component. take step further, nested states, can specify specific component on named view. link our child state in markup using ui-sref. when state becomes active, view's component.

if want make these views dynamic, based on user role, use templateprovider function. however, templateprovider can't use component define view may have return component's tag.

e.g. <editadminprofileform></editadminprofileform>

for more on conditional views templateprovider see other answer here: angularjs ui-router : conditional nested name views

and here's additional reading on ui-router 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>