AngularJS : scraper les Google Trends

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&eacute;cup&eacute;rer les termes associ&eacute;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.

 

Voilà le résultat :

 

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

Prestashop : modifier le formulaire de contact
Script PHP de création d'un domaine sur Internet BS via l'API

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *