この投稿に加えて。誰も知らない、そのようなもの
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行のコードを占有する任意の大規模なアプリケーションを作成できます。