具有角度的單頁應用程序

我在過去幾天開始使用Angular ，並認爲一個良好的起點項目將構建一個基本的單頁應用程序。我想討論這樣做的最佳方式，因爲我最終會使用這個概念來構建一個非常大的項目。具有角度的單頁應用程序

我很難理解頁面上的頁面（url位置）和模塊（帶有相關控制器的可重用塊）之間的關係。

我想這樣做的方式是讓路由塊定義頁面，例如，

var myWebsite = angular.module('myWebsite', ['ngRoute']); 

myWebsite.config(function($routeProvider) { 
    $routeProvider. 
    when('/home', { 
     templateUrl: 'home.html' 
    }). 
    when('/page2', { 
     templateUrl: 'page2.html' 
    }). 
    otherwise({ 
     redirectTo: '/home' 
    }); 
});

此塊將在它自己的config.js文件中。

然後我想讓控制器與可以在任何頁面上重複使用的部分有關。

所以我們假設我們想要菜單模塊出現在home和page2上。

我在它自己的文件，希望這個，有點像這樣：

<div ng-controller="navMenu"> 
    <ul> 
     <li>... 
    </ul> 
</div>

這則意味着我可以回家，第2頁寫我的網頁和任何在下面的樣式其他頁面：

<ng-include src="/app/modules/menu.html"></ng-include> 
<ng-include src="/app/modules/somethingElse.html"></ng-include> 
<ng-include src="/app/modules/anotherThing.html"></ng-include>

和我的index.html的身體：

<ng-view></ng-view>

做這件事時我遇到了這個問題是控制器無法動態加載。我基本上必須列出將在一個大文件中使用的所有可能的控制器。這明顯地擊敗了使用Angular的一個要點。

所以我的感覺是，我誤解了Angular，並希望有人能指引我朝着正確的方向前進。我想要有一小塊可重用的html，每個都有自己的特定控制器，可以動態加載。

我看過的其他教程似乎給每個頁面配置了路由控制器，但頁面之間的許多共享功能看起來有點多餘？

任何幫助，鏈接，想法非常讚賞。乾杯。

來源

2014-09-18 Varrick

「我希望能有可重複使用的HTML的小塊，每一個都有自己特定的控制器「查看指令。這正是他們想要的。我不確定你的意思是「哪些可以動態加載」 – dnc253 2014-09-18 19:01:40

我基本上不想在一個大文件中列出所有的控制器。我想爲每個部分分開的js文件，這些文件將在需要時加載。看着它，這可能會超出角度（我知道它可以通過require來完成），在這種情況下，我只想知道我目前的計劃是否至少是合理的。 – Varrick 2014-09-18 19:12:26

您是否考慮過使用GruntJS將您的許多文件編譯爲「一個大文件」？這將允許您按自己的喜好組織源代碼，但可以享受縮小的好處，並減少客戶端瀏覽器爲加載應用程序而必須提出的請求數量。 – Trevor 2014-09-18 19:46:14

如果我已經正確理解你的問題，那麼你的ng-include（d）離散功能塊看起來就像是作爲指令實現的理想候選者。

您的路由提供程序配置允許您通過在使用templateUrl參數傳入的對象中指定控制器參數來爲多個頁面加載相同的控制器。這使您可以在多個部分之間共享同一個控制器，並且只要您可以根據所服務的路線將控件與控制器混合並匹配，就可以使您的頁面可組合。然而，正如你所看到的，這意味着你的控制器腳本需要在啓動時加載，即不是動態的，但這是角度解決方案的默認/標準體系結構方法。如果你想加載你的控制器動態，那麼你需要做一些額外的工作丹Wahlin顯示在他的文章在這裏：

http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

來源

2014-09-18 19:40:24 Hargrovm

具有角度的單頁應用程序

回答

相關問題