Premier pas avec Angular JS

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;
}