Angular JS avec Laravel

Installation :

Télécharger le fichier javascript sur: http://angularjs.org/
A la fin du template principal écrire :

<!-- Javascripts ========================== -->
	<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
	<script src="{{ asset('assets/js/angular.js') }}"></script>
	<script>
		@section('scripts')
		@show
	</script>

Dans ce template ajouter aussi un attribut « ng-app » a body :

<body ng-app>

Compatibilité Laravel-Angular

Pas très bon :(, Blade utilise les balises {{ xxx }} pour afficher une variable, tout comme Angular qui les utilisent pour délimiter une variable.

Il est très simple de changer la configuration de Blade, par :

Blade::setEscapedContentTags('{={', '}=}');
Blade::setContentTags('{=', '=}');

Où de changer les délimiteurs de Angular… Mais nous risquons de gros problèmes par la suite : nous perdons la compatibilité du code. Que ce passera t-il lorsqu’il faudra utiliser un package Laravel avec vue ? une bibliothèque particulière Angular ? Je préfère donc les exclure, bien que ce sont les solutions les plus faciles, et élégantes au niveau du code.

La bonne solution ? utiliser un moteur de template particulier, par exemple : https://github.com/conarwelsh/mustache-l4.
Dans la même approche, il est possible d’utiliser le moteur php à la place du moteur blade.

Et enfin, insérer manuellement ces caractères « {{ » « }} » en se débrouillant pour qu’ils ne soient pas interprétés par Blade.
Par exemple il est possible de les déclarer comme variables de vues globales :

View::share('Aopen',  '{{');  // A(ngular)Open
View::share('Aclose', '}}');  // A(ngular)Close

Dans la vue il ne reste plus qu’a écrire :

<h2 ng-controller="monControl">{{$Aopen}}maVariable{{$Aclose}}</h2>

Et enfin, pour finir, une approche par fonction() : un helper(Facade) ou une macro Form.

Form::macro('ang', function($var) {
    return '{{'.$var.'}}';
});
<h3 ng-controller="monControl">{{ Form::ang('maVariable') }}</h3>

Pour mes premiers pas, un moteur Particulier me semble démesuré; des variables globales feront leurs travail sans trop alourdir mon code.

Share Button

Vous devriez aimer...

1 Response

  1. lossendae dit :

    Bonjour,

    Vous pouvez utiliser Angular sans changer les balises blade en rajoutant @ devant les balises que Laravel doit ignorer :
    - {{ $laravel }}
    - @{{ angular }}