2012-11-12 25 views
3

嗨,大家好我是AngularJS的新手,一般來說JS。我來自Java世界,因爲我曾經用GWT實現客戶端。如何以角度組織您的.JS文件?

現在,當我搬到AngularJS我面對這個問題:

如何組織你的.js文件?在java中,每個類都有它的.java文件,但是,如果這種做法在JS中實現,則會有許多http請求來獲取.js文件,因爲每個類(Function)都駐留在單獨的.js文件中。

此外,文件應該組織,以便其他程序員應該分配和瀏覽他們之間,並能夠閱讀和理解這些文件相關的文件。

+1

您可以隨時遵循Angular-seed的結構https://github.com/angular/angular-seed – lgomezma

回答

7

不幸的是,有大約一百萬種方法來做到這一點。由於角度使用模塊,並且所有角碼都應位於模塊中,因此使用javascript namespacing的IMO成爲模塊命名空間的輔助。

看看這個項目(angular-grunt-coffeescript)。這是我嘗試解決這個問題。我使用coffeescript,但同樣的想法可以應用於.js項目。

還有angular-sprout它試圖擴大'角種子'項目一點,使其可用於大應用程序 - angular-sprout在js中。

UPDATE

約曼看起來像它可能成爲創建框架AngularJS項目的標準,因此應提供的一切「家」(我個人不使用它尚未)。看看here

3

我通常將代碼拆分成包含與該名稱空間相關的類的名稱空間。我把每個名字空間放在一個單獨的JS文件中。

所以,如果你有類調用LinkedList,BinaryTree,KDTree等,你可以捆綁他們在一個數據結構的命名空間,並將其保存在

datastructures.js 

所以,那麼你可以說:

var kd = new Datastructures.KDTree(); 

通過保持命名空間名稱和文件名相同,您可以輕鬆找到實際的代碼片段,而無需使用強大的IDE,因爲名稱本身就是自我描述的。

希望這會有所幫助!

+0

我會盡力實踐它。 – Adelin

+0

@Adio如果這有幫助,請花時間接受爲答案:) – stackoverflow

+0

它幫助,但它不是迄今爲止我認爲最好的答案。我投了答案,但不能接受它作爲最好的答案,因爲我不相信它。或者,我應該接受它嗎? – Adelin

2

我會推薦使用Yeoman,因爲我認爲開發者也是如此(他們主張很多,請查看他們的gPlus頁面或他們的video)。它允許腳手架(按照​​的結構),測試,通過JS服務器進行實時預覽以及部署 - 它將所有.js文件連接在一起,避免了多個請求的問題。一探究竟!

+0

我會檢查出來的,謝謝你的回答。 – Adelin

4

對於一個大型項目,我可以推薦每個模塊使用一個目錄,每個「東西」(服務,價值,工廠,控制器...)一個文件。應該將Html分支與其各自的指令或控制器一起存儲在每個模塊目錄中。

我們一直在使用這種方法了一段時間,它是真正的工作了罰款。該項目由maven構建(Java用於後端),並且所有js文件在每個角度應用程序中連接成一個文件,另外還有一個用於角度應用程序之間共享的組件的文件。如果您是maven,請查看yuicompressor-maven-plugin中的聚合。

因爲我們每個模塊有幾個js文件,所以我們需要一種方法來創建一個模塊,並且在每個js文件中註冊「thing」之前。

我們想出的解決方案是在每個模塊目錄中用模塊創建語句添加一個名爲0-module.js的文件。 yuicompressor-maven-plugin將首先添加到聚合文件中。

示例文件結構:

mymodule/ 
    0-module.js 
     >angular.module('mymodule', []); //Create module 
    MyController.js 
     >angular.module('mymodule').controller("MyController", [... // Register MyController 
    myTemplate.html