https://github.com/codementorio/angular-tutorial
https://github.com/codementorio/angular-tutorial
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/codementorio/angular-tutorial
- Owner: CodementorIO
- Created: 2016-02-17T09:24:51.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-17T09:57:17.000Z (over 10 years ago)
- Last Synced: 2025-02-16T19:09:26.554Z (over 1 year ago)
- Language: JavaScript
- Size: 169 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngularJS Chat App with Firebase
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](https://github.com/Swiip/generator-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`.
# Step0: From the Start:
This is the starting point of this tutorial, which is simply the scaffolding result of `yeoman`.
# Step1: Warm up
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](https://sample-projects.codementor.io/angular-tutorial/step1)
# Step2: Basic Control Flow with Local Data
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](https://sample-projects.codementor.io/angular-tutorial/step2)
# Step3: Register/Login via Firebase
In this step, we will add register/login funcationality to the app using the [firebase SDK](https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.html).
An example of the result of this step can be found [here](https://sample-projects.codementor.io/angular-tutorial/step3)
# Step4: Connect Data with Firebase
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](https://sample-projects.codementor.io/angular-tutorial/step4)
# Step5: Use different route to handle each user
In this step, we will assign a dedicated URL for each chat using [ui-router](https://github.com/angular-ui/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](https://sample-projects.codementor.io/angular-tutorial/step5)
---
# Getting Started
## Host development environment:
- Install dependencies by `$ npm install; bower install`
- Kick off by `$ gulp serve`