html - ejemplo - ¿Por qué AngularJS ng-view no funciona localmente?

ng-view angularjs ejemplo

Question

He estado trabajando durante unas horas para obtener mis enlaces para hacer clic en diferentes vistas con mi aplicación AngularJS.

Sin embargo, parece que solo puedo obtener la funcionalidad para trabajar en línea en Plunker.

He intentado probar la funcionalidad de clics en mi máquina localmente y ng-view no parece cargarse. Cuando descargo mi código de Plunker que sé que es correcto porque está trabajando en Plunker, ng-view parece dejar de funcionar una vez que está alojado localmente.

También he tenido problemas similares con ng-include y directivas que he definido como sus propias etiquetas HTML.

¿Hay alguna razón por la cual estos no funcionan localmente en mi computadora? (¿Y una forma de solucionarlo con fines de prueba?)

Puede ver parte del código del que estoy hablando en Plunker aquí , si lo desea.

Answer 1

Tanto ng-view como ng-include usan AJAX para cargar plantillas. El problema es que el navegador por defecto no permite solicitudes AJAX a archivos ubicados en su sistema de archivos local (por razones de seguridad). Por lo tanto, tienes dos opciones:

1. Ejecute el servidor web local que servirá sus archivos
2. Dile a tu navegador que permita el acceso de archivos locales

Si está en Mac, la primera opción es bastante fácil ya que tiene varios servidores web integrados (Apache httpd y el módulo Python llamado SimpleHTTPServer ). Para ejecutar el módulo Python SimpleHTTPServer solo abra la consola en la carpeta en la que se encuentran sus archivos y ejecute

python -m SimpleHTTPServer 3000

luego abra su navegador y escriba http://localhost:3000 . Eso es.

Si estás en Windows, también es posible. Puede instalar, por ejemplo, Wamp y servir archivos desde allí.

La segunda opción es posible con Chrome, simplemente ejecútelo con la --allow-file-access-from-files desde la línea de comando o agregue este indicador al acceso directo después de la ruta al ejecutable de Chrome.

Este recurso también puede ser útil para comprender cómo ejecutar cosas localmente en diferentes navegadores y utilizando diferentes servidores web.

Answer 2

ng-view funcionará localmente si coloca sus plantillas dentro de index.html en lugar de poner archivos separados usando etiquetas de script, por lo que angular ya no necesitará realizar solicitudes AJAX para recuperarlas.

<script type="text/ng-template" id="home.html">
  This is the Home template
</script>

Answer 3

ng-view y ng-include hacen solicitudes ajax para servir el archivo de plantilla. Como lo está ejecutando localmente, no puede realizar esa solicitud. Una solución fácil a esto es usar http-server para servir sus contenidos en un servidor local.