Récupération de données mySQL et affichage pour Angular JS

Bonjour à tous

Je suis en train de développer un cms pour serveur PHP5 / MySQL et j'utilise AngularJS pour l'affichage front-end.
Je précise que c'est la 1ere fois que j'utilise Angular dans un projet. Ca se passe plutot pas mal à un détail pres : j'utilise le plugin jquery TinyMCE afin d'avoir un éditeur de texte enrichi dans le back-office. Celui-ci stocke dans la base de donnée le code HTML tappé dans le textarea. La récupération et/ou l'affichage de ces données précises me posent problème et retournent une erreur d'Angular JS

SyntaxError: Unexpected token 
    at Object.parse (native)
    at fromJson (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:1072:14)
    at defaultHttpResponseTransform (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:8618:16)
    at  http://localhost/SGreboot2/blog/bootstrap/js/angular.js:8703:12
 
    at forEach (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:323:20)
    at transformData (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:8702:3)
    at transformResponse (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:9428:23)
    at processQueue (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:13248:27)
    at  http://localhost/SGreboot2/blog/bootstrap/js/angular.js:13264:27
 
    at Scope.$get.Scope.$eval (http://localhost/SGreboot2/blog/bootstrap/js/angular.js:14466:28)

Je pense que c'est un schmilblick entre les quotes ' ' et les guillemets " ". mais j'aimerais avoir l'avis d'un spécialiste ^^.

Voici le code de ma page d'accueil qui affiche un apperçu de tout les articles :

<div class="wrapper" ng-app="homeApp" ng-controller="homeController">        
        <div class="container">
            <section class="col-lg-8">
                <div class="article" ng-repeat="article in articles">
                    <div class="article-header">
                        <h2><a href="article.php?article={{article.art_titre}}">{{article.art_titre}}</a></h2>
                        <p>Publié le {{article.art_date}}.</p>
                    </div>
                    
                    <div class="article-body">
                         {{article.art_article}}                     
                    </div>
                    <div class="article-footer"></div>
                </div>
            </section>
</div>

Le script de Angular avec le controller :

angular.module('homeApp', [])
            .controller('homeController', homeController);
        
        homeController.$inject = ['$scope', '$http'];
        
        function homeController($scope, $http) {
            $http.get('sql/articles-home.php')
            .success(function (response) {$scope.articles = response.articles;});
        }

Et le code PHP qui récupère les données dans la BDD et les mets en forme pour Angular :

$result = $bdd->query("SELECT *, DATE_FORMAT(art_date, '%d/%m/%Y') AS art_date FROM articles");

$outp = "";
while($rs = $result->fetch()) {
    $article = htmlentities($rs['art_article']);

    if ($outp != "") {$outp .= ",";}
    $outp .= '{"art_titre":"'  . $rs["art_titre"] . '",';
    $outp .= '"art_date":"'   . $rs["art_date"]        . '",';
    $outp .= '"art_article":"'. $article     . '"}'; 
}
$outp ='{"articles":['.$outp.']}';

echo($outp);

Tout ceci marche très bien tant que je ne joue pas avec la ligne art_article de la BDD.
J'ai essayé avec et sans la conversation htmlentities(); pour le même résultat.

Voila, en espérant que quelqu'un voudras bien se pencher sur mon cas.
Par avance merci.
Sylvain.
Modifié par ProSylvain (07 Jun 2015 - 08:42)