AngularJS: Birden fazla ng-uygulaması ile bir web uygulaması yapılandırmak

Blogosferde, bunlar gibi AngularJS uygulaması yapılandırma kılavuzları konusunda bir dizi makale vardır:

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

Ancak, kurallar ve en iyi uygulamalar için henüz görmediğim bir senaryo, birden fazla "mini-spa" uygulaması içeren geniş bir web uygulamasına sahip olmanız ve mini-spa uygulamalarının belirli bir miktarda kodu paylaşması durumudur.

ng-appAynı sayfada birden fazla beyanda bulunmaya çalışıyorum . bunun yerine, kendilerine özgü ng-appbildirimleri olan büyük bir sitenin farklı bölümlerini kastediyorum .

Scott Allen'ın OdeToCode blogunda yazdığı gibi :

Çok iyi ele almadığım bir senaryo, aynı büyük web uygulamasında birden fazla uygulamanın bulunduğu ve istemcide bazı paylaşılan kodlar gerektiren senaryodur.

Alınması gereken herhangi bir önerilen yaklaşım var mı, kaçınılması gereken tuzaklar veya bu senaryonun iyi örnek yapıları var mı?

Güncelleme - 9/10/2015
İlginç bir organizasyon stratejisine sahip projelerden biri MEAN.JS ve modülleri klasörü.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Başka bir örnek ise ASP.NET Music Store SPA örneğindendir. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

İşte birlikte çalıştığım tasarım. Yaptığım ve şu ana kadar hiçbir yol bloğuna vurmadığım iki büyük projede faydalı buldum.

Klasör Yapısı

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• apps/app1/index.htmlBir isteğin ne zaman /app1geleceğini bulmak için sunucunuzun web çerçevesini yapılandırın . Dost URL'ler kullanın (örneğin the-first-application/, app1/gerekirse ve yerine sunucu teknolojinizi kullanarak eşleyin.
• Sunucu teknolojisi içermelidir global.htmliçinde index.htmlo satıcının içerir içerdiğinden (aşağıya bakınız).
• İlgili uygulama için gereken varlıkları dahil edin index.html(aşağıya bakın).
• Put ng-appve kök <div ui-view></div>içinde index.html.
• Her uygulama ve lib ayrı bir açısal modül.
• Her uygulama <app-name>.module.js, açısal modül tanımını ve bağımlılık listesini içeren bir dosya alır .
• Her uygulama <app-name>.js, modüllerin config ve run bloklarını ve bununla birlikte routing config'i içeren bir dosya alır .
• Her uygulama parts, uygulamaların denetleyicilerini, görünümlerini, hizmetlerini ve yönergelerini , belirli bir uygulama için anlamlı olan bir yapıda içeren bir klasör alır . Ben alt klasörler gibi düşünmüyoruz controllers/, views/onlar ölçekli değil, çünkü yararlı vb ymmv.
• Lib'ler uygulamalar ile aynı yapıyı takip eder, ancak ihtiyaç duymadıkları şeyleri (açıkça) dışarıda bırakırlar.

Kullanıldıkları uygulama içindeki hizmetler ve direktiflerle başlayın. Başka bir uygulamada da bir şeye ihtiyacınız olursa, bir kütüphaneye yeniden bakın. Yalnızca tüm yönergeler veya tüm hizmetler içeren kütüphaneler değil, işlevsel olarak tutarlı kütüphaneler oluşturmaya çalışın.

Varlıklar

Hem JS hem de CSS dosyalarını sürüm sürümleri için küçültüyorum, ancak geliştirme sırasında küçültülmüş dosyalarla çalışıyorum. İşte bunu destekleyen bir kurulum:

• Satıcıyı genel olarak yönetme yönetin global.html. Bu şekilde, SPA'lar arasında gezinirken ağır şeyler önbellekten yüklenebilir. Önbelleğe almanın uygun şekilde çalıştığından emin olun.
• SPA başına varlıklar index.html. Bu yalnızca kullanılan kitaplıkların yanı sıra uygulamaya özel dosyaları da içermelidir.

Yukarıdaki klasör yapısı, küçük oluşturma derlemesi adımları için doğru dosyaları bulmayı kolaylaştırır.

Tek Sayfa Uygulamalar (SPA), gerçekten büyük bir uygulama ve ana uygulama içindeki birden fazla mini-SPA ile önerdiğiniz şekilde kullanılmaya yönelik değildir. En büyük sorun sayfa yükleme süreleri olacak, çünkü her şey önden yüklenmeli.

Bununla baş etmenin bir yolu, sizi bireysel SPA'lara götürecek bir gezinme sayfası kullanmaktır. Gezinme sayfası oldukça hafif olacak ve seçilene bağlı olarak bir seferde yalnızca bir SPA yükleyeceksiniz. SPA'larınızın her birinde gezinti bağlantılarına sahip bir bağlantı çubuğu sağlayabilirsiniz, böylece kullanıcıların başka bir alana gitmeleri gerektiğinde her zaman gezinme sayfasına geri gitmeleri gerekmez.

Bu yaklaşımı kullanmak, SPA'larda devam eden bilgilerle bazı zorluklar yaratabilir. Ancak SPA'ların yapmak istemediği bir şeyden bahsediyoruz. İstemci tarafında veri kalıcılığına yardımcı olabilecek bazı çerçeveler var. Esin akla gelen ilk şey, ama başkaları da var.

Yerleşim düzeniyle ilgili olarak - birkaç Programcının sorusu, özel gereksinimlerinize bağlı olarak büyük proje düzenini ele alır. Ben rastladım bu bir ve bu bir . SPA'lar hakkında, uygulama düzeninizi, bu sorularda cevaplanmış olanların ötesinde etkileyebilecek sihirli bir şey yoktur.

Bununla birlikte, farklı projeler için en iyi sonuç veren farklı yaklaşımlar vardır. Açısal tohum projesinin sağladığı temel düzenlemeye bağlı kalmanızı tavsiye ederim. Özel paketleriniz ve kaynak kodunuz için sağlananlardan ayrı klasörler oluşturun. Kaynak klasörünüzde ihtiyaçlarınız için anlamlı bir proje düzeni kullanın.

Uygulamanızın aynı sayfada birden fazla ng-app bildirimi olması gerekiyorsa, aşağıda gösterildiği gibi bir modül adı enjekte ederek AngularJS modülünü manuel olarak atmanız gerekir:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Bu dalgıç , AngularJS'yi manuel olarak nasıl önyükleyebileceğimizi ele alıyor.