Angular 1.0 - Simple Reddit

add-article.controller.js

(function() { 'use strict';

angular
    .module('app')
    .controller('RedditAddArticleController', RedditAddArticleController)


/**
 * @constructor
 * @param $scope dependency injected child scope for this controller
 */
function RedditAddArticleController($scope) {
    /** @type {?string} */
    $scope.newTitle = null;
    
    /** @type {?string} */
    $scope.newLink = null;
    
    $scope.addArticle = addArticle;
    
    
    function addArticle() {
        $scope.$parent.addArticle($scope.newTitle, $scope.newLink);

        $scope.newTitle = null;
        $scope.newLink = null;
    }
}

}());

add-article.html

<div ng-controller="RedditAddArticleController">
    <form name="addArticleForm" class="ui large form segment" novalidate>
        <h3 class="ui header">Add a Link</h3>
        
        <div class="field">
            <label for="title">Title:</label>
            <input name="title" ng-model="newTitle" required>
        </div>
        <div class="field">
            <label for="link">Link:</label>
            <input name="link" ng-model="newLink"  required>
        </div>
    
        <button ng-click="addArticle(newTitle, newLink)"
                class="ui positive right floated button"
                ng-disabled="addArticleForm.$invalid">
            Submit link
        </button>
    </form>
</div>

app.controller.js

(function() { 'use strict';

angular
    .module('app')
    .controller('RedditAppController', RedditAppController)


/**
 * @constructor
 * @param $scope dependency-injected $scope instance
 * @param Article dependency-injected `Article` constructor function
 */
function RedditAppController($scope, Article) {
    $scope.articles = [
        new Article('AngularJS (1.x)', 'http://www.angularjs.org', 3),
        new Article('Apache Wicket', 'http://wicket.apache.org/', 2),
        new Article('Angular 2', 'http://angular.io', 1)
    ];

    $scope.addArticle = addArticle;
    $scope.sortedArticles = sortedArticles;


    /**
     * @param {string} title
     * @param {string} link
     * @this RedditAppController
     */
    function addArticle(title, link) {
        $scope.articles.push(new Article(title, link, 0));
    }

    /**
     * @returns {Article[]}
     * @this RedditAppController
     */
    function sortedArticles() {
       return $scope.articles
            .sort(function(a, b) {
                return b.votes - a.votes;
            });
    }
}

}());

app.html

<div ng-controller="RedditAppController">
    <div ng-include="'add-article.html'"></div>

    <div>
        <div ng-repeat="article in sortedArticles()">
            <div ng-include="'article.html'"></div> 
        </div>
     </div>
</div>

app.module.js

angular.module('app', []);

article.controller.js

(function() { 'use strict';

angular
    .module('app')
    .controller('RedditArticleController', RedditArticleController)


/**
 * @constructor
 */
function RedditArticleController($scope, $element) {
    //HACK: Semantic UI pakt alleen maar de `class="row"` indien deze direct op
    //  het element wordt gezet; een wrapper `<div class="row">` werkt dus niet
    $element.addClass('row');

    $scope.voteUp = voteUp;
    $scope.voteDown = voteDown;


    function voteUp() {
        $scope.article.voteUp();
    }

    function voteDown() {
        $scope.article.voteDown();
    }
}

}());

article.html

<div class="divider">
    <div class="ui grid container posts">
        <div ng-controller="RedditArticleController" class="row">
            <div class="four wide column center aligned votes">
                <div class="ui statistic">
                    <div class="value">
                        {{ article.votes }}
                    </div>
                    <div class="label">
                        Points
                    </div>
                </div>
            </div>
            <div class="twelve wide column">
                <a class="ui large header" href="{{ article.link }}">
                    {{ article.title }}
                </a>
                <div class="meta">({{ article.domain() }})</div>
                <ul class="ui big horizontal list voters">
                    <li class="item">
                        <a href ng-click="article.voteUp()">
                            <i class="arrow up icon"></i> upvote
                        </a>
                    </li>
                    <li class="item">
                        <a href ng-click="article.voteDown()">
                            <i class="arrow down icon"></i> downvote
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

article.service.factory.js

(function() { 'use strict';

angular
    .module('app')
    .value('Article', Article);


/**
 * @param {string} title
 * @param {string} link
 * @param {number} [votes=0]
 */
function Article(title, link, votes) {
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
}

/** @returns {string} */
Article.prototype.domain = function() {
    try {
        var link = this.link.split('//')[1];
        return link.split('/')[0];
    } catch (err) {
        return null;
    }
}

Article.prototype.voteUp = function() {
    this.votes += 1;
}

Article.prototype.voteDown = function() {
    this.votes -= 1;
}

}());

index.html

<!DOCTYPE html>
<html ng-app="app">

    <head>
        <title>Angular 1.0 - Simple Reddit</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <body>
        <div class="ui main text container">
            <div ng-include="'app.html'"></div>
        </div>

        <script src="https://code.angularjs.org/1.0.8/angular.js" data-require="angular.js@1.0.x" data-semver="1.0.8"></script>
        <script src="app.module.js"></script>
        <script src="app.controller.js"></script>
        <script src="add-article.controller.js"></script>
        <script src="article.controller.js"></script>
        <script src="article.service.factory.js"></script>
    </body>

</html>

styles.css

.ui.menu .item img.logo {
    margin-right: 1.5em;
}

form.ui.segment.form {
    background-color: #F1F9FF;
    margin-top: 2em;
}

form.form:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.votes {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E6E6E6;
    padding: 1em 0;
    border-radius: 5px;
}

.ui.grid.posts {
    margin-top: 2em;
}

.meta {
    color: #9A9A9A
}

.ui.grid>.row>.column.votes {
    display: flex;
}

ul.ui.list li:before {
    content: '';
}

.voters {
    clear: both;
    width: 100%;
}