Quali fornitori / servizi sono disponibili in Module.config?

Question

Voglio usare $ documento per prendere un valore del server da un campo di input.

var base_url = $document[0].getElementById('BaseUrl').value;

.

L'URL di base viene utilizzato per il prestito dei modelli.

var base_url = $document[0].getElementById('BaseUrl').value;

$routeProvider.when('/alert', {
  controller: function () { },
  templateUrl: base_url + '/partials/instances.html'
});

.

Dal momento che $ Document lancia un errore che è sconosciuto, immagino che non sia disponibile in configurazione?C'è un modo per scoprire cosa è disponibile e cosa no?Potrei anche usare $ http per ottenere dati dal server ma non è inoltre disponibile.

Answer 1

I moduli AngularJS sono bootstrappati in 2 fasi:

.
• Configuration phase dove sono disponibili solo fornitori e costanti.
• Run phase dove i servizi sono istanziati in base ai fornitori registrati. In questa costante di fase sono ancora disponibili ma non fornitori.

  the angolarjs Documentazione (sezione: "Modulo Loading & Dependencies") Dà l'intuizione di questo :

  .

  A Modulo è una raccolta di configurazione e blocchi blocchi che ottengono applicato all'applicazione durante il processo di bootstrap. Nel suo Modulo più semplice Il modulo consiste in una raccolta di due tipi di blocchi:

  Blocchi di configurazione - Scarica durante le registrazioni del provider e fase di configurazione. Solo i fornitori e le costanti possono essere iniettati in blocchi di configurazione. Questo è per prevenire l'istanziazione accidentale di servizi prima che siano stati completamente configurati.

  Esegui Blocks - Get eseguito dopo aver creato l'iniettore e viene utilizzato per sollevare il applicazione. Solo i casi e le costanti possono essere iniettati in esecuzione Blocchi. Questo è per evitare ulteriori configurazioni del sistema durante Tempo di esecuzione dell'applicazione.

  Dato quanto sopra puoi iniettare solo costanti e fornitori (contrassegnati con il suffisso Provider nei documenti API). Questo probabilmente risponde alla tua domanda ma non aiuta a risolvere il tuo problema dei modelli di caricamento ...

  Mi chiedo se non è possibile utilizzare semplicemente il tag base in HTML e quindi utilizzare semplicemente percorsi relativi (alla base) senza specificare i percorsi assoluti? Sth come (a condizione che la base sia configurata correttamente):

  $routeProvider.when('/alert', {
    controller: function () { },
    templateUrl: 'partials/instances.html'
  });
  

  .

Answer 2

Sebbene la domanda abbia generalmente risposto, ecco un po 'di aggiunta di mira l'esempio concreto utilizzato nella domanda:

Come utilizzare una costante angolare per definire il baseturl dei tuoi parziali (o definire altre costanti che rappresentano i valori del server e renderli disponibili per la configurazione):

// file: app.js
'use strict';

/* App Module */
angular.module( 'myApp', [] )

  // define the templateBaseUrl
  .constant( 'templateBaseUrl', 'themes/angular/partials/' );

  // use it in configuration
  .config(['$routeProvider','templateBaseUrl', function($routeProvider,templateBaseUrl) {
    $routeProvider
      .when( '/posts', {
        templateUrl : templateBaseUrl + 'post-list.html',
        controller  : PostListCtrl
      })
      .when( '/posts/:postId-:slug', {
        templateUrl : templateBaseUrl + 'post-view.html',
        controller  : PostViewCtrl
      })
      .when( '/about', {
        templateUrl : templateBaseUrl + 'about.html',
        controller  : AboutPageCtrl
      })
      .when( '/contact', {
        templateUrl : templateBaseUrl + 'contact.html',
        controller  : ContactPageCtrl
      })
      .otherwise({
        redirectTo: '/posts'
      })
    ;
  }]);

.

A mio parere, questo ha diversi vantaggi:

.
• Se sposta le tue visualizzazioni, devi solo aggiornare il tuo codice in una singola posizione
• Se i tuoi parziali sono profondamente nidificati all'interno del layout del progetto, "TemplateBaseurl" non causa tanto rumore come l'intero percorso
• Potresti persino cambiare tra il percorso relativo e assoluto
• Una risposta a una domanda simile suggerisce l'uso dell'elemento base HTML Per rimuovere la necessità di preparare un baseturl a ciascun Templateurl. Ma questo ha anche influenzato tutte le altre risorse sul sito web. Configurazione solo dell'URL di base per i modelli non ha effetti collaterali

  Generalmente, non uso questa soluzione con un valore codificato rigido come sopra. È solo un esempio per mostrare cosa fare nel modo più semplice. Per essere in grado di copiare la tua app sul tuo server, definire il valore al di fuori dell'app.js, nel tuo file indice e generare il lato server dei percorsi necessario:

  // file: index.php
  <?php
    // only depends on your project layout
    $angularPartialsBaseUrl = 'themes/angular/partials/';
    // this will change when you move the app around on the server
    $themeBaseUrl  = $_SERVER['REQUEST_URI'] . 'themes/angular';
  ?><!DOCTYPE html>
  <html ng-app="myApp">
  <head>
      <title>Yii Blog Demo</title>
  
      <script>
        var myNS = myNS || {};
        myNS.appConfig = myNS.appConfig || {};
        myNS.appConfig.templateBaseUrl = '<?php echo $angularPartialsBaseUrl; ?>';
      </script>
  
      <script src="<?php echo $themeBaseUrl; ?>/js/vendor/angular/angular.js"></script>
      <script src="<?php echo $themeBaseUrl; ?>/js/app.js"></script>
  
  </head>
  
  [...]
  

  .

  e in app.js:

  // file: app.js
  'use strict';
  
  /* App Module */
  angular.module( 'myApp', [] )
  
    // define the templateBaseUrl using external appConfig
    .constant( 'templateBaseUrl', myNS.appConfig.templateBaseUrl );
  

  .