Require.js'yi Angular.js ile kullanmak mantıklı mı? [kapalı]

Angular.js'ye yeni başladım ve Backbone.js'den ne kadar farklı olduğunu anlamaya çalışıyorum ... Backbone'u kullanırken Require.js ile paketlerimizin bağımlılıklarını yönetirdik. Aynı şeyi Angular.js ile yapmak anlamlı mı?

Evet kullanmak mantıklı angular.jsbirlikte require.jskullanabileceğiniz burada require.jsbileşenleri modüler hale için.

Kullanan bir tohum projesi var both angular.js and require.js.

OP'nin sorusunun gerçekten düşündüğünü ifade etmek için:

Esas olarak Açısal 1.x'de bir uygulama oluşturuyorsam ve (örtük olarak) Grunt / Gulp / Broccoli ve Bower / NPM döneminde bunu yapıyorsam ve belki de birkaç ek kütüphane bağımlılığım var, Require olmadan Angular kullanarak ne elde ötesinde değer?

Veya başka bir yol koyun:

" Temel komut dosyası yüklemeyi ele almamın başka yolları varsa , vanilya açısal temel açısal bileşen yüklemeyi etkili bir şekilde yönetmeyi gerektiriyor mu? "

Ve bunun temel cevabının şu olduğuna inanıyorum: "Başka bir şey olmadıkça ve / veya daha yeni, daha modern araçlar kullanamazsanız değil."

Başlangıçta net olalım: RequireJS, çok önemli sorunları çözen ve bizi daha ölçeklenebilir, daha profesyonel Javascript uygulamalarına doğru ilerlediğimiz yolda başlatan harika bir araçtır. Önemlisi, birçok insanın ilk kez modülerleşme ve küresel kapsam dışına çıkma kavramıyla karşılaşmasıydı. Bu nedenle, ölçeklenmesi gereken bir Javascript uygulaması oluşturacaksanız, Require ve AMD modeli bunu yapmak için kötü araçlar değildir.

Ancak, Angular hakkında Require / AMD'yi özellikle iyi yapan bir şey var mı? Hayır. Aslında, Angular, AMD'nin temel modülerleştirme özelliklerini birçok açıdan gereksiz kılan kendi modülerleştirme ve kapsülleme desenini sağlar. Açısal modülleri AMD modeline entegre etmek imkansız değil, ama biraz ... titiz. Kesinlikle güzel bir şekilde entegre olmak için iki deseni almak için zaman harcayacaksınız.

Eğik ekibinin kendisinden bazı perspektif için, orada bu Brian Ford, Açısal Batarang yazarı ve Açısal çekirdek ekibinin artık bir üyesinden,:

RequireJS'yi AngularJS ile kullanmanızı önermiyorum. Kesinlikle mümkün olmasına rağmen, RequireJS'nin pratikte faydalı olduğu herhangi bir örnek görmedim.

Yani, AngularJS: Angular ve Require / AMD'nin çok özel sorusu dik ve üst üste binen yerlerde. Sen olabilir onları bir arada kullanmak, ancak özellikle açısal kendisi doğası / desenleri ile ilgili hiçbir neden yok.

Peki ya ölçeklenebilir Javascript uygulamaları için iç ve dış bağımlılıkların temel yönetimi? Require, benim için gerçekten kritik bir şey yapmıyor mu?

Bower ve NPM ve özellikle NPM'yi kontrol etmenizi öneririm. Bu araçların karşılaştırmalı faydaları hakkında kutsal bir savaş başlatmaya çalışmıyorum. Sadece şunu söylemek istiyorum: Bu kedinin cildinin başka yolları da var ve bu yollar AMD / Require'dan bile daha iyi olabilir . (Kesinlikle 2015 sonlarında, özellikle NPM, ES6 veya CommonJS modülleri ile birlikte çok daha popüler bir momentuma sahipler. İlgili SO sorusuna bakın .)

Tembel yüklemeye ne dersiniz?

Tembel yükleme ve tembel indirmenin farklı olduğunu unutmayın. Angular'ın tembel yüklemesi, onları doğrudan sunucudan çektiğiniz anlamına gelmez. Javascript otomasyonu ile Yeoman tarzı bir uygulamada, tüm shebang'ı tek bir dosyada birleştiriyor ve küçültüyorsunuz. Mevcutlar, ancak ihtiyaç olana kadar idam edilmemiş / başlatılmamışlardır. Bunu yapmaktan elde ettiğiniz hız ve bant genişliği iyileştirmeleri, belirli bir 20 hatlı denetleyicinin tembel olarak indirilmesiyle ilgili iddia edilen iyileştirmelerden ağır basar. Aslında, o denetleyicinin boşa harcanan ağ gecikmesi ve iletim yükü, denetleyicinin boyutundan daha büyük bir büyüklük sırası olacaktır.

Ancak diyelim ki, belki de uygulamanızın yönetici arayüzü gibi seyrek kullanılan parçaları için tembel indirmeye ihtiyacınız var. Bu çok meşru bir durum. Require bunu sizin için yapabilir. Ama orada da birçok diğer , potansiyel olarak daha esnek seçenekler aynı şeyi başarmak. Ve Angular 2.0, yönlendiriciye yerleşik olarak, bizim için bununla ilgilenecek . ( Ayrıntılar .)

Peki ya yerel geliştirici kutumdaki geliştirme sırasında?

Hepsini düzinelerce / yüzlerce script dosyalarımı index.html dosyasına elle eklemenize gerek kalmadan nasıl yükleyebilirim?

Yeoman'ın jeneratör açısalındaki alt jeneratörlere veya jeneratör- yontma açısalında bulunan otomasyon modellerine veya React için standart Webpack otomasyonuna bir göz atın. Bunlar, aşağıdakilerden birini temiz, ölçeklenebilir bir yol sağlar: bileşenleri bileşenlerin iskele edildiği anda dosyaları otomatik olarak eklemek veya belirli klasörlerde mevcutsa / belirli glob kalıplarıyla eşleşiyorsa, hepsini otomatik olarak yakalamak için. İkinci seçeneklere sahip olduğunuzda bir daha asla kendi script yüklemenizi düşünmeniz gerekmez.

Sonuç olarak?

Require, bazı şeyler için harika bir araçtır. Ancak mümkün olduğunca tahılla gidin ve endişelerinizi mümkün olduğunca ayırın. Angular'ın Angular'ın kendi modülerleştirme modeli hakkında endişelenmesine izin verin ve ES6 modüllerini veya CommonJS'yi genel bir modülerleştirme deseni olarak kullanmayı düşünün. Modern otomasyon araçlarının komut dosyası yükleme ve bağımlılık yönetimi konusunda endişelenmesine izin verin. Ve async tembel yüklemeye, diğer iki endişeyle karıştırmak yerine, granüler bir şekilde dikkat edin.

Bununla birlikte, Açısal uygulamalar geliştiriyor, ancak bir nedenle Javascript otomasyon araçlarını kullanmak için Node'yu makinenize yükleyemiyorsanız, Require iyi bir alternatif çözüm olabilir. Ve insanların kendi bağımlılıklarını veya bir şeylerini bildiren Açısal bileşenleri dinamik olarak yüklemek istedikleri gerçekten ayrıntılı kurulumlar gördüm. Ve muhtemelen bu problemi başka bir şekilde çözmeye çalışsam da, bu çok özel durum için fikrin değerlerini görebiliyorum.

Ama aksi halde ... sıfırdan başlayarak yeni bir Açısal uygulama ve modern bir otomasyon ortamı yaratmak için esneklik ile ... daha birçok başka, daha esnek, daha modern seçeneğiniz var.

(Gelişen JS sahnesine ayak uydurmak için tekrar tekrar güncellendi.)

Evet, mantıklı.

Açısal modüller, komut dosyası yükleme sırası veya tembel komut dosyası getirme sorununu çözmeye çalışmaz. Bu hedefler dikeydir ve her iki modül sistemi yan yana yaşayabilir ve hedeflerini gerçekleştirebilir.

Kaynak: Angular JS resmi web sitesi

Bu sübjektif bir soru olduğuna inanıyorum, bu yüzden sübjektif fikrimi sunacağım.

Angular'da yerleşik bir modülerleştirme mekanizması vardır. Uygulamanızı oluşturduğunuzda ilk yapacağınız şey

var app = angular.module("myApp");

ve sonra

app.directive(...);

app.controller(...);

app.service(...);

Eğer açısal için düzgün bir başlangıç ​​uygulaması olan açısal çekirdeğe bir göz attıysanız, direktifleri, hizmetleri, denetleyicileri vb. Farklı modüllere ayırdılar ve daha sonra bu modülleri ana uygulamanıza bağımlılık olarak yüklediler.

Gibi bir şey :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Açısal ayrıca tembel dosyaları değil, bu modülleri (belleğe) yükler.

Tembel yükleme komut dosyaları açısından, son derece büyük bir şey yazmazsanız dürüst olmak gerekirse, gereğinden fazla açısal yazdığınız kod miktarını azaltır çünkü bir overkill olurdu. Diğer birçok çerçevede yazılmış tipik bir uygulama, açısal olarak yazılırsa LOC'da yaklaşık% 30-50 oranında bir azalma beklenebilir.

RequireJS'yi AngularJS ile kullanmak mantıklıdır, ancak her birinin bağımlılık enjeksiyonu konusunda nasıl çalıştığını anlarsanız , her ikisi de bağımlılıkları enjekte etseler de, çok farklı şeyler enjekte ederler.

AngularJS, uygulamaları yeniden kullanmak için AngularJS modüllerini yeni oluşturulan bir modüle enjekte etmenizi sağlayan kendi bağımlılık sistemine sahiptir. Diyelim ki bir AngularJS filtresi "selam" uygulayan bir "ilk" modül oluşturdunuz:

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

Şimdi "selamlama" filtresini "elveda" filtresini uygulayan "ikinci" adlı başka bir modülde kullanmak istediğinizi varsayalım. Bunu "ilk" modülünü "ikinci" modülüne enjekte ederek yapabilirsiniz:

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

Mesele şu ki, RequireJS olmadan bu çalışmayı doğru bir şekilde yapmak için, "ikinci" AngularJS modülünü oluşturmadan önce "ilk" AngularJS modülünün sayfaya yüklendiğinden emin olmalısınız. Alıntılama belgeleri:

Bir modüle bağlı olarak, gerekli modül yüklenmeden önce gerekli modülün yüklenmesi gerektiği anlamına gelir.

Bu bağlamda, RequireJS, sayfalar arasında komut dosyaları enjekte etmenin temiz bir yolunu sağladığından, burada birbirleri arasındaki komut dosyası bağımlılıklarını düzenlemenize yardımcı olduğu için RequireJS'in size yardımcı olabileceği yer burasıdır.

"Birinci" ve "ikinci" AngularJS modüllerine geri dönersek, komut dosyası bağımlılıkları yüklemesinden yararlanmak için RequireJS'yi farklı dosyalardaki modülleri ayırarak nasıl yapabilirsiniz:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

"İkinci" AngularJS modülünün oluşturulması için "ilk" AngularJS modülünün yüklenmesi gereken RequireJS geri aramasının içeriği yürütülmeden önce enjekte edilecek "firstModule" dosyasına bağlı olduğumuzu görebilirsiniz.

Yan not: RequireJS geri çağırma işlevi içinde AngularJS kullanmak için "firstModule" ve "secondModule" dosyalarına bağımlılık olarak "açısal" enjekte edilmesi gerekir ve RequireJS yapılandırmasında "açısal" ı kütüphane koduyla eşleştirmek için RequireJS yapılandırmasında yapılandırılmalıdır. RequireJS avantajlarını yenmekle birlikte, AngularJS'i sayfaya geleneksel bir şekilde de yükleyebilirsiniz (komut dosyası etiketi).

Blog yazımda 2.0 sürümünden AngularJS çekirdeğinden RequireJS desteği almayla ilgili daha fazla ayrıntı.

"AngularJS ile RequireJS mantıklı gelmek" blog yazım dayanarak , işte link .

@Ganaraj'ın belirttiği gibi AngularJS'nin özünde bağımlılık enjeksiyonu vardır. RequireJS ile veya RequireJS olmadan oyuncak tohumu uygulamaları oluştururken, şahsen RequireJS'nin çoğu kullanım vakası için aşırı derecede ağır olduğunu gördüm.

Bu, RequireJS'nin komut dosyası yükleme yetenekleri ve geliştirme sırasında kod tabanınızı temiz tutması için yararlı olmadığı anlamına gelmez. R.js optimizer'ı ( https://github.com/jrburke/r.js ) bademle ( https://github.com/jrburke/almond ) birleştirmek çok ince bir betik yükleme hikayesi oluşturabilir. Bununla birlikte, bağımlılık yönetimi özellikleri uygulamanızın çekirdeğindeki açısal olarak önemli olmadığından, diğer istemci tarafını (HeadJS, LABjs, ...) veya hatta sunucu tarafını (MVC4 Bundler, ...) komut dosyası yükleme çözümlerini de değerlendirebilirsiniz özel uygulama için.

Evet, özellikle çok büyük SPA için.

Bazı senaryolarda RequireJS şarttır. Örneğin, Google Map API'yı da kullanan AngularJS kullanarak PhoneGap uygulamaları geliştiriyorum. RequireJS gibi AMD yükleyicisi olmadan uygulama, çevrimdışı olduğunda Google Map API komut dosyalarını kaynaklayamadığı için kilitlenir. Bir AMD yükleyici, kullanıcıya bir hata mesajı görüntüleme şansı veriyor.

Ancak, AngularJS ve RequireJS arasındaki entegrasyon biraz zor. Bunu daha az acı verici bir süreç haline getirmek için açısalAMD oluşturdum:

http://marcoslin.github.io/angularAMD/

Kısa cevap, mantıklı. Son zamanlarda bu konu ng-conf 2014'te tartışıldı. İşte bu konuyla ilgili konuşma:

http://www.youtube.com/watch?v=4yulGISBF8w

Tembel yükleme denetleyicileri ve yönergeleri vb. RequireJS, birleştirmeyi kolaylaştıran bir optimizasyon aracına sahiptir. Bkz. Http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Evet, Angular ile requirJS kullanmak mantıklı, birkaç teknik çözümü test etmek için birkaç gün geçirdim.

Sunucu Tarafında RequireJS ile Açısal Tohum Yaptım. Çok basit. SHIM gösterimini AMD için değil AMD için kullanmıyorum çünkü iki farklı Bağımlılık enjeksiyon sistemi ile başa çıkmanın çok zor olduğunu düşünüyorum.

Sunucuda js dosyalarını birleştirmek için grunt ve r.js kullanıyorum SHIM yapılandırma (bağımlılık) dosyasına bağlıdır. Bu yüzden benim app sadece bir js dosyası bakın.

Daha fazla bilgi için github Angular Seed'e gidin: https://github.com/matohawk/angular-seed-requirejs

Require.js kullanmaktan kaçınırım. Bunu yaptığımı gördüğüm uygulamalar, çok sayıda modül modeli mimarisini karıştırıyor. AMD, Açığa Çıkarma, IIFE'nin farklı lezzetleri, vb . LoadOnDemand Angular mod gibi talep üzerine yüklenmenin başka yolları da vardır . Başka şeyler eklemek, kodunuzu cruft ile doldurur ve düşük sinyal / gürültü oranı oluşturur ve kodunuzun okunmasını zorlaştırır.

Kullandığım yaklaşım şudur: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

Sayfada, kodun özelliklere ve ardından bileşen türüne göre bölündüğü AngularJS + RequireJS uygulamasının olası bir uygulaması gösterilmektedir.

Tarafından cevap Brian Ford

AngularJS'nin kendi modül sistemi vardır ve genellikle RJS gibi bir şeye ihtiyaç duymaz.

Referans: https://github.com/yeoman/generator-angular/issues/40

Açının hemen hemen modülerleştirildiğinden projenizin karmaşıklığına bağlı olduğunu düşünüyorum. Denetleyicileriniz eşlenebilir ve bu JavaScript sınıflarını index.html sayfanıza aktarabilirsiniz.

Ancak projeniz büyürse. Ya da böyle bir senaryoyu öngörüyorsunuz, açısal gereksinimlerle bütünleştirmelisiniz. Gelen bu yazıya böyle entegrasyonu için bir demo uygulaması görebilirsiniz.