AngularJS: penataan aplikasi web dengan banyak aplikasi

Blogosphere memiliki sejumlah artikel tentang topik pedoman penataan aplikasi AngularJS seperti ini (dan lainnya):

• 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

Namun, satu skenario yang belum saya temukan untuk pedoman dan praktik terbaik adalah kasus di mana Anda memiliki aplikasi web besar yang berisi beberapa aplikasi "spa mini", dan aplikasi spa mini semua berbagi sejumlah kode tertentu.

Saya tidak merujuk pada kasus mencoba memiliki banyak ng-appdeklarasi pada halaman yang sama; alih-alih, maksud saya bagian berbeda dari situs besar yang memiliki ng-appdeklarasi unik dan tersendiri .

Seperti yang ditulis Scott Allen dalam blog OdeToCode- nya:

Satu skenario yang belum saya temukan ditangani dengan sangat baik adalah skenario di mana beberapa aplikasi ada di aplikasi web yang lebih besar dan memerlukan beberapa kode bersama pada klien.

Adakah pendekatan yang direkomendasikan untuk diambil, perangkap yang harus dihindari, atau struktur sampel skenario yang bagus yang bisa Anda tunjukkan?

Pembaruan - 9/10/2015
Salah satu proyek dengan strategi organisasi yang menarik adalah MEAN.JS dan folder modulnya.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Contoh lain adalah dari contoh ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Berikut adalah desain yang saya kerjakan. Saya merasakan manfaatnya pada dua proyek besar yang saya bangun dan sejauh ini tidak ada yang berhasil.

Struktur Folder

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/

• Konfigurasikan kerangka web server Anda untuk menemukan apps/app1/index.htmlkapan permintaan /app1masuk. Gunakan URL yang ramah (mis. the-first-application/Alih-alih app1/dan petakan menggunakan teknologi server Anda jika diperlukan.
• Teknologi server Anda harus menyertakan global.htmldi index.htmlkarena mengandung vendor termasuk (lihat di bawah).
• Sertakan aset yang diperlukan oleh aplikasi masing-masing di index.html(lihat di bawah).
• Masukkan ng-appdan root <div ui-view></div>di index.html.
• Setiap aplikasi dan lib adalah modul sudut terpisah.
• Setiap aplikasi mendapatkan <app-name>.module.jsfile yang berisi definisi modul sudut dan daftar ketergantungan.
• Setiap aplikasi mendapatkan <app-name>.jsfile yang berisi konfigurasi modul dan menjalankan blok, dan konfigurasi rute sebagai bagian dari itu.
• Setiap aplikasi mendapatkan partsfolder yang berisi pengontrol, tampilan, layanan, dan arahan aplikasi dalam struktur yang masuk akal untuk aplikasi tertentu . Saya tidak menganggap sub-folder seperti controllers/, views/dll bermanfaat, karena mereka tidak skala, tetapi YMMV.
• Libs mengikuti struktur yang sama dengan aplikasi, tetapi meninggalkan hal-hal yang tidak mereka butuhkan (jelas).

Mulailah dengan layanan dan arahan dalam aplikasi tempat mereka digunakan. Segera setelah Anda memerlukan sesuatu di aplikasi lain juga, refactor ke perpustakaan. Cobalah untuk membuat pustaka yang konsisten secara fungsional, bukan hanya pustaka semua direktif atau semua layanan.

Aktiva

Saya mengecilkan file JS dan CSS untuk rilis build tetapi bekerja dengan file yang tidak ditentukan selama pengembangan. Berikut ini adalah pengaturan yang mendukung ini:

• Kelola vendor termasuk secara global di global.html. Dengan cara ini, barang-barang berat dapat dimuat dari cache saat bernavigasi di antara SPA. Pastikan caching berfungsi dengan baik.
• Aset Per-SPA didefinisikan dalam index.html. Ini seharusnya hanya menyertakan file khusus aplikasi serta pustaka yang digunakan.

Struktur folder di atas memudahkan untuk menemukan file yang tepat untuk langkah-langkah membangun minifikasi.

Aplikasi Halaman Tunggal (SPA) tidak benar-benar dimaksudkan untuk digunakan seperti yang Anda sarankan dengan aplikasi yang sangat besar dan beberapa mini-SPA di dalam aplikasi utama. Masalah terbesar adalah waktu pemuatan halaman karena semuanya harus dimuat di depan.

Salah satu cara untuk mengatasi ini adalah menggunakan halaman navigasi yang akan membawa Anda ke masing-masing SPA. Halaman navigasi akan cukup ringan, dan kemudian Anda hanya akan memuat satu SPA pada satu waktu berdasarkan apa yang dipilih. Anda dapat memberikan bilah tautan dengan tautan navigasi di dalam masing-masing SPA Anda sehingga pengguna tidak selalu harus kembali ke halaman navigasi ketika mereka harus pergi ke area lain.

Menggunakan pendekatan ini dapat menciptakan beberapa tantangan dengan informasi yang bertahan di seluruh SPA. Tapi kita berbicara tentang sesuatu yang tidak ingin dilakukan oleh SPA. Ada beberapa kerangka kerja yang dapat membantu dengan kegigihan data sisi klien. Breeze adalah yang pertama terlintas dalam pikiran, tetapi ada yang lain.

Mengenai tata letak - beberapa pertanyaan Pemrogram membahas tata letak proyek besar, tergantung pada kebutuhan khusus Anda. Saya menemukan yang ini dan yang ini . Tidak ada yang ajaib tentang SPA yang akan memengaruhi tata letak aplikasi Anda di luar apa yang sudah dijawab dalam pertanyaan itu.

Yang mengatakan, ada pendekatan berbeda yang paling cocok untuk proyek yang berbeda. Saya akan merekomendasikan tetap dengan tata letak dasar yang disediakan oleh proyek seed angular. Buat folder terpisah dari yang disediakan untuk paket kustom Anda dan kode sumber. Dan di dalam folder sumber Anda, gunakan tata letak proyek yang masuk akal untuk kebutuhan Anda.

Jika aplikasi Anda memerlukan beberapa deklarasi aplikasi-ng di halaman yang sama, maka Anda perlu mem-bootstrap modul AngularJS secara manual, dengan menyuntikkan nama modul seperti yang ditunjukkan di bawah ini:

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

Plunker ini menguraikan bagaimana kita bisa secara manual mem-bootstrap AngularJS.