Angular1 to Angular2 : services

First step of the transformation of angular1 controller to angular2 componant

by manland

HTML

<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<div class="app" ng-app="app" ng-controller="LittleCtrl">
    <ul class="confs">
        <li class="conf" ng-repeat="conf in confs">
            <img class="conf-img" ng-src="{{conf.icon}}" />
            <a class="conf-url" href="{{conf.url}}" target="_blank">{{conf.name}} le {{conf.date}}</a>
        </li>
        <li class="conf">
            <input class="conf-input" type="text" ng-model="newConf.icon" placeholder="src image" />
            <input class="conf-input" type="text" ng-model="newConf.name" placeholder="titre" />
            <input class="conf-input" type="text" ng-model="newConf.url" placeholder="url" />
            <input class="conf-input" type="text" ng-model="newConf.date" placeholder="date" />
            <input class="conf-input" type="button" value="Ok" ng-click="addNewConf()" />
        </li>
    </ul>
</div>

CSS

body {
    background-color: #444;
    color: #fff;
}

a {
    color: inherit;
    text-decoration: none;
}



.confs {
    padding: 0;
}

.conf {
    list-style: none;
    border: 1px solid #222;
    padding: 10px;
    color: #fff;
    height: 50px;
}

.conf-img {
    height: 50px;
    max-width: 120px;
    margin-right: 15px;
    vertical-align: middle;
}

.conf-url {
    vertical-align: middle;
}

.conf-input {
    width: 100px;
}

JavaScript

var data = [
    {name: 'jug-montpellier', url: 'http://jug-montpellier.org/', date: 'tous les 3eme mercredi', icon: 'http://www.jug-montpellier.org/public/images/logo.png'},
    {name: 'devoxx', url: 'http://www.devoxx.fr/', date: '20 Avril 2016', icon: 'https://pbs.twimg.com/profile_images/587897238568968192/NMdj4LCC.png'},
    {name: 'KiwiParty', url: 'http://kiwiparty.fr/', date: 'Juin 2016', icon: 'http://kiwiparty.fr/xmedia/kiwiparty/2015/logo-kiwiparty.svg'},
    {name: 'mix-IT', url: 'http://www.mix-it.fr/', date: 'Avril 2016', icon: 'http://www.mix-it.fr/public/images/mini-mixit.png'}
];

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

app.controller('LittleCtrl', [
    '$scope', 'LittleSrv',
    function ($scope, LittleSrv) {
        $scope.confs = LittleSrv.getConfs();
        $scope.newConf = LittleSrv.buildConf();
        
        $scope.addNewConf = function() {
            LittleSrv.addConf($scope.newConf);
            $scope.newConf = LittleSrv.buildConf();
        };
    }
]);

app.factory('LittleSrv', [
    function() {
        var confs = data;

        return {
            buildConf: function() {
                return {};
            },
            getConfs: function() {
                return confs;
            },
            addConf: function(newConf) {
                confs.push(newConf);
            }
        }
    }
]);