¿Qué proveedores de servicios están disponibles en el módulo.config?

StackOverflow https://stackoverflow.com//questions/12664787

  •  11-12-2019
  •  | 
  •  

Pregunta

Quiero usar $documento de agarrar un servidor de valor de un campo de entrada.

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

La dirección url de base utilizado para el acaparamiento de las plantillas.

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

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

Desde $documento que se genere un error que se desconoce supongo que no está disponible en config?Hay una manera de averiguar lo que está disponible y lo que no?Yo también podría usar $http para obtener datos desde el servidor, sino que también no disponible.

¿Fue útil?

Solución

AngularJS módulos de bootstrap en 2 fases:

  • Configuration phase donde sólo los proveedores y las constantes están disponibles.
  • Run phase de los servicios, donde se crea una instancia de base de proveedores registrados.En esta fase las constantes están todavía disponibles, pero no a los proveedores.

El AngularJS documentación (sección:"Módulo de Carga y Dependencias") da la penetración en esto:

Un módulo es una colección de ejecución y de configuración de los bloques de la que se obtienen aplicado a la aplicación durante el proceso de arranque.En su la forma más simple el módulo consiste de una colección de dos tipos de bloques:

Configuración de los bloques de - se ejecutan durante el proveedor de registros y la fase de configuración.Sólo a los proveedores y constantes puede ser inyectado en la configuración de los bloques.Esto es para prevenir accidentes en la creación de instancias de los servicios antes de que hayan sido plenamente configurado.

Ejecutar bloques de - obtener ejecuta después de que el inyector se crea y se utiliza para el kickstart aplicación.Sólo las instancias y constantes puede ser inyectado en ejecutar los bloques.Esto es para evitar que más de la configuración del sistema durante la aplicación de tiempo de ejecución.

Dado lo anterior sólo se puede inyectar constantes y proveedores (marcado con el Provider sufijo en la API de google docs).Esto probablemente responde a su pregunta, pero no ayuda a resolver su problema de plantillas de carga...

Me pregunto si no podría simplemente utilizar la base de tag en HTML y, a continuación, simplemente utilizar rutas relativas (a la base) sin especificar rutas absolutas?Sth como (siempre que la base está configurado correctamente):

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

Otros consejos

Aunque la pregunta general se ha contestado, he aquí una pequeña adición de orientación el ejemplo concreto en la pregunta:

Cómo usar un angular constante para definir la url base de su parciales (o definir otras constantes que representan los valores de servidor y hacerlos disponibles para la configuración):

// 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'
      })
    ;
  }]);

En mi opinión, esto tiene varias ventajas:

  • Si mueve tu punto de vista, usted sólo tendrá que actualizar su código en un solo lugar
  • Si su parciales son profundamente anidada dentro de su proyecto de diseño, "templateBaseUrl" no causa tanto ruido como la totalidad de la ruta de acceso de la
  • Usted podría incluso cambiar entre relativa y absoluta camino
  • Una respuesta a una pregunta similar sugiere el uso de html del elemento de base para eliminar la necesidad de anteponiendo baseUrl a cada templateUrl.Pero esto también afectaba a todos los otros recursos en la web.La configuración sólo la url de base para las plantillas no tiene efectos secundarios

En general, yo no uso esta solución con un disco duro de valor codificado como antes.Es sólo un ejemplo para mostrar de qué hacer en la mayoría de manera sencilla.Para ser capaz de copiar su aplicación todo en su servidor, definir el valor fuera de app.js en su archivo de índice y generar la necesaria pathes lado del servidor:

// 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>

[...]

Y en app.js:

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

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

  // define the templateBaseUrl using external appConfig
  .constant( 'templateBaseUrl', myNS.appConfig.templateBaseUrl );
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top