Il est possible d’installer Angular JS avec Laravel 🙂
Il va être temps de passer à mon premier test.
Dans ma route, je déclare mes variables Angular et un contrôleur général pour mes tests.
View::share('Ao', '{{');View::share('Ac', '}}'); // si utilisation angular par fonction Form::macro('ang', function($var) { return '{{'.$var.'}}'; }); Route::Controller('angular','AngularController');
On appelle notre vue « principale » dans le dossier /views/angular/
<?php // app/controllers/AngularController.php class AngularController extends \BaseController { public function getIndex() { return View::make('angular.index'); } }
Je n’ai pas oublier d’ajouter l’attribut « ng-app » a la balise body. Pour ma vue, je dois utiliser 2 sections : « content » et « scripts »
@extends('default') @section('content') <h2 ng-controller="monControleur">{{$Ao}}maVariable{{$Ac}}</h2> <h3 ng-controller="monControleur">{{ Form::ang('maVariable') }}</h3> @stop @section('scripts') function monControleur($scope){ $scope.maVariable="Bonjour ! via Angular"; } @stop
Avec l’attribut « ng-controller » nous définissons un contrôleur pour uniquement la balise H2. ce contrôleur est en fait une fonction Javascript qui prend en paramètre une variable $scope qui est un objet HTML traduit à cette fonction en objet Javascript, et qui sera ré-affiché en HTML après l’exécution de cette fonction. Ce passage HTML vers Javascript puis HTML est le data-binding.
Par nos delimiteurs {{ }} nous avons défini une propriété (maVariable) à notre objet scope.
Ici, vous utilisons une structure plus complexe pour la propriété du scope « monControle2 »
<h2 ng-controller="monControleur">{{$Ao}}maVariable{{$Ac}}</h2> <h3 ng-controller="monControle2">{{ Form::ang('moi.nom') }} {{ Form::ang('moi.prenom') }}</h3>
Nous passons une donnée(objet) au format Json.
@section('scripts') @parent function monControl($scope){ $scope.maVariable="Bonjour ! via Angular"; } function monControle2($scope){ jeSuis={ nom :"Angular", prenom :"Js" } $scope.moi=jeSuis; } @stop
Pour finir, le vais utiliser une balise particulière de Angular :
<ul ng-controller="monControle3"> <li ng-repeat="jour in jours">{{$Ao}}jour{{$Ac}}</li> </ul>
ng-repeat peut être vu comme la structure de langage « foreach » de php
function monControle3($scope){ lesJours=[ "lundi", "mardi", "mercredi" ]; $scope.jours=lesJours; }