¿Qué debo hacer con la URL después de iniciar el marco Angular?
Los amigos que usan AngularJS deben saber que el marco AngularJS define su propio controlador de enrutamiento front-end, que implementa y actualiza ng-view a través de ng-app a través de diferentes URL. y admite la función histórica HTML5. Consulte el artículo Plantillas y enrutamiento de AngularJS para obtener más detalles.
De forma predeterminada, el modo HTML5 no está habilitado y la URL contendrá un signo # para distinguir la ruta administrada por AngularJS de la ruta administrada por WebServer.
Por ejemplo, la URL con # a continuación es la ruta administrada por AngularJS.
Esta experiencia en realidad no es muy amigable, especialmente para personas como yo a quienes les gusta el diseño simple. La aparición de # no fue por mi propia voluntad, por eso me siento muy incómodo. El marco AngularJS proporciona enrutamiento en modo HTML5 y puede eliminar directamente el signo #.
Simplemente configure el modo $ubicación proveedor .html 5 (verdadero).
book.config(['$routeProvider ', ' $locationProvider ', function ($routeProvider, $locationProvider) {
//..Omitir código
$ proveedor de ubicación. Modo html 5 (verdadero);
}]);
Admite URL de enrutamiento HTML5.
Este problema me ha preocupado durante mucho tiempo, así que tengo que usar la URL con #.
En segundo lugar, encuentre la causa del error.
Entonces, ¿cuál es la causa de este problema? Hay un error en el análisis de la ruta.
Permítanme empezar desde el principio. AngularJS es una aplicación de una sola página y una ng-app corresponde a una página y una URL. AngularJS implementa su propio enrutamiento front-end, de modo que una ng-app puede administrar múltiples URL y luego corresponder a múltiples ng-vews. Cuando accedemos a la URL (/libro), ¿cómo determinar si esta ruta es administrada por el servidor web backend o por el AngularJS frontend?
Desde dos aspectos:
1. Si el usuario primero visita la página de inicio () y luego salta a la página (/ libro), la URL que salta es la URL administrada por AngularJS. El acceso es normal.
2. Cuando un usuario accede directamente a una página (/libro), la solicitud se envía primero al fondo del servidor web. El fondo no tiene administración de enrutamiento para la página correspondiente (/libro), por lo que se genera un 404. se producirá un error.
Si logras entender esta capa, la solución técnica será muy fácil. Podemos resolver el problema 404 pidiéndole a WebServer que reenvíe todas las URL de enrutamiento administradas por AngularJS a ng-app. Al mismo tiempo, no hay un signo # y también admite consultas históricas HTML5. !
La implementación se puede dividir en dos soluciones:
1. Sitio web estático: sitio web front-end puro (JS+HTML+CSS), que proporciona servicios web a través de Nginx.
2. Sitio web dinámico: frontend (JS+HTML+CSS) + backend Node.js proporciona servicios web.
3. Solución de sitio web estático
El sitio web estático que necesitamos modificar incluye tres archivos.
index.html: archivo de definición de NG-APP.
app .js: El archivo de control correspondiente a ng-app.
Nginx.conf: archivo de configuración del sitio web nginx.
Edita index.html y agrega etiquetas básicas.
& lthtml lang = " zh-CN " ng-app = " libro " & gt;
& lthead & gt
& ltbase href = "/ " rel = " external no follow " >>p>
//Omitir código
& lt/head & gt;
Edite app.js y agregue $ proveedor de ubicación .html 5 modo(verdadero);
book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', función ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
$routeProvider
. cuando('/', {URL de plantilla: proveedor de TPL. html('bienvenido'), controlador: 'WelcomeCtrl'})
cuando('/libro', {URL de plantilla: tplprovider.html('libro'), controlador: 'bookctrl'})
-r1 '), {URL de plantilla: tplprovider. .html(' book-r 1 '), controlador: ' bookr1ctrl'}) El ideal geek de /r.
. cuando ('/video'), {URL de plantilla: tplprovider.html ('video'), controlador: 'videoctrl'}) // video.
. cuando ('/acerca de ', { URL de plantilla:tplprovider.html('Acerca de'), controlador: 'Acerca de ctrl' })//Acerca del autor.
. De lo contrario ({ redirigir:'/' });
$ proveedor de ubicación html 5 mode(true);
}]);
Editar configuración de nginx. archivo y agregue la configuración try_files.
Servidor{
set$htdocs/www/deploy/my site/on book;
Escuchar 80;
server_name onbook .me
ubicación/{
raíz $htdocs
try_files$uri$uri//index.html = 404;
}
}
De esta manera, el sitio web estático está listo. No hay problemas. Puede acceder y actualizar directamente cualquier página.
Cuarto, solución de sitio web dinámico
El sitio web dinámico que aún necesitamos modificar incluye tres archivos.
index.html: archivo de definición de NG-APP.
app .js: El archivo de control correspondiente a ng-app.
server.js: Archivo de control de acceso de enrutamiento de express framework.
Modificar Index.html y app.js, igual que la solución para sitios web estáticos. En términos generales, los sitios web dinámicos no se enrutan directamente a través de Nginx, sino que se administran a través del servidor web.
Supongamos que utilizamos el marco web Express de Node.js
Abra el archivo de control de acceso de enrutamiento server.js del marco Express y agregue la configuración de enrutamiento.
app.use(function (req, res) {
console . log(req . ruta);
if(req . ruta . index of( '/API ')& gt;=0){
res.send("texto del servidor");
}else{ //página de inicio angular
RES . sendfile(' app/index . html ');
}
});
Establece cuando la ruta dentro del sitio (req.path) ) no contiene /api, se reenviará a la ng-app (index.html) de AngularJS. Entonces, cuando accedemos directamente a la dirección (/libro), /libro no contiene /api y se reenviará directamente a AngularJS para la gestión de enrutamiento. ¡Hemos logrado la optimización de la ruta!