如何使用角度爲1.5的組件與UI路由器狀態

Question

現在，角度UI路由器項目沒有任何關於角度1.5組件的明確說明。 我的項目需求是使用嵌套狀態，我想使用角1.5組件輕鬆遷移到角2.我正在尋找最好的兩個樣板。 選項1,2 & 4支持以下鏈接。我想知道什麼是嵌套狀態的最佳選項，並遷移到角2

Angular 1.5 components with nested states

Answer 1

我只是分享了一個哥們這一解決方案。不確定它是否符合您的確切要求，但使用UI-Router 1.0.0您可以直接路由到組件。爲了更進一步，使用嵌套狀態，我們可以在命名視圖上指定特定組件。然後我們用標記ui-sref鏈接到我們的孩子狀態。當這個狀態變得活躍時，其視圖的組件也是如此。

如果要使這些視圖具有動態性，例如基於用戶角色說，那麼您可以使用templateProvider函數。但是，對於templateProvider，您不能使用組件來定義視圖，因此您可能必須僅返回組件的標記。

例如<editAdminProfileForm></editAdminProfileForm>

更多與templateProvider看到我的其他答案在這裏有條件的觀點：Angularjs ui-router : conditional nested name views

而且這裏的一對UI的路由器一些額外的閱讀與組件：
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' 
    } 
    } 
}); 

用戶profile.html

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

用戶輪廓component.js
輪廓編輯component.js

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

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

用戶簡檔組件。 html

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