Mon idée était de faire quelque chose de très simple, par exemple un système de layout.
Je crée un layout HTML contenant :
- le titre de mon site
- un menu
- un emplacement pour le contenu
Et pour chaque contenu, je crée un nouveau fichier HTML.
Ainsi, les éléments statiques de mon site (menu, titre, ...) ne seront écrit qu'à un seul endroit. Mon site sera donc plus facile à maintenir.
Il me faut également un contrôleur (route mapping), qui, en fonction de l'URL choisira le bon contenu.plate
Voici le résulat final en HTML + angularJS
<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<head>
<script type="text/javascript"
src="http://angularjs.org/ng/js/angular-debug.js" ng:autobind></script>
</head>
<body>
<script>
angular.service('myApplication', function($route){
$route.when("", {template:'./pages/toto.html'});
$route.when("/titi", {template:'./pages/titi.html'});
}, {inject:['$route']});
</script>
<h1>Your App Chrome</h1>
[ <a href="#">Welcome</a> | <a href="#/titi">Settings</a> ]
<hr/>
<ng:include src="$route.current.template" scope="$route.current.scope"></ng:include>
</body>
</html>
Et les deux pages utilisant ce layout (je ne me suis pas foulé pour le contenu :-p )
cat pages/titi.html TITI TITI TITI cat pages/toto.html TOTO
Et pour info, voici la structure des fichiers
tree . |-- pages | |-- titi.html | `-- toto.html `-- template.html
toto.html est défini comme la page par défaut.titi.html est accessible via /template.html#/titi
Si on décortique angularJS, on se rend compte qu'il y a principalement deux fonctions utilisées : - la fonction route pour faire le lien entre l'URL et le contenu - et la balise pour injecter le contenu dans le document HTML.
Pour tester, vous devrez utiliser un serveur web, c'est à dire via une url du type http://localhost:port/xxxxx
Si vous testez directement a partir des fichiers, c'est à dire avec une URI du type file:///home/romain/Bureau/site/template.html ,le système de layout ne marchera pas. (XMLHttpRequest cannot load file:///home/romain/Bureau/site/pages/toto.html. Origin null is not allowed by Access-Control-Allow-Origin.)
Mais bon pour utiliser très facilement un serveur web, il suffit d'ouvrir un shell et de saisir : cd /home/romain/Bureau/sitepython -m SimpleHTTPServer
Puis ensuite de se rendre sur : http://localhost:8000/template.html
Source : http://www.pinoytech.org/question/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-access-allow-for-file
Merci beaucoup.
RépondreSupprimerJ'utilisais des 'div' que je cachais ou affichais avec cette technique, c'est beaucoup plus simple :-)