Angular: Firebase

http://angularjs.org/

by anup1986

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.4/toaster.js"></script>
<div class="container" ng-controller="MyCtrl">
    <toaster-container toaster-options="{'position-class': 'toast-top-right'}"></toaster-container>
    <div class="page-header">
         <h3>AngularJs + Firebase</h3>
    </div>
    <div class="row">
            <div class="col-sm-4">
            <input class="form-control" ng-model="item.namn" type="text" placeholder="User name" />
            </div>
        </div>
    <div class="row">
        <div class="col-sm-6">
            <ul class="list-unstlyed items-list">
                <li ng-repeat="item in items"> <strong>{{item.namn}}</strong>
- <span>{{item.nyhet}}</span>
 <span class="fa fa-times-circle-o red pull-right" ng-click="removeItem(item)"></span>

                </li>
                <li>
                    <form ng-submit="addItem(item)">
                        <input class="form-control list-input" ng-model="item.nyhet" type="text" placeholder="Message" />
                        <button type="submit" class="hidden"></button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.red {
    color: red;
}

.items-list {
    margin-top: 25px;
}

.list-input {
    border: none;
    border-bottom: 1px solid #dddddd;
    box-shadow: none;
    margin-top: 5px;
    margin-left: -10px;
    border-radius: 0;
    text-indent: 0;
}
.list-input:focus {
    box-shadow: none;
    box-shadow: 0 3px 2px -2px;
}

JavaScript

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

// Skicka in "vad som helst" här, det skapas upp ny instanser och undernoder "ad hoc" här!!
myApp.value('fbURL', 'https://sites.firebaseio.com/Aperi/nyheter')

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.factory('firebaseItems', ['fbURL', '$firebase',

function (fbURL, $firebase) {
    return $firebase(new Firebase(fbURL)).$asArray();
}]);

myApp.controller('MyCtrl', ['$scope', '$firebase', 'firebaseItems', function ($scope, $firebase, firebaseItems) {
    $scope.name = 'Superhero';
    $scope.items = firebaseItems;

    $scope.addItem = function (item) {
        if (!item.namn) {
            return;
        };

        firebaseItems.$add(item);
        item.nyhet = '';
    };

    $scope.removeItem = function (item) {
        firebaseItems.$remove(item);
    };
}]);