This tutorial will walk you through how to use AngularJS to build a simple chat app hosted on Firebase. The app will be scaffolded by Yeoman's gulp-angular generator.
The tutorial is split into five steps. After finishing all these steps, your client should be able to end up with a live chat app!
Each finished step is tagged in the repo as you can see by using the command $ git tag
.
This is the starting point of this tutorial, which is simply the scaffolding result of yeoman
.
In this step, you will build the basic UI elements of this chat app using static data.
A sample of the finished version of this step can be found here
In this step, we will add basic control flows using our local data.
A sample of the result of this step can be found here
In this step, we will add register/login funcationality to the app using the firebase SDK.
An example of the result of this step can be found here
In this step, we will replace our in-memory mock data with the real one on firebase.
An example of the result of this step can be found here
In this step, we will assign a dedicated URL for each chat using ui-router. This way, we can stay at the same chat even after we refresh our browser. An example of the result of this step can be found here
- Install dependencies by
$ npm install; bower install
- Kick off by
$ gulp serve