dimanche 23 janvier 2011

Template (Layout) en HTML / Javscript avec AngularJS

Récemment j'ai découvert sur DZone un nouveau framework MVC javascript. Et je me suis dit que c'était l'occasion de tester.

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/site
python -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

1 commentaire:

  1. Merci beaucoup.
    J'utilisais des 'div' que je cachais ou affichais avec cette technique, c'est beaucoup plus simple :-)

    RépondreSupprimer