Risoluzione applicazione angolare, non controller, per dati precaricati asincroni

Question

This domanda, tra molti altri, di utilizzare un livello controller resolve per dati asincroni che devono essere caricati prima dell'avvio di un'applicazione.

ho un sacco di controller, con tutti i percorsi definiti separatamente in ciascun modulo ... usando resolve sarebbe ridicolo a me se tutti dipendono i dati. Ho anche direttive che dipendono dai dati (ricerca di completamento automatico, ecc.).

non c'è un modo migliore per farlo: "dati di carico (utilizzando un servizio angolare) prima di ogni controller viene visualizzato"? Ho bisogno che l'applicazione carica, asincronizza il recupero dei dati e io uso ng-show con alcuni dati di rootScope che mostrano sia il caricamento che il modello del controller. Ho provato a inserirlo in app.run, ma non riuscivo a farlo funzionare correttamente ... qualsiasi cosa asincrona in quel blocco sembra recuperare l'applicazione.

Aiuto?

Answer 1

Ecco cosa ho fatto. Non sono un grande fan di questa soluzione, ma è la migliore che abbia potuto fare finora.

Prima di tutto, è possibile avere più resolves in ogni percorso, in questo modo:

resolve: { 
    UserAccount: app.resolves('UserAccount'), 
    Posts: app.resolves('Posts') 
} 

Dal momento che non si può iniettare servizi applicativi nel blocco di configurazione, ho creato un grande vecchio oggetto in un altro file che contiene scorciatoie per i miei servizi:

app.resolves = (function(){ 
    // Resolves allow us to use `deferred`s to only 
    // load our template after the data it requires 
    // has been provided by the server. 
    var resolve = {}; 

    resolve.UserAccount = 
    ['Users', function (Users) { 
    return Users.fetchActive(); 
    }]; 

    resolve.Posts = 
    ['Posts', function(Posts) { 
    return Posts.getAllPosts(); 
    }]; 

    // Public API 
    // @param string name 
    return function (name) { 
    return resolve[name] 
    }; 
})(); 

Answer 2

penso che, dal momento che non c'è modo ovvio per configurazione a livello di app determinazione fatta, la cosa migliore che puoi fare è effettivamente modificare le funzionalità $routeProvider utilizzando un decoratore. In questo modo puoi verificare se una configurazione resolve è impostata su ciascuna rotta di applicazione e aggiungere/unire una promessa speciale di risoluzione che caricherà dati asincroni o proseguirà con i dati necessari, con il vantaggio di avere un punto centrale da testare o modificare quando bisogno.

sto lottando con questo stesso problema in questo momento. Proverò a creare un codice generico/riutilizzabile e a pubblicare la mia soluzione molto presto su GitHub. Cercherò di aggiornare questa risposta con un esempio adeguato anche qui.

Answer 3

So che questa domanda è vecchia, ma dal momento che non c'è risposta accettata, né uno pulito, sto cercando di risolvere anche questo.

La mancanza di avere uno stato risolutezza per app mi è stato bugging per un po 'di tempo, e questa è la soluzione che ho finalmente si avvicinò con: http://jsfiddle.net/gabrielcatalin/cvyq0oys/

In breve, ho creato un modulo angolare Enhancer (decoratore), che supporta altri 2 metodi: resolve() e ready(). Il frammento AngularEnhancer ha solo bisogno di essere caricato dopo l'angular.js ha caricati e prima della realizzazione, in questo modo:

<script type="text/javascript" src="angular.js"> 
<script type="text/javascript" src="angularEnhancer.js"> 
<script type="text/javascript" src="main.js"> 

Questo è come un'implementazione sarà:

angular.module('myApp', []) 
    .ready(function() { 
     alert('The app is ready to be used!'); 
    }) 
    .resolve(['$q', function ($q) { 
     // The resolve can wait for a promise to be resolved 
     var differed = $q.defer(); 

     setTimeout(function() { 
      differed.resolve();  
     }, 1000); 

     return differed.promise; 

     // Or a true value 
     // return true; 

     // Or even a truish value 
     // return 'value'; 
    }]) 
    .ready(function() { 
     // The order of where the ready() appear doesn't matter 
     alert('This is just another alert to show that it can have as many as possible!'); 
    }); 

e il codice html:

<body> 
    <div ng-if="!appReady" class="splash-screen">This is just the splash screen!</div> 
    <div ng-if="appReady">Welcome to the app!</div> 

    <script> 
     angular.element(document).ready(function() { 
      angular.bootstrap(document, ['myApp']); 
     }); 
    </script> 
</body> 

Spero di vedere alcuni commenti da voi ragazzi!