The goal of this tutorial is to guide you through the creation of a Slack clone called fireSlack. Upon completion, you will learn how to build a real time collaborative chat application using angularFire to integrate Firebase with AngularJS. Your application will be able to provide the following features:
- Sign up for an account
- Join/create channels to chat in
- Have a user profile
- Direct message other users
- See who's online
We'll be using Firebase 3 and AngularFire 2 for this tutorial which are both the latest versions for each library.
Clone using ssh:
git clone firstname.lastname@example.org:gothinkster/angularfire-slack.git
Clone using HTTPS:
git clone https://github.com/gothinkster/angularfire-slack.git
Final Notes About the Tutorial
You should never copy and paste code from this text unless we tell you to, as we've found that the skills being taught will stick better if you write out all of the code yourself. If you need more clarification on a certain part of the tutorial, we recommend that viewing the supplementary screencast series as we go into far more detail in each of the videos. It's also significantly easier to learn from the screencast series than the text, as you can actually see how a skilled developer manipulates the concepts in AngularJS to build a working application.
Once the initial codebase is cloned locally, we'll need to run a few commands to install dependencies and get our application up and running. Within our codebase, run the following commands:
npm installto install our node dependencies
npm install -g bower grunt-clito install Bower and Grunt.
bower installto install our bower dependencies
grunt serveto start our application.
grunt serve, open up
http://localhost:4000 and you should see
a splash page for our application, with a non-functional login and register
page ready for us to build off of. In this tutorial, our directory structure
will be grouped by feature (see #1 in this list)
and we will be using ui-router as
our router. We'll also be using the "controller as" syntax for referencing our