Angular with Firebase for Ionic

Angular with Firebase for Ionic.markdown

Angular with Firebase for Ionic

A Pen by Marcell Kiss on CodePen.

License.

index.jade

html(ng-app='ionicApp')
head
    meta(charset='utf-8') 
    meta(name='viewport', content='initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width')
    title Tabs Example  
    link(href='//code.ionicframework.com/nightly/css/ionic.css', rel='stylesheet')  
    script(src='//code.ionicframework.com/nightly/js/ionic.bundle.js')
    script(src='https://cdn.firebase.com/js/client/2.2.4/firebase.js')
    script(src='https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js')
  body
    ion-nav-bar.bar-assertive
      ion-nav-back-button.button-icon.ion-arrow-left-c
    ion-nav-view 
    script(id='templates/tabs.html', type='text/ng-template').
      <ion-tabs class="tabs-icon-top tabs-assertive">
        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
      </ion-tabs>

    script(id='templates/home.html', type='text/ng-template').
      <ion-view view-title="Home">
        <ion-content class="padding">
          <h3>Welcome to the Angular@Budapest TestApp</h3>
          You can find the source here at <a href='http://codepen.io/marcellkiss/pen/VLmZMG'>codepen.io</a>.
          <p>
            More details are coming soon, visit <a href='blog.budacode.com'>blog.budacode.com</a> and stay up-to-date.
          </p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/topics">Vote for topics</a>
        </ion-content>
      </ion-view>

    script(id='templates/topics.html', type='text/ng-template').
      <ion-view title="Topics">
        <ion-content>
          <div class="item item-divider">
          List of topics
          </div>
          <ion-list>
            <ion-item class='item-button-right' ng-repeat='(key, topic) in topics'>
              {{topic.title}} ({{topic.vote}})
              <button class="button button-stable", ng-click='voteUp(topic)'>
                VOTE
              </button>
            </ion-item>
            <div class="item item-divider">
              Add new topic
            </div>
            <div class="list">
              <label class="item item-input">
                <input type="text" placeholder="Topic title" ng-model='newTopic'>
              </label>
            </div>
            <button class="button button-block button-stable" ng-click='addTopic(newTopic)'>
              Submit
            </button>
          </ion-list>
        </ion-content>
      </ion-view>
 

script.js

angular.module('ionicApp', ['ionic', 'firebase'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html"
        }
      }
    })
    .state('tabs.topics', {
      url: "/topics",
      views: {
        'home-tab': {
          templateUrl: "templates/topics.html",
          controller: 'TopicsCtrl'
        }
      }
    });

   $urlRouterProvider.otherwise("/tab/home");

})

.controller("TopicsCtrl", function($scope, $firebaseObject, $firebaseArray) {
  $scope.newTopic = undefined;
  $scope.topics = undefined;
  
  var ref = new Firebase("https://scorching-torch-4715.firebaseio.com/topics");

  // download the data into a local object
  $scope.topics = $firebaseArray(ref);
  
  $scope.topics.$loaded().then(function() { 
  	console.log($scope.topics);
  });
  
  $scope.addTopic = function(newTopic){
    console.log(1, newTopic);
    $scope.topics.$add({
      title: newTopic,
      vote: 1
    });
    console.log($scope.topics);
  };
  
  $scope.voteUp = function(topic) {
    topic.vote++;
    $scope.topics.$save(topic);
  };
  
  
  $scope.voteDown = function(topic) {
    topic.vote--;
    $scope.topics.$save(topic);
  };
  

  //console.log($scope.data);

  // putting a console.log here won't work, see below
});

style.scss

.margined {
  margin-top: 30px;
}

.padded {
  padding: 10px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" />