Première interaction avec Angular

Suite à mon premier pas avec Angular, je sais injecter des données dans l’Html :) par rapport a un echo $toto, je suis pas sur d’être gagnant. Angular est un framework Javascript, et comme tout javascript, le but est d’avoir quelques mouvements du coté client.

Je me suis créer une nouvelle page dans mon contrôleur :

public function getImage()
	{
		return View::make('angular.image');
	}

une nouvelle vue : app/views/angular/image.blage.php

Dans ma section « scripts », je vais utiliser comme datas un tableau d’objets :

@section('scripts')
var tableau=[
    {
        titre:"Lundi",
        urlImage:"/image/1.jpg"
    },
    {
        titre:"Mardi",
        urlImage:"/image/2.jpg",
    },
    {
        titre:"Mercredi",
        urlImage:"/image/3.jpg",
    }
];
@stop

Dans ma section Content, j’ai un contrôleur spécifique « monControleur » pour gérer, afficher ma liste.
La liste, comme précédemment n’est plus générée a l’ouverture de la page, mais par un clic souris, cet évènement est intercepté par Angular par la propriété ng-click.

Un clic souris (ng-click) sur un bouton permet de voir ou cacher cette liste. Cette liste est visible ou non avec la propriété ng-show.

@section('content')

        Angular rajoute l'attribut src a la balise img avec ng-src,<br>
        liste construite au clic par propriété ng-click<br>
        liste affichée ou non avec ng-show par clic<br>

    <div ng-controller="monControleur">
        <p ng-click="jeClicksouris()" ><strong>Générer la liste</strong></p>
        <button ng-click="affichage()">Cliquez ici pour {{$Ao}}voir{{$Ac}}</button>

        <ul ng-show="visible">

            <li ng-repeat="jour in jours">
                <p>{{$Ao}}jour.titre{{$Ac}}</p>
                <img alt="{{$Ao}}jour.urlImage{{$Ac}}" ng-src="{{$Ao}}jour.urlImage{{$Ac}}">
            </li>
        </ul>
    </div>

@stop

Dans le section « scripts », nous avons un code très compact grâce à Angular.

function monControleur($scope){
    $scope.jeClicksouris=function(){
        $scope.jours=tableau;
        $scope.voir= 'voir';
    },
    $scope.affichage=function(){
        $scope.visible= ($scope.visible)? false : true;
        $scope.voir= ($scope.visible)? 'cacher' : 'voir';
    }    

}

La génération de la liste html (li>p>img dans un ul ) est faite en 2 lignes par la méthode $scope.jeClicksouris().

La méthode $scope.affichage()  en 2 lignes change la visibilité du « scope » et change le contenu du bouton.

Nous obtenons donc, un résultat équivalent à une utilisation de jquery mais encore plus simple a coder.

Share Button

Vous devriez aimer...