多頁面角度應用程序的體系結構

我們必須設計一個角度多頁面應用程序。而網頁看起來是這樣的：多頁面角度應用程序的體系結構

我打算設計頁面以這樣的方式，頁面的每個部分都會有與之相關聯的特定角控制器和模板，將被定義這將通過ng-include指令添加。所以基本上頁面1（route ==>'/'）將有4個不同的部分，它們將有4個不同的控制器。

現在這個課程在單個頁面上工作正常，但我不確定如何在這裏定義路由。

1）我應該有嵌套控制器，所以對於頁1我們有一個page1Controller和所有其他控制器將在此之下。這會是一個很好的設計嗎？

或

2）如果我有一個每頁控制器，這將使路由容易，對頁面的每個部分定義的指令？

來源

2016-05-20 Anamadeya

我會使用2個狀態（兩個頁面），不同的視圖（對於部分），每個視圖將是一個指令。 – MayK

儘管通常不建議，但您可以使用ngController指令而不是在Routing上定義頁面控制器。我會這樣。 –

@MayK：謝謝，你的意思是說，兩個頁面都只有一個控制器，對吧？ – Anamadeya

我想我會建議只使用多個命名的意見。每個命名視圖可以有它自己的控制器：

$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>

來源

2016-05-20 13:14:57

但對於這一點，我將不得不使用'角ui'圖書館。這可以在本地完成嗎？ – Anamadeya

值得一提的是這個使用UI-Router而不是角度路由 –

@Mugambo我發現它使用angular-ui比默認lib更好的選項。如果你願意改變它。 –

我會用指令允許多個控制器，重新使用代碼第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> 
    ` 
    } 
});

下面是一篇文章，approximate module in Angular 1.x

如果您有興趣使用打字稿，這裏是一個tutorial that includes two pages with 2 shared sections using directives如上所述。查看接近結尾的部分，稱爲'帶共享指令的示例頁面'。該教程包括一個github repository。在該教程，第1頁看起來像

h1 page1 
page1-section1 
page1-section2

而且，第二頁共享相同的部分：

h1 page2 
page2-section2 
page2-section1

第1頁和第2頁之間的控制器非常相似，並且使用相同的創建部分標籤/共享指令（DigiSection1.Section1Directive）：

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

而對於第二個頁面，我們使用相同的指令，但

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

來源

2016-05-20 13:25:06 Gregori

去掉Mike的答案我會將您的路徑級別模板定義爲高級佈局容器的單個組件。

.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('') 
});

而且我知道你寫的「多頁的一個應用」，它會建議你不要」 t計劃使用路由器。如果是這種情況，你的後端將不得不照顧動態佈局生成，這是一個完全不同的問題。

來源

2016-05-31 14:41:22

多頁面角度應用程序的體系結構

回答

相關問題