Bonjour,

Je ne sais pas si c'est ici qu'il faut poster les remarques concernant les cours possédant des parties obsolètes, mais dans le doute, je le fais ici.

Dans le cours "Développez vos applications web avec AngularJS", il y a des problèmes de compatibilités dans la partie 3-3 (Angular, par l'exemple / Afficher les films populaires).

• En effet, premièrement, le code du controlleur proposé est :

angular.module('coursExoApp')
  .controller('PopularCtrl', function ($scope, serviceAjax) {
        $scope.currentPage = 1;
        $scope.totalPages = 0;

        var loadMovies = function(){
            $scope.loading = true;
            serviceAjax.popular($scope.currentPage).success(function(data){
                $scope.movies = data.results;
                $scope.totalPages = data.total_pages;
                $scope.loading = false;
            });
        };

        $scope.pageChanged = function(){
            loadMovies();
        };
        loadMovies();
  });

La fonction "success" étant dépréciée, la partie suivant ne fonctionne pas et bloque le bon déroulement:

            serviceAjax.popular($scope.currentPage).success(function(data){
                $scope.movies = data.results;
                $scope.totalPages = data.total_pages;
                $scope.loading = false;
            });

D'après ce qui semble proposé ailleurs, il semble préférable d'effectuer ceci à la place (a minima, la gestion du retour étant assez incomplète), qui fonctionne:

            serviceAjax.popular($scope.currentPage).then(function onSuccess(response){
                $scope.movies = response.data.results;
                $scope.totalPages = response.data.total_pages;
                $scope.loading = false;
            });

• Deuxièmement, la partie template nous propose ceci :

<div class="movies-container" id="top">
    <ul class="movies">
        <li ng-repeat="movie in movies">
            <div class="row">
                <div class="col-md-4">
                    <img ng-src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}" width="200" height="300"/>
                </div>
                <div class="col-md-8">
                    <a ng-href="#/info/{{movie.id}}"><h4 ng-bind="movie.title"></h4></a>
                    <label>Année:</label><span class="date" ng-bind="movie.release_date | date:'yyyy'"></span><br/>
                    <label>Note:</label><rating ng-model="movie.vote_average" max="10" readonly="true"></rating>(<span ng-bind="movie.vote_count"></span> avis)<br/>
                </div>
            </div>
        </li>
    </ul>
</div>

qui utilise la balise rating proposée par ui.bootstrap :

<rating ng-model="movie.vote_average" max="10" readonly="true"></rating>

Cette partie n'a pas fonctionné non plus, et un passage sur la documentation officielle https://angular-ui.github.io/bootstrap/
 m'a fait me diriger vers ceci, qui fonctionne:

<span uib-rating ng-model="movie.vote_average" max="10" readonly="true"></span>

En espérant que ce retour vous soit utile.

Cordialement,

Bonjour,

Merci beaucoup RaymoAisla pour ce retour très utile. Pour la fonction then j'ai eu le courage de chercher mais après pour le rating non.

Mais après ces modifications, les films ne s'affichent toujours pas. 

J'ai pourtant appliqué tout ce qu'il y a dans le tuto.

Avez-vous réussi à afficher les films ?

Merci infiniment pour votre aide précieuse,

Cordialement,

[EDIT] : La solution se trouve ici :

https://openclassrooms.com/forum/sujet/impossible-dafficher-la-liste-des-films-angularjs

J'arrive dorénavant à afficher la liste des films, merci à vous !

-
Edité par bibabobu 26 septembre 2018 à 17:06:13