Guide Template

Guide Template.markdown

Guide Template

A Pen by Alessandro Falchi on CodePen.

License.

index.jade

ul
  li 
    | hello
    ul
      li  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tenetur repellat, corporis deserunt facilis quos. Quis, quam adipisci nemo possimus placeat ipsum recusandae cupiditate, alias, aliquam ipsa ducimus velit tenetur!
        ul 
          li hello 3

script.js

angular.module('myApp', ['firebase'])



.run(function($rootScope, chatMessages) {
  
  var vm = $rootScope;  
  vm.text = 'Gianni';
  vm.chatMessages = chatMessages;
  vm.submit = function () {
    vm.chatMessages.$add({
      text: vm.text
    });
    vm.text = '';
  };
  
  
  

})

// this factory returns a synchronized array of chat messages
.factory("chatMessages", function($firebaseArray) {
  // create a reference to the database location where we will store our data
  
  //var randomRoomId = Math.round(Math.random() * 100000000);
  var ref = new Firebase("https://m1sc.firebaseio.com/chat/");

  // this uses AngularFire to create the synchronized array
  return $firebaseArray(ref);
  }
)

;

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

style.scss

ul {
  margin: 0 0 0 10px; padding: 0;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />