誰も知らない、そのようなものui-routerがあります 。 標準のAngularルーターを交換します。 彼らがAngular 2.0で似たようなものをカットすることを計画していることを考えると、このルーターはすぐに標準になるでしょう。
これを使用して、たとえば次のようなアプリケーションを構築できます。
メインモジュール
$stateProvider.state('main', { abstract: true views: { 'body': { templateUrl: '/main/views/body/template.html' }, 'header@main': { controller: 'mainBodyHeader' templateUrl: '/main/views/body/header/template.html' }, 'footer@main': { controller: 'mainBodyFooter' templateUrl: '/main/views/body/footer/template.html' } } });
/main/views/body/template.html
<body> <ui-view name="header"></ui-view> <ui-view name="content"></ui-view> <ui-view name="footer"></ui-view> </body>
記事モジュール
$stateProvider.state('article', { parent: 'main', abstract: true, views: { 'content@main': { templateUrl: '/article/views/content/template.html' }, 'navigation@article': { controller: 'articleContentNavigation' templateUrl: '/article/views/content/navigation/template.html' }, 'sidebar@article': { controller: 'articleContentSidebar' templateUrl: '/article/views/content/sidebar/template.html' } } }); $stateProvider.state('article.popular', { url: '/article/popular', views: { 'list': { controller: 'articleContentListPopular', templateUrl: '/article/views/content/list/popular/template.html' } }, });
/article/views/content/template.html
<content> <ui-view name="navigation"></ui-view> <ui-view name="sidebar"></ui-view> <ui-view name="list"></ui-view> </content>
したがって、アプリケーションを必要な数の部分に分割できます。
独自のディレクティブを作成することもできます。 コントローラーが全体的に一意のものに使用される場合、ディレクティブはアプリケーションに複数回現れるコンポーネントをラップする必要があります。 ところで、ディレクティブは独自のコントローラーを持つことができます。
app.directive('demo', function () { return { templateUrl: '/directives/demo/template.html', controller: 'demo' }; });
ng-include
および
ng-controller
ディレクティブもあります。これらは一般に必要ありませんが、標準ルーターを使用する場合に役立ちます。
共通のコードを作成する価値があるサービスがあります。
各コントローラーにドラッグしないように一般的な非同期操作を実行できる解決ルーターがあります。
なぜこれをすべて書いているのですか？ 厚いコントローラーの問題が指から吸い出されるという事実に。 標準ツールを使用して、平均的なコントローラーが200行のコードを占有する任意の大規模なアプリケーションを作成できます。