AngularJS: How to render HTML in $scope variable in view?

Question

I have been trying to create a blog app using the MEAN stack. I am having problem to render the posts as HTML. On the browser, it is just showing {{posts}}

HTML code:

<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="app.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="container" ng-controller="BlogController">
            <h1>Blog</h1>
            <input ng-model="post.title" class="form-control" placeholder="title"/>
            <textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
            <button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>

            {{posts}}

        </div>
    </body>
</html>

Angular code:

(function() {
    angular.module("BlogApp", []).controller("BlogController", BlogController);
    function BlogController($scope, $http) {
        $scope.createPost=createPost;

        function init() {
            getAllPosts();
        }

        init();

        function getAllPosts() {
            $http.get("/api/blogpost").success(function(posts) {
                $scope.posts=posts;
            });
        }

        function createPost(post) {
            console.log(post);
            $http.post("/api/blogpost", post);
        }
    }
})();

score 0 · Accepted Answer · answered Dec 05 '17 at 10:28

Since you are using angular 1.6.x, you have to use .then and .catch instead of .success and .error because the latter are deprecated in newer versions.

  (function() {
        angular.module("BlogApp", []).controller("BlogController", BlogController);
        function BlogController($scope, $http) {
            $scope.createPost=createPost;

            getAllPosts();

        function getAllPosts() {
                $http.get("/api/blogpost").then(function(response) {
                    $scope.posts=response.data; //check if this is what you are looking for
                });
            }

            function createPost(post) {
                console.log(post);
                $http.post("/api/blogpost", post);
            }
        }
    })();

score 0 · Answer 2 · answered Dec 05 '17 at 10:28

Your getAllPosts function should use .then instead of .success as .success is deprecated with angular version above 1.3

  function getAllPosts() {
     $http.get("/api/blogpost").then(function(response) {
         $scope.posts=response.data; 
      });
   }

AngularJS: How to render HTML in $scope variable in view?

2 Answers2