<commit_before>---
layout: post
title: Angular + Firebase = Chat App
tags:
    - angular
    - firebase
---

Angular is a JavaScript framework and Firebase is a real-time database service. Put them together (with a tiny bit of glue code) and you, too, can have a fully functioning chat application.

First, a quick and dirty `index.html` file:

```html
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script data-require="firebase@*" data-semver="2.2.2" src="//cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script data-require="angularfire@1.0.0" data-semver="1.0.0" src="//cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="MainCtrl as view">
    Name: <input type="text" ng-model="view.name"/><br><br>
    Message:<br>
    <textarea type="text" ng-model="view.text"></textarea><br>
    <button ng-click="view.addMessage(view.name, view.text)">Send</button>
    <button ng-click="view.clearAll()">Clear all messages</button>
    <hr />
    <p ng-repeat="message in view.messages"><strong>{{message.from}}: </strong>{{message.body}}</p>
  </body>
</html>
```
In the `<head>` we're pulling in Angular, Firebase and the AngularFire library.
<commit_msg>remove doctype from code snippet<commit_after>---
layout: post
title: Angular + Firebase = Chat App
tags:
    - angular
    - firebase
---

Angular is a JavaScript framework and Firebase is a real-time database service. Put them together (with a tiny bit of glue code) and you, too, can have a fully functioning chat application.

First, a quick and dirty `index.html` file:

```html
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script data-require="firebase@*" data-semver="2.2.2" src="//cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <script data-require="angularfire@1.0.0" data-semver="1.0.0" src="//cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="MainCtrl as view">
    Name: <input type="text" ng-model="view.name"/><br><br>
    Message:<br>
    <textarea type="text" ng-model="view.text"></textarea><br>
    <button ng-click="view.addMessage(view.name, view.text)">Send</button>
    <button ng-click="view.clearAll()">Clear all messages</button>
    <hr />
    <p ng-repeat="message in view.messages"><strong>{{message.from}}: </strong>{{message.body}}</p>
  </body>
</html>
```
In the `<head>` we're pulling in Angular, Firebase and the AngularFire library.

{'fraction_non_alphanumeric': 0.19128329297820823, 'fraction_numerical': 0.0186786579038395, 'mean_word_length': 3.9776247848537003, 'pattern_counts': {'":': 0, '<': 68, '<?xml version=': 0, '>': 68, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '244866', 'n_tokens_mistral': 1038, 'n_tokens_neox': 996, 'n_words': 228}