マルチページ角度アプリケーションのアーキテクチャ

Question

角度マルチページアプリケーションを設計する必要があります。私は、ページの各セクションは、特定の角度コントローラは、それに関連付けられている必要がありますようにページを設計するために計画され、テンプレートが定義されます

：とページはこのような何かを見てこれはng-includeディレクティブを介して追加されます。したがって、基本的に1ページ目（ルート==> '/'）に4つの異なるセクションがあり、4つのコントローラがあります。

これは1ページでうまくいきますが、ここでルートを定義する方法がわかりません。

1）ネストされたコントローラを用意する必要があります。したがって、1ページ目にはpage1Controllerがあり、他のすべてのコントローラにはこれが適用されます。これは良いデザインですか？

または

2）私は、ルーティング簡単にし、ページの各セクションのために定義されたディレクティブを持っています1ページに1つのコントローラを持っているべきですか？

Answer 1

複数の名前付きビューを使用することをお勧めします。それぞれの名前のビューには、独自のコントローラを持つことができます。

$stateProvider 
    .state('home', { 
    url: '/', 
    views: { 
     '': { 
     templateUrl: 'templates/app.tpl.html', 
     }, 
     'section1': { 
     controller: 'Section1Controller as vm', 
     templateUrl: 'templates/section1.tpl.html' 
     }, 
     'section2': { 
     controller: 'Section2Controller as vm', 
     templateUrl: 'templates/section2.tpl.html' 
     }, 
     'section3': { 
     controller: 'Section3Controller as vm', 
     templateUrl: 'templates/section3.tpl.html' 
     }, 
     'section4': { 
     controller: 'Section4Controller as vm', 
     templateUrl: 'templates/section4.tpl.html' 
     } 
    } 
    }) 
    .state('page2', { 
    url: '/page2', 
    views: { 
     '': { 
     templateUrl: 'templates/page2.tpl.html', 
     }, 
     'section1': { 
     controller: 'Section1Controller as vm', 
     templateUrl: 'templates/section1.tpl.html' 
     }, 
     'section2': { 
     controller: 'Section2Controller as vm', 
     templateUrl: 'templates/section2.tpl.html' 
     }, 
     'section3': { 
     controller: 'Section3Controller as vm', 
     templateUrl: 'templates/section3.tpl.html' 
     } 
    } 
    }) 

あなたはビューをレイアウトするときに、彼らはこのような何かを見て：

<div ui-view="section1"></div> 
<div ui-view="section2"></div> 
<div ui-view="section3"></div> 
<div ui-view="section4"></div> 

Answer 2

私は再して、複数のコントローラを許可するディレクティブを使用しますページ1とページ2の間のコードを使用して、次のようになりアンギュラ2.

あなたのページへの移行の準備のために：

<section1></section1> 
<section2></section2> 
<section3></section3> 
<section4></section4> 

そして、あなたはセクションごとにディレクティブを記述する必要があります。ここでは

module.directive('section1', function() { 
    return { 
    scope: {}, 
    bindToController: { 
    }, 
    controller: function() { }, 
    controllerAs: 'vm', 
    template: ` 
     <div>This is section1 
     </div> 
    ` 
    } 
}); 

あなたは活字体を使用することに興味がある場合は上記で説明したように、ここでtutorial that includes two pages with 2 shared sections using directivesあるapproximate module in Angular 1.x

に品です。 「共有ディレクティブのあるサンプルページ」という最後の部分を見てください。チュートリアルにはgithub repositoryが含まれています。/

h1 page2 
page2-section2 
page2-section1 

ページ1とページ2の間のコントローラは非常に類似しており、これを用いたセクションタグを作成します。そのチュートリアルで は、Page1のは

h1 page1 
page1-section1 
page1-section2 

のように見え、2ページ目は、同じ部分を共有しました共有ディレクティブ（DigiSection1.Section1Directive）：

angular 
.module('digiangularjs.page1', []) 
.controller('agendaController', Page1Controller) 
.directive("page1Section1", [() => new DigiSection1.Section1Directive()]) 
.directive("page1Section2", [() => new DigiSection2.Section2Directive()]) 
; 

そして、2ページ目のために、私たちは同じディレクティブを使用しますが、

angular 
.module('digiangularjs.page2', []) 
.controller('page2Controller', Page2Controller) 
.directive("page2Section1", [() => new DigiSection1.Section1Directive()]) 
.directive("page2Section2", [() => new DigiSection2.Section2Directive()]) 
; 

Answer 3

マイクの回答を外す高レベルのレイアウトコンテナである単一コンポーネントとしてルートレベルテンプレートを定義します。

.state('page1', { 
    url: '/page1', 
    template: '<page1></page1>' 
}) 
.state('page2', { 
    url: '/page2', 
    template: '<page2></page2> 
}); 

次にあなたが行うことができます（ただ、ネストされたディレクティブ/コンポーネントのレイアウトを決定）あなたの<page>コンポーネントで：

.component('page1', { 
    template: [ 
    '<section1></section1>', 
    '<section2></section2>', 
    '<section3></section3>' 
    ].join('') 
}); 

また、私はあなたが身を示唆している「マルチページapplicaton」」を書いて実現ルータを使用することについては全く計画していません。その場合、バックエンドはダイナミックレイアウト生成を処理する必要があります。これはまったく異なる質問です。