Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Changes required to make AngularJS/TodoMVC real-time with angularFire.
diff -ur ../todomvc/architecture-examples/angularjs/index.html examples/todomvc/index.html
--- ../todomvc/architecture-examples/angularjs/index.html 2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/index.html 2013-03-22 15:21:00.000000000 -0700
@@ -61,9 +61,10 @@
</footer>
<script src="components/todomvc-common/base.js"></script>
<script src="components/angular/angular.js"></script>
+ <script src="https://cdn.firebase.com/v0/firebase.js"></script>
+ <script src="../../angularFire.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
- <script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoBlur.js"></script>
</body>
diff -ur ../todomvc/architecture-examples/angularjs/js/app.js examples/todomvc/js/app.js
--- ../todomvc/architecture-examples/angularjs/js/app.js 2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/js/app.js 2013-03-22 15:15:22.000000000 -0700
@@ -7,4 +7,4 @@
*
* @type {angular.Module}
*/
-var todomvc = angular.module('todomvc', []);
+var todomvc = angular.module('todomvc', ['firebase']);
diff -ur ../todomvc/architecture-examples/angularjs/js/controllers/todoCtrl.js examples/todomvc/js/controllers/todoCtrl.js
--- ../todomvc/architecture-examples/angularjs/js/controllers/todoCtrl.js 2013-03-15 15:31:06.000000000 -0700
+++ examples/todomvc/js/controllers/todoCtrl.js 2013-03-22 15:44:24.000000000 -0700
@@ -6,25 +6,30 @@
* - retrieves and persist the model via the todoStorage service
* - exposes the model to the template and provides event handlers
*/
-todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
- var todos = $scope.todos = todoStorage.get();
+todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire, filterFilter) {
+ var url = "https://anant.firebaseio.com/angular";
+ $scope.todos = angularFire(url, $scope, 'todos');
$scope.newTodo = '';
$scope.editedTodo = null;
- $scope.$watch('todos', function () {
- $scope.remainingCount = filterFilter(todos, {completed: false}).length;
- $scope.completedCount = todos.length - $scope.remainingCount;
- $scope.allChecked = !$scope.remainingCount;
- todoStorage.put(todos);
- }, true);
-
if ($location.path() === '') {
$location.path('/');
}
-
$scope.location = $location;
+ $scope.todos.then(function(todos) {
+ startWatch($scope, filterFilter);
+ });
+});
+
+function startWatch($scope, filter) {
+ $scope.$watch('todos', function () {
+ $scope.remainingCount = filter($scope.todos, {completed: false}).length;
+ $scope.completedCount = $scope.todos.length - $scope.remainingCount;
+ $scope.allChecked = !$scope.remainingCount;
+ }, true);
+
$scope.$watch('location.path()', function (path) {
$scope.statusFilter = (path === '/active') ?
{ completed: false } : (path === '/completed') ?
@@ -36,7 +41,7 @@
return;
}
- todos.push({
+ $scope.todos.push({
title: $scope.newTodo,
completed: false
});
@@ -56,18 +61,18 @@
};
$scope.removeTodo = function (todo) {
- todos.splice(todos.indexOf(todo), 1);
+ $scope.todos.splice($scope.todos.indexOf(todo), 1);
};
$scope.clearCompletedTodos = function () {
- $scope.todos = todos = todos.filter(function (val) {
+ $scope.todos = $scope.todos.filter(function (val) {
return !val.completed;
});
};
$scope.markAll = function (completed) {
- todos.forEach(function (todo) {
+ $scope.todos.forEach(function (todo) {
todo.completed = completed;
});
};
-});
+}
@djeastm

This comment has been minimized.

Copy link

djeastm commented Oct 23, 2013

Hi. Thanks for this. Do you know what should be done with routeProvider with respect to what happens when a user clicks on /active or /completed? As it stands with my app, clicking these links redirects to my default page, rather than only showing the active or completed todos, respectively. Any ideas on what I'm doing wrong?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.