Paradigma corretto per la miscelazione del codice angolare con codice esterno

Question

Newbie angolare qui. Sto cercando di capire il paradigma da utilizzare durante lo sviluppo di un'app Angular in modo da poter utilizzare le librerie esterne mantenendo l'app Angular riutilizzabile.

quindi immaginare ho un form che utilizza ng-conferma:

<form ng-submit="submit()">...<!--code goes here --></form> 

E poi all'interno del corrispondente ng-app e ng-controller (assumere quelli sono dichiarati in un elemento padre), ho ottenuto il mio submit funzione. Ma dicono che, in questa pagina soltanto, voglio usare una libreria avviso personalizzato dopo la presentazione:

$scope.submit = function(){ 
// code goes here to submit form data 
//now tell the user that save was successful 
customAlertLibrary.alert("your data has been saved") 
} 

Ora che non è codice riutilizzabile, è vero? Potrei voler riutilizzare questo ng-app su un'altra pagina per modificare e inviare dati, ma non voglio usare la libreria di avvisi personalizzata. Sembra che tu sia intrappolato perché l'attributo ng-submit ti limita a funzioni all'interno del corrispondente ng-app, non a funzioni esterne. Allora, qual è il modo corretto di invocare un altro codice Javascript insieme al mio codice angolare senza inserirlo nel modello?

Answer 1

Questa domanda è molto simile a this question about making lodash available in templates. Esistono molti modi per aggiungere codice o strutture dati esterni (o in-app) al tuo ambito angolare. Io preferisco aggiungere roba per un fine particolare di ciascun ambito individuale, e general-purpose utilities (such as lodash or momentjs) globally:

app 
.run(['$rootScope', function($rootScope) { 
    $rootScope._ = _; 
    $rootScope.moment= moment; 

    // or: 
    // $rootScope.util = { 
    //  _: _, 
    //  moment: moment 
    // }; 
}); 

Answer 2

Se customAlertLibrary non è fondamentale per la vostra applicazione, direi che fare qualcosa di simile

$scope.submit = function(){ 
    // code goes here to submit form data 
    //now tell the user that save was successful 
    if ($window.customAlertLibrary) { 
    customAlertLibrary.alert("your data has been saved"); 
    } 
} 

In caso contrario, Suggerirei di usare Bower per gestire le dipendenze. I pacchetti vengono installati con Bower e la tua app può essere un pacchetto che viene incluso e installato da altre app. Qualsiasi dipendenza della tua app è stata installata (l'utente deve ancora includerla sul proprio terminale in un tag <script>)