React Tutorial in AngularJS

Lack of modularity. Proper example should use directives for each part.

by Zaiste

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.3/css/foundation.min.css">
<script src="//code.angularjs.org/1.2.1/angular-sanitize.js"></script>
<div class="commentBox" ng-controller="commentCtrl">
    <div class="panel" ng-repeat="comment in comments">
         <h3>{{comment.author}}</h3>
         <span ng-bind-html="comment.text | markdown | unsafe"></span>
    </div>
    <form ng-submit="post()">
        <input type="text" ng-model="author" placeholder="Your name" required />
        <textarea ng-model="text" placeholder="Say something..." required></textarea>
        <input type="submit" value="Add" class="button" />
    </form>
</div>

JavaScript

var app = angular.module('app', ['ngSanitize']);

app.controller('commentCtrl', function ($scope, $http, $timeout) {
    $scope.comments = [{
        author: 'AngularJS 1',
        text: 'This is one comment'
    }, {
        author: 'AngularJS 2',
        text: 'This is *another* comment'
    }];

    $scope.post = function () {
        if ($scope.author && $scope.text) {
            var comment = {
                author: $scope.author,
                text: $scope.text
            };
            $scope.comments.push(comment);
            $http.post('http://example.com', comment).success(function (comments) {
                $scope.comments = comments;
            });
            $scope.author = '';
            $scope.text = '';
        }
    };

    (function poll() {
        $http.get('http://example.com').success(

        function (comments) {
            $scope.comments = comments;
            $timeout(poll, 5000);
        });
    })();
});

app.filter('markdown', function () {
    var converter = new Showdown.converter();

    return function (input) {
        return converter.makeHtml(input || '');
    };
});

app.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});