2013-11-14 52 views
7

我最近一直在挖這個CommonJS與AMD的戰鬥,這是我的發現... (順便說一句,我不是在這裏講道我分享我的想法得到一些建設性的見解...) RequireJS給我的Angular模塊帶來了很多複雜性,它對我來說是錯誤的,因爲它是一個模塊在模塊中的包裝... Browserify的方式更乾淨,但要使它與每個事情,你需要讓你所有的依賴和你的依賴關係被正確地實現,不幸的是我們不能生活在一個完美的世界中......所以你必須要墊起和墊住Shimmed Libs的內在依賴......我不是一個額外複雜的大粉絲...AngularJS RequireJS Browserify和Javascript模塊/全球範圍的噩夢

我目前的方式(並受到所有你的建設性批評...)

我有一個grunt文件連接和縮小我的所有資源,像BreezeJS,$,Q,Ladda等庫。 。在全球範圍內泄漏...... 然後我聲明瞭這些全局這種類型的模塊:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

後在我的應用我有「Angularify」依賴工作,我還沒有在一隊使用這種技術我想知道這是否爲某些人發射了一些紅燈,並且他們是否會解釋爲什麼......謝謝你的時間。

+1

我傾向於同意,它並沒有意義的使用需要角。 – Polaris878

+3

我在考慮做同樣的事情,因爲requirejs和browserify會在使用angular.js進行開發時增加更多開銷。 –

+0

我有一個開放的功能請求似乎獲得一些牽引:https://github.com/angular/angular.js/issues/5410我的潛在解決方案的寫作:https://github.com/NathanielAJohnson/angularAMD/ wiki/Proposed-Solution –

回答

1

根據我對inclusion of an AMD loader的功能要求作爲附加ng模塊的一部分。

Angular帶有一個功能,該功能允許用戶創建模塊定義並稍後通過字符串標識符查找實體,如控制器。 Angular不具備加載存儲在單獨文件中的腳本的能力,這意味着您剩下四個選項:

  1. 將所有JavaScript存儲在單個文件中。
  2. 將您的javascript分隔爲單獨的文件併爲每個文件添加腳本標記。
  3. 使用AMD文件加載器(如requireJS)來管理腳本文件及其依賴項。
  4. 使用像browserify這樣的預編譯器將nodejs樣式文件合併到單個腳本文件中。

隨着項目的發展,文件變得更加難以管理,不僅僅因爲它們的大小,而且因爲模塊之間的依賴性變得更加複雜。大型項目也可以從AMD加載器的延遲加載中受益。

AMD模塊加載器列出了在運行此文件之前需要存在的依賴關係。問題是AMD的依賴關係接近Angular使用的注入列表,但並不完全一樣。一個問題可以看出,在此代碼:

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

在上面說,確保angular運行此功能之前進行初始化的定義語句。 angular.module聲明說要查找'$ scope'和'myService'並將它們注入變量$scopemyService。問題是,AMD加載器可能沒有初始化定義myApp.services的文件,在這個文件中,你可以假設定義爲myService,因爲它沒有出現在上面的define語句中。這造成注入列表和AMD依賴列表之間的巨大斷開。不僅難以分辨'myApp'。服務;已經被加載,但是很難說'myApp.services'中有哪些特定的組件可用。 IOW是'myService'加載和注射?

我當前使用requirejs形式的選項#3,因爲我需要能夠通過路由動態加載控制器(請參閱第一個鏈接)。而且,我現在使用的應用程序的大小使瀏覽器不可行,因爲有很多頁面。然而,我確實認爲這是次優的,但目前我沒有看到任何其他選擇。
從實際的角度來看,我爲每個文件定義一個注射點。我也嘗試使所有可注入數組與匹配require數組。這不是必需的,但它使代碼更易於維護。

我發現這些文章很有幫助在寫這篇:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx