AngularJS est un framework JavaScript qui est développé par Google. Il est séduisant dans le sens ou il permet de faire des actions dynamiques très facilement à l’aide d’une syntaxe facilement compréhensible. Le site de l’éditeur est super complet : vidéo, exemples, API, guide du développeur. Je ne vais donc pas revenir sur les bases du développement avec AngularJS. Par contre, j’ai voulu tester l’outil en créant un scrapeur des Google Trends.
Il ne me faut que 2 fichiers pour y arriver :
- un fichier PHP qui va scraper les Trends en cUrl et retourner le résultat
- un fichier HTML avec angularJS qui va rendre le tout plutôt dynamique
Concentrons nous sur le fichier HTML :
<!DOCTYPE html> <html ng-app> <head> <title>Search form with AngualrJS</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script type="text/javascript"> function SearchCtrl($scope, $http) { $scope.url = 'search.php'; // url de la recherche // Fonction qui va s'exécuter lors du clic sur le bouton (ng-click="search()") ou qu'on appuie sur entré $scope.search = function () { // Requête http en JSON $http.post($scope.url, {"data": $scope.keywords}).success(function (data, status) { $scope.status = status; $scope.data = data; $scope.result = data; // affiche le résutlat dans l'élément <pre> }) .error(function (data, status) { $scope.data = data || "Request failed"; $scope.status = status; }); }; } </script> </head> <body> <div ng-controller="SearchCtrl"> <form class="well form-search"> <label>Recherche :</label> <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords..."> <button type="submit" class="btn" ng-click="search()">Go</button> <p class="help-block">Permet de récupérer les termes associés (Google Trends) de <strong>{{keywords}}</strong></p> </form> <pre ng-model="result"> {{result}} </pre> </div> </body> </html>
Vous noterez les balises spécifiques à AngularJS.
Perso, j’aime bien le style. Il faudrait tester ça sur un projet à plus grand échelle pour voir la différence avec un projet en jQuery.
PS : Il y a un nombre d’appels limités, sinon TOTAL LIMIT EXCEEDED