Clarification - Single-page-app

Version imprimable

24/04/2016, 02h52
Maitre2B

1 pièce(s) jointe(s)

Clarification - Single-page-app

Bonjour à tous,

Je développe un site web avec angularjs et une API.
J'ai décidé d'utiliser le $RouteProvider pour "naviguer" sur le site, où uniquement le <body> change lorsque l'on clique sur les liens de navigation.

Mais depuis que j'ai fait ça, plusieurs problèmes sont apparues où bien sont à venir.

Le fait d'avoir un seul <head> uniquement pour un ensemble de pages (partials) qui seront chargées ne pose t'il pas un gros problème pour le référencement naturel ?
(Par exemple: avoir un <title> Page1</title> différent pour chaque partial)

Lorsqu'un GoogleBot vient "crawler" mon site, le fait qu'il soit en single-page ne pose t'il pas problème puisque l'ensemble des pages (partials) ne sont pas visible ? Le contenu n'apparaissant pas...
(Après recherche, je crois quand faisant un !# le GoogleBot serait notifié qu'il s'agit d'une page avec un contenu à charger)

La navigation se faisait via des liens, ex: <a href="#/profil"> , comment faire lorsque l'on a par exemple un système de notifications qui fonctionne avec des <a href="#"> ?
(Supprimer les <a href="#"> semble la solution, mais dans ce cas, pourquoi toujours mettre des <a href="#"> lorsque l'on reste sur sa page quand on développe en général ?)
Pièce jointe 207772

allow-control-allow-origin:
Lorsque je charge une nouvelle page (partial), les services $http avec en méthode GET ne fonctionnent pas :
L’en-tête de demande authorization n’est pas présent dans la liste Access-Control-Allow-Headers.
XMLHttpRequest: Erreur réseau 0x80070005, Accès refusé.
Et les services $http avec en méthode POST ne fonctionnent pas non plus :
XMLHttpRequest pour http://exemple.com:1337/request nécessite une spécification CORS (Cross Origin Resource Sharing).
XMLHttpRequest pour http://exemple.com:1337/request nécessite une spécification CORS préliminaire.
L’en-tête de demande authorization n’est pas présent dans la liste Access-Control-Allow-Headers.
XMLHttpRequest: Erreur réseau 0x80070005, Accès refusé.
Serait-ce un problème de sécurité lié au serveur ?
Après avoir installer un plugin pour autoriser le "controll origin", les services $http fonctionnent, mais je ne vais pas demander à mes utilisateurs d'installer ce plugin...
https://chrome.google.com/webstore/d...jhddihlkkiljbi

Merci pour vos réponse, j'avoue être assez paumé, implémenter un $routeprovider pour faire un site en single-page semble entraîner énormément de problématiques.
27/04/2016, 22h55
Maitre2B

UP
28/04/2016, 09h11
sekaijin

ben sans savoir ce que tu fais
=> down
28/04/2016, 11h35
Marco46

Citation:

Envoyé par Maitre2B

Merci pour vos réponse, j'avoue être assez paumé, implémenter un $routeprovider pour faire un site en single-page semble entraîner énormément de problématiques.

Non c'est le fait de faire une webapp single page qui entraine les problèmes. Il s'agit d'une architecture différente des sites avec templating côté serveur.

Tu as 3 sujets :

- le SEO
- le routage de ta webapp
- CORS

Pour le SEO tu peux regarder du côté de solutions permettant le référencement de webapp javascript comme Brombone.
EDIT : Un article de Brombone décrit bien le problème :

Citation:

What do javascript frameworks offer?

AngularJS, Ember.js, Backbone.js, and other javascript frameworks have taken off because they let you have your javascript and eat it too. With modern javascript techniques, it is possible to load data and render it quickly as the user interacts with the site. This is a huge advantage over the old click-and-wait websites of the past, and we're just scratching the surface of what is possible.

All this interactivity is achieved by building the html in the client instead of on the server. As the users interact with the webpage, logic on the page is morphing the very structure of the page. This allows you to refresh part of a page without reloading the rest of the page, or rearrange data without making any requests to the server.

They left you with a new set of problems.

This new problem is actually the flip side of the benefit. These frameworks are using the browser to build the actual content of the page. When Google crawls your site, it just reads the raw pages. It doesn't open them in a browser and it doesn't run the javascript. So, it doesn't see the content, it just sees an empty page. Obviously, this isn't good for your Google rankings. Google can't direct users to your page if it can't even tell what your page is about.

/EDIT

Pour le routage de ta webapp tu n'es pas obligé d'utiliser des href. Tu peux aussi utiliser la directive ui-sref si tu utilises ui-router (fortement recommandé) comme tu peux programmer le routage dans ton js (utiliser par ex ng-click pour capter l'action utilisateur et utiliser le service $state pour router).

Pour CORS, il y a une multitude de questions sur ce sujet dans la partie angular du forum je te laisse chercher mais en gros il s'agit d'un mécanisme de sécurité implémenté dans tous les browsers modernes qui empêchent les call de ressources dont le domaine est différent de celui de la webapp. Il est nécessaire que les serveurs adressés différemment de celui de la webapp soient configurés d'une certaine manière (headers http à placer sur les requêtes) pour que la webapp puissent consommer les ressources. En gros, le problème est côté client dans le browser, mais la solution est côté serveur. Il n'y a rien à faire côté client pour régler ça.
EDIT 2 : Je suis tombé sur ça ça devrait aider : http://enable-cors.org/index.html /EDIT
28/04/2016, 18h45
Maitre2B

Merci énormément Marco, c'est exactement les informations dont j'avais besoin.

Citation:

Pour le routage de ta webapp tu n'es pas obligé d'utiliser des href. Tu peux aussi utiliser la directive ui-sref si tu utilises ui-router (fortement recommandé) comme tu peux programmer le routage dans ton js (utiliser par ex ng-click pour capter l'action utilisateur et utiliser le service $state pour router).

Je n'ai pas exactement compris ce passage, mais je ferai des recherches à ce sujet.

Au lieu de faire un <a href="#/exemple"> , il faut faire un <ng-click ui-sref="#/exemple"> , est-ce bien ça ?
28/04/2016, 22h35
Marco46

Non tu peux faire :

<toto ng-click="maFonctionDeMonController()"></toto>

Auquel cas dans ta fonction tu fais un $state.go('nomDuState');

Ou bien <toto ui-sref='nomDuState'></toto>

A supposer que tu utilises bien ui-router et non le routeur de base de angular.

Mais tout ça c'est dans les docs, il faut lire les docs.