Configuración de enrutamiento Angular y Sails

¿Hay alguna configuración de Sails.js (o Nodo) que pueda evitar que el enrutamiento angular funcione?

No importa el enfoque que tome, cada ruta, aparte de las que se encuentran en las rutas de las velas, devuelve 404.

He probado las versiones Angular 1.2 y 1.3, y estoy usando Sails v 0.9.15.

Todos los scripts se cargan en el orden correcto (por ejemplo):

    ...  

Estoy usando el ngRoute correctamente:

var myApp= angular.module('myApp', ['ngRoute']);

Aquí están mis rutas en app.js de Angular:

 myApp.config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/profile', { templateUrl: 'linker/views/profile.html', controller: 'MainCtrl' }) .when('/profile-detail', { templateUrl: 'linker/views/profile_detail.html', controller: 'MainCtrl' }); }]); 

Y también estoy usando el proveedor de ubicación:

 myApp.config(function ($locationProvider) { $locationProvider.html5Mode(true); }); 

Detalles adicionales:

ng-app y ng-view están colocadas correctamente, y mis caminos son correctos. Puedo mostrar correctamente profile.html con Angular (y también para incluir datos de la API Restful de Sails).

El problema es que solo puedo hacer eso para las rutas definidas en Sails ‘route.js.

Ejemplo:

 module.exports.routes = { '/' : { controller: 'main', action: 'index' }, '/signup' : { controller: 'main', action: 'signup' }, '/login' : { controller: 'main', action: 'login' }, '/profile': { controller: 'users', action: 'profile' } //...... 

Básicamente, para mostrar algún contenido html con Angular, tengo que definir EXACTAMENTE LA MISMA ruta en la configuración de Sails, lo cual no tiene sentido.

¿Algunas ideas? PS voy a proporcionar datos adicionales si es necesario.

Intenta eliminar el modo html5 para ver qué sucede:

 $locationProvider.html5Mode(false); 

Si está utilizando su aplicación de velas solo para proporcionar una API para su aplicación Angular, pero está utilizando el mismo backend para servir su código angular, entonces puede prefijar todas las rutas API con ‘api’ para evitar conflictos con las rutas angulares. .

En lugar de / perfil tendrías / api / perfil


EDITAR: He echado un vistazo al marco Sails.js y he hecho una pequeña aplicación para probarlo.

Pude tener rutas exitosas en trabajos angulares que no fueron definidos por las velas.

Creo que hay una mala interpretación de cómo funciona el enrutamiento angular.

Si cambia la ruta con window.location o escribe la url manualmente, el navegador enviará una solicitud de obtención al servidor. Entonces, en su caso, habrá una solicitud de / profile o / profilee y el servidor buscará las rutas disponibles y lanzará un 404 si nada coincide.

Para evitarlo, deberías cambiar la ruta usando métodos angulares. Angular usa el símbolo ‘#’ en la ruta para evitar que el navegador envíe solicitudes al servidor cuando cambia la URL. Los navegadores ignoran los cambios después del símbolo ‘#’ . O en su caso, se logra un efecto similar utilizando el modo html5. Sin embargo, tenga en cuenta que el uso del modo html5 puede causar problemas cuando los usuarios actualizan la página, ya que entonces se realizará una solicitud al servidor (más información sobre cómo solucionarlo a continuación).

Entonces, lo que debe usar para cambiar las rutas con javascript es el servicio $ location . En sus vistas angulares, también puede usar tags de anclaje normales, porque los analiza angularmente:

 Go to profile 

Ya que lo que tiene es una aplicación de una sola página, todas las vistas son manejadas por el cliente. Todas las rutas más allá de la raíz (/) son rutas virtuales creadas por angular. Generalmente no existen en el servidor. Sólo la raíz está disponible. Cuando se usa el modo html5 eso puede ser un problema .

Una forma de solucionarlo es volver a escribir el enrutamiento del servidor para que sirva a todo lo demás como si fuera una solicitud a la ruta raíz. En las velas, incluso sugieren cómo hacerlo en la configuración / route.js:

  // What about the ever-popular "vanity URLs" aka URL slugs? // (you might remember doing this with `mod_rewrite` in Apache) // // This is where you want to set up root-relative dynamic routes like: // http://yourwebsite.com/twinkletoez // // NOTE: // You'll still want to allow requests through to the static assets, // so we need to set up this route to ignore URLs that have a trailing ".": // (eg your javascript, CSS, and image files) 'get /*(^.*)': 'UserController.profile' 

Con respecto a la API en sail, puede configurar un prefijo dentro del archivo config / controllers.js:

 /** * `prefix` * * An optional mount path for all blueprint routes on a controller, including `rest`, * `actions`, and `shortcuts`. This allows you to continue to use blueprints, even if you * need to namespace your API methods. * * For example, `prefix: '/api/v2'` would make the following REST blueprint routes * for a FooController: * * `GET /api/v2/foo/:id?` * `POST /api/v2/foo` * `PUT /api/v2/foo/:id` * `DELETE /api/v2/foo/:id` * * By default, no prefix is used. */ prefix: '',