AngularFire Crud Management System

V1

by psyne

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div ng-controller="itemsCtrl" class="container">
    <div class="well">
         <h4>Add Store</h4>
        <form role="form" ng-submit="addItem()">
            <ul class="list-group">
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.Name" placeholder="Name" required>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.Address" placeholder="Address" required>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.City" placeholder="City" required>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.State" placeholder="State" required>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.Zip" placeholder="Zip" required>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.Lat" placeholder="Latitude" required disabled>
                </li>
                <li class="list-group-item">
                    <input type="text" class="form-control" ng-model="newItem.Long" placeholder="Longitude" required disabled>
                </li>
                <li...

JavaScript

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

myapp.controller('itemsCtrl', ["$scope", "$rootScope", "angularFireCollection", function ($scope, $rootScope, angularFireCollection) {

    var ref = new Firebase("");
    var geocoder = new google.maps.Geocoder();

    $scope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn && (typeof (fn) === 'function')) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };

    $scope.items = angularFireCollection(ref);

    $scope.addItem = function () {
        ref.push({
            "Name": $scope.newItem.Name,
                "Address": $scope.newItem.Address,
                "City": $scope.newItem.City,
                "State": $scope.newItem.State,
                "Zip": $scope.newItem.Zip,
                "Lat": $scope.newItem.Lat,
                "Long": $scope.newItem.Long
        });
        $scope.newItem.Name = '';
        $scope.newItem.Address = '';
        $scope.newItem.City = '';
        $scope.newItem.State = '';
        $scope.newItem.Zip = '';
        $scope.newItem.Lat = '';
        $scope.newItem.Long = '';
        $('#submitForm').addClass('hidden');
        $('#getLatLong').removeClass('hidden');
    };

    $scope.getLatLong = function () {
        var address = $scope.newItem.Address + ' ' + $scope.newItem.City + ' ' + $scope.newItem.State + ' ' + $scope.newItem.Zip;

        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                $('#submitForm').removeClass('hidden');
                $('#getLatLong').addClass('hidden');
                $scope.safeApply(function () {
                    $scope.newItem.Lat = results[0].geometry.location.lat();
                    $scope.newItem.Long = results[0].geometry.location.lng();
                });

            }...