Quale metodo dovrei usare per avviare manualmente il mio AngularJS?

Question

Ho visto quanto segue:

angular.bootstrap(document, ['TodoApp']); 
angular.bootstrap(angular.element("body")[0], ['TodoApp']); 

anche la documentazione AngularJS menzioni questo che io non capisco.

angular.element(document).ready(function() { 
    angular.bootstrap(document); 
    }); 

C'è qualche differenza tra questi metodi? In particolare, qual è l'ultimo metodo da parte dei documenti Angular? È meglio usare l'una rispetto all'altra?

Answer 1

Sono più o meno lo stesso, con alcune differenze:

---

angular.bootstrap(document, ['TodoApp']); 

Ciò funzionerà se avete i vostri script caricati alla fine della pagina (anziché nell'intestazione).

Altrimenti, il DOM non verrà caricato al momento di avviare l'applicazione (non ci sarà alcun modello da compilare, le direttive non avranno alcun effetto).

Questo funziona: plnkr

Questo non: plnkr

---

angular.bootstrap(angular.element("body")[0], ['TodoApp']); 

Lo stesso come prima, utilizzando body come radice dell'applicazione. Utilizza un selettore che non è disponibile in jqLite, quindi è necessario avere jQuery completo jQuery incluso nell'app.

non so qual è il vantaggio di utilizzare body invece document, ma probabilmente ha qualcosa a che fare con e2e test, come spiegato in questa comment

plknr

---

angular.element(document).ready(function() { 
    angular.bootstrap(document); 
}); 

Questo in realtà attende il caricamento del DOM, quindi funzionerà anche se includi te r script nell'intestazione.

Questo è fondamentalmente lo stesso come jQuery di $(document).ready(, ma usando jqLite s' angular.element.

---

Nell'ultimo esempio, senza moduli vengono passati alla funzione di bootstrap, molto probabilmente avrete bisogno di dichiarare il vostro modulo principale, a meno che la vostra applicazione consiste solo su controller nello spazio dei nomi globale.

Quindi l'ultima opzione sarà come il seguente, al fine di essere simile agli altri due:

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

plknr

immagino che la maggior parte del tempo la scommessa più sicura sta usando questa ultima approccio.