Tweet
Bonjour,
je suis en train de démarrer un projet Joomla, ça faisait longtemps que je n’y avait pas touché. Entre temps je me suis fait pas mal d’expérience sous AngularJS.
/!\ Dépot GITHUB plus bas → allez-y directement
Du coup je démarre un template angular, je vais mettre ici les choses au fur et à mesure. Ceci est une ébauche que j’éditerai.
C’est parti :
1. importer angular et angular-sanitize (pour le print du html):
placer les fichiers angular.1.3.14.min.js et angular-sanitize.1.3.14.min.js où bon vous semble, pour ma part ce cera mon-template/js/lib
2. créer les app et controller:
le contenu de l’objet data reçoit le contenu de la variable items et celui de la variable params. Ces variables seront créées dans les vue des composants que vous utilisez. Ici je vais faire un exemple avec le composant com_content/featured
3. créer une "vue override" dans le template:
Voila, si tout se passe sans problème, à l’accueil vous trouverez vos articles "featured". Bon Je le répète c’est juste une entrée en matière, mais je pense que ça peux permettre à terme de faire des tris de contenus sans rechargement de page assez facilement. Enfin quand, comme moi, on kiffe AngularJS 
La suite :
Et bien c’est à venir, je pense qu’à terme il y aura un petit dépot github pour le template, mais plus rapidement je pense qu’il me faut coder une fonction "plus intelligente" (sans grosse tête bien sûr, disons "plus dédiée") que json_encode, notamment pour que tous les booleens qui se retrouvent sous forme de String dans l’objet data soit bien des booléen (ça évitera les ng-if="data.params.truc == '1'", que je trouve assez laits
). Et aussi pour parser corectement les choses déjà "jsonnées" tel que les prop style metadata et autre qui se retrouve sous forme de strings...
je suis en train de démarrer un projet Joomla, ça faisait longtemps que je n’y avait pas touché. Entre temps je me suis fait pas mal d’expérience sous AngularJS.
/!\ Dépot GITHUB plus bas → allez-y directement
Du coup je démarre un template angular, je vais mettre ici les choses au fur et à mesure. Ceci est une ébauche que j’éditerai.
C’est parti :
1. importer angular et angular-sanitize (pour le print du html):
fichier : mon-template/index.php
à placer avec les autres import framework
Code:
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/lib/angular.1.3.14.min.js'); $doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/lib/angular-sanitize.1.3.14.min.js');
ajouter la déclaration de l’app angular à la balise html
Code HTML:
<html ng-app="joomla" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
ajouter la déclaration du controler à la balise body
Code HTML:
<body ng-controller="MainCtrl" class="site ...">
nouveau fichier : mon-template/js/app/app.js
Code:
var app = angular.module('joomla',['ngSanitize']);
nouveau fichier : mon-template/js/app/controller.js
Code:
app.controller('MainCtrl',[
'$scope', '$window', '$http', '$location', '$timeout', '$filter',
function($scope, $window, $http, $location, $timeout, $filter) {
$scope.data = {
items : items,
params : params
}
}
]);
3. créer une "vue override" dans le template:
nouveau fichier : mon-template/html/com_content/featured/default.php
Code PHP:
<?php
/**
* @package Joomla.Site
* @subpackage com_content
*
* @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
JHtml::_('behavior.caption');
?>
<script type="text/javascript">
var items = <?php echo json_encode($this->items, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE)?>;
var params = <?php echo json_encode($this->params, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE)?>;
</script>
<div class="blog-featured">
<div class="page-header" ng-if="data.params.show_page_heading">
<h1>{{data.params.page_heading}}</h1>
</div>
<div class="item" ng-repeat="item in data.items">
<h2>{{item.title}}</h2>
<div class="item-content" ng-bind-html="item.introtext"></div>
</div>
</div>
La suite :
Et bien c’est à venir, je pense qu’à terme il y aura un petit dépot github pour le template, mais plus rapidement je pense qu’il me faut coder une fonction "plus intelligente" (sans grosse tête bien sûr, disons "plus dédiée") que json_encode, notamment pour que tous les booleens qui se retrouvent sous forme de String dans l’objet data soit bien des booléen (ça évitera les ng-if="data.params.truc == '1'", que je trouve assez laits
). Et aussi pour parser corectement les choses déjà "jsonnées" tel que les prop style metadata et autre qui se retrouve sous forme de strings...
Commentaire