Wie konfiguriert man den 'uiGmapgoogle-maps'-API-Schlüssel nach dem Bootstrap?

Question

Also verwende ich uiGmapgoogle-maps in meinem eckigen Projekt. Ich brauche die API-Schlüssel angeben, nach deren Dokumentation ist in den Bootstrap-Prozess als Config getan werden muss:

.config(function(uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     key: 'your api key', 
     v: '3.20', //defaults to latest 3.X anyhow 
     libraries: 'weather,geometry,visualization' 
    }); 
}) 

aber mein Problem ist, ich habe nicht die API erst später in den Anwendungen Leben. Um genau zu sein, ist der API-Schlüssel in der Datenbank und ist spezifisch für einen Benutzer. Der Benutzer müsste sich anmelden und dann können wir auf den API-Schlüssel zugreifen.

Ich habe ein wenig über lazy loading angularjs controllers geforscht, aber ich konnte nicht verstehen, wie dieses spezifische Problem zu sortieren ist.

Also, wie würde ich diese Konfiguration nach dem Boostrap-Prozess ausführen? Speziell von einem Controller.

Answer 1

Ich beantworte meine eigene Frage nach der Behebung dieses Problems.

habe ich einen Anbieter:

provider('GmapsKey', class GmapsKey { 
    constructor() { 
     this.uiGmaps = null; 
    } 

    set key(key) { 
     this.uiGmaps.configure({key}); 
    } 

    $get() { 
     return this; 
    } 
}); 

und

config(['uiGmapGoogleMapApiProvider', 'GmapsKeyProvider', (uiGmapGoogleMapApiProvider, GmapsKeyProvider) => { 
    GmapsKeyProvider.uiGmaps = uiGmapGoogleMapApiProvider; 
}]); 

Sobald ich meinen Schlüssel bereit hatte, injizierte ich GmapsKey und den Schlüssel gesetzt:

GmapsKey.key = userConfig.uGMapAPIKey;