Commit e1003658 authored by Pascal Hartig's avatar Pascal Hartig

AngularJS+Firebase: Upgrade to 1.2.6

parent 02b43564
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
"name": "todomvc-angular", "name": "todomvc-angular",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"angular": "~1.0.7", "angular": "1.2.6",
"angular-fire": "~0.2.0", "angularfire": "~0.5.0",
"todomvc-common": "~0.1.4" "todomvc-common": "~0.1.4"
}, },
"devDependencies": { "devDependencies": {
"angular-mocks": "~1.0.5" "angular-mocks": "1.2.6"
} }
} }
{
"name": "angular-fire",
"version": "0.2.0",
"main": [
"./angularFire.js",
"./angularfire.min.js"
],
"ignore": [
"Makefile",
"tests",
"README.md",
".travis.yml"
],
"dependencies": {
"angular": "1.0.7"
},
"gitHead": "171b80650f6501143878d2ec50e57f466c31e7d8",
"readme": "AngularFire\n===========\nAngularFire is an officially supported [AngularJS](http://angularjs.org/) binding\nfor [Firebase](http://www.firebase.com/?utm_medium=web&utm_source=angularFire).\nFirebase is a full backend so you don't need servers to build your Angular app!\n\nThe bindings let you associate a Firebase URL with a model (or set of models),\nand they will be transparently kept in sync across all clients currently using\nyour app. The 2-way data binding offered by AngularJS works as normal, except\nthat the changes are also sent to all other clients instead of just a server.\n\n### Live Demo: <a target=\"_blank\" href=\"http://firebase.github.io/angularFire/examples/chat/\">Simple chat room</a>.\n### Live Demo: <a target=\"_blank\" href=\"http://firebase.github.io/angularFire/examples/todomvc/\">Real-time TODO app</a>.\n\n[![Build Status](https://travis-ci.org/firebase/angularFire.png)](https://travis-ci.org/firebase/angularFire)\n\nUsage\n-----\nInclude both firebase.js and angularFire.js in your application.\n\n```html\n<script src=\"https://cdn.firebase.com/v0/firebase.js\"></script>\n<script src=\"angularFire.js\"></script>\n```\n\nAdd the module `firebase` as a dependency to your app module:\n\n```js\nvar myapp = angular.module('myapp', ['firebase']);\n```\n\nYou now have two options.\n\nOption 1: Implicit synchronization\n----------------------------------\nThis method is great if you want to implicitly synchronize a model with Firebase.\nAll local changes will be automatically sent to Firebase, and all remote changes\nwill instantly update the local model.\n\nSet `angularFire` as a service dependency in your controller:\n\n```js\nmyapp.controller('MyCtrl', ['$scope', 'angularFire',\n function MyCtrl($scope, angularFire) {\n ...\n }\n]);\n```\n\nBind a Firebase URL to any model in `$scope`. The fourth argument is the type\nof model you want to use (can be any JavaScript type, you mostly want a\ndictionary or array):\n\n```js\nvar url = 'https://<my-firebase>.firebaseio.com/items';\nvar promise = angularFire(url, $scope, 'items', []);\n```\n\nUse the model in your markup as you normally would:\n\n```html\n<ul ng-controller=\"MyCtrl\">\n <li ng-repeat=\"item in items\">{{item.name}}: {{item.desc}}</li>\n</ul>\n```\n\nData from Firebase is loaded asynchronously, so make sure you edit the model\n*only after the promise has been fulfilled*. You can do this using the `then`\nmethod (See the\n[Angular documentation on $q](http://docs.angularjs.org/api/ng.$q)\nfor more on how promises work).\n\nPlace all your logic that will manipulate the model like this:\n\n```js\npromise.then(function() {\n // Add a new item by simply modifying the model directly.\n $scope.items.push({name: \"Firebase\", desc: \"is awesome!\"});\n // Or, attach a function to $scope that will let a directive in markup manipulate the model.\n $scope.removeItem = function() {\n $scope.items.splice($scope.toRemove, 1);\n $scope.toRemove = null;\n };\n});\n```\n\nSee the source for the\n[controller behind the demo TODO app](https://github.com/firebase/angularFire/blob/gh-pages/examples/todomvc/js/controllers/todoCtrl.js)\nfor a working example of this pattern.\n\nOption 2: Explicit synchronization\n---------------------------------- \nThis method is great if you want control over when local changes are\nsynchronized to Firebase. Any changes made to a model won't be synchronized\nautomatically, and you must invoke specific methods if you wish to update the\nremote data. All remote changes will automatically appear in the local model\n(1-way synchronization).\n\nSet `angularFireCollection` as a service dependency in your controller:\n\n```js\nmyapp.controller('MyCtrl', ['$scope', 'angularFireCollection',\n function MyCtrl($scope, angularFireCollection) {\n ...\n }\n]);\n```\n\nCreate a collection at a specified Firebase URL and assign it to a model in `$scope`:\n\n```js\n$scope.items = angularFireCollection(url);\n```\n\nUse the model as you normally would in your markup:\n\n```html\n<ul ng-controller=\"MyCtrl\">\n <li ng-repeat=\"item in items\">{{item.name}}: {{item.desc}}</li>\n</ul>\n```\n\nYou can bind specific functions if you wish to add, remove or update objects in\nthe collection with any Angular directive:\n\n```html\n<form ng-submit=\"items.add(item)\">\n <input type=\"text\" ng-model=\"item.name\" placeholder=\"Name\" required/>\n <input type=\"text\" ng-model=\"item.desc\" placeholder=\"Description\"/>\n</form>\n```\n\nYou can do the same with the `remove` and `update` methods.\n\nSee the source for the\n[controller behind the demo chat app](https://github.com/firebase/angularFire/blob/gh-pages/examples/chat/app.js)\nfor a working example of this pattern.\n\nDevelopment\n-----------\nIf you'd like to hack on AngularFire itself, you'll need\n[UglifyJS](https://github.com/mishoo/UglifyJS2) and\n[CasperJS](https://github.com/n1k0/casperjs):\n\n```bash\nnpm install uglifyjs -g\nbrew install casperjs\n```\n\nA Makefile is included for your convenience:\n\n```bash\n# Run tests\nmake test\n# Minify source\nmake minify\n```\n\nLicense\n-------\n[MIT](http://firebase.mit-license.org).\n",
"readmeFilename": "README.md",
"_id": "angular-fire@0.2.0",
"description": "AngularFire =========== AngularFire is an officially supported [AngularJS](http://angularjs.org/) binding for [Firebase](http://www.firebase.com/?utm_medium=web&utm_source=angularFire). Firebase is a full backend so you don't need servers to build your Angular app!",
"repository": {
"type": "git",
"url": "git://github.com/firebase/angularFire.git"
}
}
\ No newline at end of file
{
"name": "angular-mocks",
"version": "1.0.7",
"main": "./angular-mocks.js",
"dependencies": {
"angular": "1.0.7"
},
"gitHead": "73ba0b247c919472906ac3fbbe8fa5cce6a853cd",
"readme": "bower-angular-mocks\n===================\n\nangular-mocks.js bower repo",
"readmeFilename": "README.md",
"_id": "angular-mocks@1.0.7",
"description": "bower-angular-mocks ===================",
"repository": {
"type": "git",
"url": "git://github.com/angular/bower-angular-mocks.git"
}
}
\ No newline at end of file
{ {
"name": "angular", "name": "angular",
"version": "1.0.7", "version": "1.2.7-build.2025+sha.d1c4766",
"main": "./angular.js", "main": "./angular.js",
"dependencies": {}, "dependencies": {
"gitHead": "6c0e81da2073f3831e32ed486d5aabe17bfc915f",
"_id": "angular@1.0.7",
"readme": "ERROR: No README.md file found!",
"description": "ERROR: No README.md file found!",
"repository": {
"type": "git",
"url": "git://github.com/angular/bower-angular.git"
} }
} }
\ No newline at end of file
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus> <input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form> </form>
</header> </header>
<section id="main" ng-show="todos" ng-cloak> <section id="main" ng-show="totalCount" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)"> <input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"> <ul id="todo-list">
<li ng-repeat="(id, todo) in todos | todoFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}"> <li ng-repeat="(id, todo) in todos | todoFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed"> <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todos.$save(id)">
<label ng-dblclick="editTodo(id)">{{todo.title}}</label> <label ng-dblclick="editTodo(id)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(id)"></button> <button class="destroy" ng-click="removeTodo(id)"></button>
</div> </div>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</li> </li>
</ul> </ul>
</section> </section>
<footer id="footer" ng-show="todos" ng-cloak> <footer id="footer" ng-show="totalCount" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong> <span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize> <ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span> </span>
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<script src="https://cdn.firebase.com/v0/firebase.js"></script> <script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="bower_components/todomvc-common/base.js"></script> <script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-fire/angularFire.js"></script> <script src="bower_components/angularfire/angularFire.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script> <script src="js/controllers/todoCtrl.js"></script>
<script src="js/directives/todoFocus.js"></script> <script src="js/directives/todoFocus.js"></script>
......
...@@ -3,77 +3,91 @@ ...@@ -3,77 +3,91 @@
/** /**
* The main controller for the app. The controller: * The main controller for the app. The controller:
* - retrieves and persists the model via the angularFire service * - retrieves and persists the model via the $firebase service
* - exposes the model to the template and provides event handlers * - exposes the model to the template and provides event handlers
*/ */
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire) { todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, $firebase) {
this.onDataLoaded = function onDataLoaded($scope, $location, url) { var url = 'https://todomvc-angular.firebaseio.com/';
$scope.$watch('todos', function () { var fireRef = new Firebase(url);
var total = 0;
var remaining = 0;
angular.forEach($scope.todos, function (todo) {
total++;
if (todo.completed === false) {
remaining++;
}
});
$scope.remainingCount = remaining;
$scope.completedCount = total - remaining;
$scope.allChecked = !$scope.remainingCount;
}, true);
$scope.addTodo = function () { $scope.$watch('todos', function () {
var newTodo = $scope.newTodo.trim(); var total = 0;
if (!newTodo.length) { var remaining = 0;
$scope.todos.$getIndex().forEach(function (index) {
var todo = $scope.todos[index];
// Skip invalid entries so they don't break the entire app.
if (!todo || !todo.title) {
return; return;
} }
$scope.todos[new Firebase(url).push().name()] = {
title: newTodo,
completed: false
};
$scope.newTodo = '';
};
$scope.editTodo = function (id) {
$scope.editedTodo = $scope.todos[id];
$scope.originalTodo = angular.extend({}, $scope.editedTodo);
};
$scope.doneEditing = function (id) { total++;
$scope.editedTodo = null; if (todo.completed === false) {
var title = $scope.todos[id].title.trim(); remaining++;
if (!title) {
$scope.removeTodo(id);
} }
}; });
$scope.totalCount = total;
$scope.remainingCount = remaining;
$scope.completedCount = total - remaining;
$scope.allChecked = remaining === 0;
}, true);
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
$scope.todos.$add({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.revertEditing = function (id) { $scope.editTodo = function (id) {
$scope.todos[id] = $scope.originalTodo; $scope.editedTodo = $scope.todos[id];
$scope.doneEditing(id); $scope.originalTodo = angular.extend({}, $scope.editedTodo);
}; };
$scope.removeTodo = function (id) { $scope.doneEditing = function (id) {
delete $scope.todos[id]; $scope.editedTodo = null;
}; var title = $scope.todos[id].title.trim();
if (title) {
$scope.todos.$save(id);
} else {
$scope.removeTodo(id);
}
};
$scope.clearCompletedTodos = function () { $scope.revertEditing = function (id) {
var notCompleted = {}; $scope.todos[id] = $scope.originalTodo;
angular.forEach($scope.todos, function (todo, id) { $scope.doneEditing(id);
if (!todo.completed) { };
notCompleted[id] = todo;
}
});
$scope.todos = notCompleted;
};
$scope.markAll = function (completed) { $scope.removeTodo = function (id) {
angular.forEach($scope.todos, function (todo) { $scope.todos.$remove(id);
todo.completed = completed; };
});
}; $scope.toggleCompleted = function (id) {
var todo = $scope.todos[id];
todo.completed = !todo.completed;
$scope.todos.$save(id);
};
$scope.clearCompletedTodos = function () {
angular.forEach($scope.todos.$getIndex(), function (index) {
if ($scope.todos[index].completed) {
$scope.todos.$remove(index);
}
});
};
$scope.markAll = function (allCompleted) {
angular.forEach($scope.todos.$getIndex(), function (index) {
$scope.todos[index].completed = !allCompleted;
});
$scope.todos.$save();
}; };
var url = 'https://todomvc-angular.firebaseio.com/';
$scope.newTodo = ''; $scope.newTodo = '';
$scope.editedTodo = null; $scope.editedTodo = null;
...@@ -82,7 +96,6 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire) ...@@ -82,7 +96,6 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire)
} }
$scope.location = $location; $scope.location = $location;
angularFire(url, $scope, 'todos', {}).then(function () { // Bind the todos to the firebase provider.
this.onDataLoaded($scope, $location, url); $scope.todos = $firebase(fireRef);
}.bind(this));
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment