Build a todo app with Angular 1.x and AngularFire
Sign up for a free firebase account. This is basically going to be our database. Somewhere deep down Firebase uses MongoDB. Our database is going to look like a neat JSON object
Create a firebase instance (called a Forge) for this project:
Once that’s set up you can easily add authentication and security rules for real apps. We’re gunna spin up some three way data binding between the $scope, view and our firebase forge, smile and call it a day
Setup a project and a static website:
This gives us access to
$firebase service that we can inject as a dependency anywhere in our app. If you don’t know what that means sit tight, it’s easy.
I don’t really understand how to debug or explain CSS. Copy and paste this into style.css:
I extracted these relevant bits from TodoMVC’s base.css. For the most part we’ll use bootstrap.
So here’s an html setup of our todolist that will let us add and delte todos:
So we need a
TodoCtrl and to define
removeTodo methods on that controller’s scope.
Most everything is going to be in this controller. fireRef creates a reference to our firebase database instance. The url I use is
https://firebasingtodos.firebaseio.com/. It’ll be whatever-you-named-your-forge.firebaseio.com/ in your code. This is kind of like an API endpoint for transorming your data. Next we save the whole database as an array an attach that to the controller’s scope. In the addTodo and removeTodo bits we use methods of the firebase array
.$remove(). That’s it! Now you can post and remove todos, refresh the page and everything stays the same. Open up your Forge in a different browser and you’ll see your database and the browser update at the same time. Neat huh? This only scratches the surface. Make sure to check out the AngularFire API docs to see all the neat angularesque things you can do to your data.
Most of the rest of the code for marking todos as completed and whatnot I stole from the todoMVC example. There is one really ugly bit of code that I have because I couldn’t get the line-through effect to work with ng-class and CSS.
I repeated myself, used
ng-if based on the completion status of the task. This works but if you have a fix to clean this up please submit a pull request and I’ll merge that shit up.