AngularJS: come nidificare le applicazioni all'interno di un'app angolare

Question

Ho lavorato su un progetto che è più simile a un framework e ha diverse app/moduli che è possibile installare. Guardalo come un appstore di base o in un negozio google.play. È una specie di applicazione intranet e tutti i moduli possono essere aggiunti al tuo account utente.

il framework è già in fase di sviluppo, ma ora mi sto occupando dell'idea di applicazioni/moduli. (link to a proof of concept in development, can be found here)

un'applicazione deve essere in qualche modo autonomo, e non in grado di includere improvvisamente script dal quadro, questo è perfettamente possibile da loro strutturazione in moduli separati in questo modo:

angular.module('myApp', []); 

tuttavia, un'applicazione può avere modelli, script, css e può essere eseguito su un server separato, quindi sto cercando il modo migliore per recuperare lo script (s) e cssfile (s) e caricarli dinamicamente nell'app quando l'utente avvia il app dentro dal framework.

• Attualmente sto strutturando le applicazioni come se avessero un modello principale, ad esempio www.framework.com/apps/myapp/views/app.html, per semplicità i raggrupparli in fasci script in 1 file di script per ogni applicazione, per cui v'è anche un www.framework.com/apps/myapp/script.js di essere inclusi.

Il framework contiene un modello che carica le app e un appController. Il modello contiene questo pezzo:

<div data-ng-controller="AppController" data-ng-include="app.appTemplate"> 
    <div>loading...</div> 
</div> 

questo si lega essenzialmente alla $scope.app.appTemplate che viene aggiornato quando tutti gli script vengono caricati, quindi prima si vede un modello di carico, più tardi, dopo gli script sono inclusi nella pagina aggiorna il app.appTemplate al modello principale sopra citato di un'applicazione.

durante il caricamento del primo modello di indice funziona, questo modello è attualmente caricato con il AppController dal framework, quindi sta utilizzando il $scope del framework e non è il proprio script.

devo ancora iniziare in qualche modo proprio modulo angolare della app, e lasciare che su di essa la propria senza correre nulla nel quadro di 'farla funzionare'

Sto ancora cercando di capire come meglio carico i file javascript dipendenti (probabilmente utilizzare requrejs o altro dipendenza loader) ma non ho attualmente idea di come 'stivale' l'applicazione senza lavorare dall'interno AppController

EDIT del quadro

Ho creato un piccolo progetto dimostrativo per mostrare i problemi a portata di mano, full code is visible at git-hub nel momento in cui questo progetto fa alcune cose programmate, l'idea sarebbe quella di rendere quelli meno codificati quando ho la prova del concetto giusto, ora è tutto sul caricamento delle applicazioni all'interno del framework. se è possibile, posso pensare a dove ottenere i nomi di URL e applicazioni da ...

Answer 1

Puoi avviare un modulo all'interno di un altro modulo bootstrap. Bootstrapping compila la vista e associa un rootScope ad esso, attraversando il suo percorso attraverso il DOM e impostando i bind di scope ed eseguendo le funzioni di collegamento della direttiva fino in fondo. Se lo fai due volte, avrai dei problemi.

Probabilmente dovresti ripensare la tua architettura. Penso che forse la parola "modulo" o "app" per quanto riguarda Angular sia un termine improprio e ti stia conducendo sulla strada sbagliata.

Ogni "app installata dall'utente" nella tua applicazione dovrebbe probabilmente essere controllata da un controller nel modulo dell'app o registrata in un modulo a cui fa riferimento il modulo dell'app. Quindi non dovresti "avviare più app", dovresti solo avviarne uno, fare riferimento agli altri moduli, quindi utilizzare Controller da quei moduli per controllare parti della tua visualizzazione sullo schermo.

Quello che faresti è quando è stato installato un nuovo "widget", è necessario registrare il suo file di modulo (.js) con il sistema, che conterrà un controller chiamato WidgetCtrl, quindi quando la pagina verrà caricata, tu " d fai riferimento al modulo del widget sul modulo dell'app. Da lì dovrebbe essere disponibile per l'assegnazione dinamica agli elementi usando ng-controller e/o ng-include.

Spero che abbia senso.

Answer 2

beh, se ciascuna sotto-app si trova nel proprio modulo, è possibile utilizzare angular.bootstrap per caricare dinamicamente quel modulo.quando l'URL di uno specifico carichi app, è possibile recuperare lo script (s) necessario, poi, quando la promessa si risolve, si può fare qualcosa sulla falsariga di:

// grab a reference to the element where you'll be loading the sub-app 
var subapp = document.getElementById('subapp-id'); 

// assuming the script you get back contains an angular module declaration named 
// 'subapp', manually start the sub-app 
angular.bootstrap(angular.element(subapp), ['subapp']); 

Spero che questo aiuti

Answer 3

Contrariamente alla risposta attualmente accettata, è effettivamente possibile.

Stavo lavorando su un problema simile e la risposta suggerita non era accettabile nel mio caso. Avevo già scritto pagine con più applicazioni, ma erano anni fa e le app erano indipendenti l'una dall'altra. Ci sono due cose da fare in pratica:

• Dire all'applicazione principale di ignorare un elemento figlio.
• Bootstrap l'elemento figlio.

C'è un attributo ng-non-bindable che indica semplicemente ad AngularJS di ignorare l'elemento. Questo gestisce il nostro primo problema.

Tuttavia, quando si tenta di eseguire il bootstrap dell'elemento figlio; AngularJS genera un errore che ti dice che è già avviato (almeno per me, versione 1.2.13). Il seguente trucco fa il lavoro:

<div ng-non-bindable data-$injector=""> 
    <div id="bootstrap-me"> 
    <script src="/path/to/app.js"></script> 
    <div ng-include="'/path/to/app.html'"/> 
    </div> 
</div> 

Questa soluzione non è perfetta. Idealmente, l'attributo ng-non-bindable può aggiungere dati richiesti - $ injector ad elemento. Sto per creare una funzione e, si spera, una richiesta di richiamo per AngularJS.

---

non ho avuto la possibilità di fare una richiesta di pull. Apparentemente e prevedibilmente dovrei dire, alcuni interni sono cambiati ma ng-non-bindable sta ancora lavorando alla versione 1.3.13 usando il codice demo di Ventzy Kunev (grazie ancora, vedi link sotto).

Answer 4

Simile alla risposta di UnicodeSnowman sopra, un'altra potenziale soluzione che sembra funzionare per le mie esigenze (ho creato un editor Angular live su un sito di documentazione) è di gestire manualmente il processo di bootstrap avendo uno <div id="demos"> separato dal principale <div id="myApp">.

This article è stato molto utile per farlo funzionare correttamente.

processo generale

• Crea la tua applicazione principale (ho scelto di bootstrap manualmente, ma si può essere in grado di utilizzare ng-app per questa parte)
• creare una nuova struttura HTML/app (nel mio caso l'applicazione demo):
• aggiungerlo ai demo div con un ID personalizzato: someCoolDemoContainer
• bootstarp l'applicazione appena creata
• spostarlo di nuovo in app originale (per il layout/scopi di posizionamento)

Esempio di codice(non testato; mostra solo processo di base)

<div id="myApp"> 
    <h1>Demo</h1> 

    <p>Click the button below to checkout the cool demo!</p> 

    <button ng-click="showDemo()">Show Demo</button> 

    <div class='insertion-point'></div> 
</div> 

<div id="demos"> 
</div> 

<script type="text/javascript"> 
    /* 
    * Init/bootstrap our main app 
    */ 
    var appContainer = document.getElementById('myApp'); 

    angular.module('myApp', ['myDependency']); 
    angular.bootstrap(appContainer, ['myApp']); 

    // Do lots of other things like adding controllers/models/etc. 

    /* 
    * Init/bootstrap our demo app when the user clicks a button 
    */ 
    function showDemo() { 
     // Append our demo code 
     $('#demos').append('<div id="someCoolDemoContainer">Angular app code goes here</div>'); 

     // Bootstrap the new app 
     var demoContainer = document.getElementById('someCoolDemoContainer'); 
     angular.module('someCoolDemo', ['myDependency']); 
     angular.module('someCoolDemo').controller('myController', function() { ... }); 

     angular.bootstrap(demoContainer, ['someCoolDemo']); 

     // Re-insert it back into the DOM where you want it 
     $('#myApp').find('.insertion-point').append($('#someCoolDemoContainer')); 
    } 
</script>