2014-01-21 87 views
16

我對Angular JS非常新穎,並且正致力於在更大的Django應用程序中創建Angular JS驅動的儀表板。我已經閱讀了很多關於Angular的文章,但仍然有幾個問題想要構建一個Angular應用程序的最佳方式,該應用程序中將包含許多獨立的小部件。Angular JS - 儀表板的最佳實踐

我知道每個HTML文檔只能有1個應用程序,並且在頁面上通常只有1個ng-view調用,我的問題是我應該將每個小部件設置爲自己的應用程序,還是有一種呈現方式控制一個應用程序內的多個模塊?

在我的文檔的頂部聲明目前我有NG-應用

<html lang="en" ng-app="dashboard"> 

不知道我怎麼會令其餘的部件,如果我只能用NG視圖一次?

我知道這個問題很主觀,可能沒有完美的答案,只是尋找一些最佳實踐或功能建議。

謝謝!

+3

您可以使用'ng-include'在頁面上擁有多個小部件。 – Phill

+1

您可以使用'angular.module('moduleName',[])''創建多個模塊。您可以擁有一個應用程序和多個模塊。使用依賴注入來在不同模塊之間進行通信。閱讀更多http://docs.angularjs.org/guide/di – JABD

+1

作爲一個新來的AngularJS,走了這條路,我希望我已經找到了[ui-router] (https://github.com/angular-ui/ui-router)。 –

回答

9

這是非常主觀的,但使用多個控制器或指令,如果正確完成,可以給你你正在尋找的效果。

例如,

<html ng-app="my-dashboard"> 
    <body> 
    <div class="Some structuring thing"> 
     <ng-include src="my-header.html"></ng-include> 
    </div> 
    <div class="Some other thing"> 
     <ng-include src="my-sidebar.html"></ng-include> 
    </div> 

    etc... 

    </body> 
</html> 

然後,每個部分可能是它自己的,獨立的組件。從那裏,你可以把它分解成控制器...

<div ng-controller="my-header-text"> 
    <p ng-bind="title"> 

    etc... 
</div> 
<div ng-controller="my-header-login"> 
    <p ng-click="login()">Login</p> 

    etc... 

</div> 

甚至進一步指示。

<my-custom-directive words="user.name"></my-custom-directive> 

這個例子確實是矯枉過正,但是問題仍然存在;你有很多方法來控制粒度,只要你喜歡。

個人而言,這些是我喜歡遵循的規則。

  1. 每一個文件app(按規定,而且還因爲它是有道理的。)
  2. 每一個DOM子樹可以單獨一個新的控制器;所以我的登錄和儀表板顯然有不同的用途,如果我想要粒度,我可以將每個用戶分成自己的控制器,並使用services正確處理與我的應用程序的根的通信。我可以登錄到任何頁面,而不僅僅是儀表板,並且用戶可以使用儀表板,即使沒有登錄和註銷的選項(假設某些未登錄用戶的默認情況),所以這些部分可以獨立運行並且體面候選人爲自己的控制者。
  3. 我喜歡非平凡的HTML塊的自定義指令。它有助於可讀性和重用;只是總是嘗試使用isolate作用域,如果不能,請詢問你所做的是否真的是指令。編寫您的指令,假設它不僅可以用於您的應用程序,也可以用於包含它並遵循正確API的任何類似應用程序。
+0

這是完美的,我開始了多個控制器路線,很高興得到確認,這是一個可行的選擇。感謝您花時間寫出詳細的回覆。 – xXPhenom22Xx