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.
Bonjour,
Vous pouvez utiliser Angular sans changer les balises blade en rajoutant @ devant les balises que Laravel doit ignorer :
- {{ $laravel }}
- @{{ angular }}