Skip to content

T
todomvc
Commit 47353c4a authored by Addy Osmani's avatar Addy Osmani
Browse files
Options

Merge pull request #758 from passy/angular-fire-xmas-upgrade 

AngularJS+Firebase: Upgrade to 1.2.6
parents a14f7ddc e1003658
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 11547 additions and 5462 deletions
labs/architecture-examples/firebase-angular/bower.json
View file @ 47353c4a
......@@ -2,11 +2,11 @@
"name": "todomvc-angular",
"version": "0.0.0",
"dependencies": {
"angular": "~1.0.7",
"angular-fire": "~0.2.0",
"angular": "1.2.6",
"angularfire": "~0.5.0",
"todomvc-common": "~0.1.4"
},
"devDependencies": {
"angular-mocks": "~1.0.5"
"angular-mocks": "1.2.6"
}
}
labs/architecture-examples/firebase-angular/bower_components/angular-fire/bower.json deleted 100644 → 0
View file @ a14f7ddc
{
"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
labs/architecture-examples/firebase-angular/bower_components/angular-mocks/bower.json deleted 100644 → 0
View file @ a14f7ddc
{
"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
labs/architecture-examples/firebase-angular/bower_components/angular/bower.json
View file @ 47353c4a
{
"name": "angular",
"version": "1.0.7",
"version": "1.2.7-build.2025+sha.d1c4766",
"main": "./angular.js",
"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"
"dependencies": {
}
}
\ No newline at end of file
}
labs/architecture-examples/firebase-angular/index.html
View file @ 47353c4a
......@@ -15,13 +15,13 @@
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</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)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="(id, todo) in todos | todoFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<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>
<button class="destroy" ng-click="removeTodo(id)"></button>
</div>
......@@ -31,7 +31,7 @@
</li>
</ul>
</section>
<footer id="footer" ng-show="todos" ng-cloak>
<footer id="footer" ng-show="totalCount" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
......@@ -62,7 +62,7 @@
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="bower_components/todomvc-common/base.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/controllers/todoCtrl.js"></script>
<script src="js/directives/todoFocus.js"></script>
......
labs/architecture-examples/firebase-angular/js/controllers/todoCtrl.js
View file @ 47353c4a
......@@ -3,77 +3,91 @@
/**
* 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
*/
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire) {
this.onDataLoaded = function onDataLoaded($scope, $location, url) {
$scope.$watch('todos', function () {
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);
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, $firebase) {
var url = 'https://todomvc-angular.firebaseio.com/';
var fireRef = new Firebase(url);
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
$scope.$watch('todos', function () {
var total = 0;
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;
}
$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) {
$scope.editedTodo = null;
var title = $scope.todos[id].title.trim();
if (!title) {
$scope.removeTodo(id);
total++;
if (todo.completed === false) {
remaining++;
}
};
});
$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.todos[id] = $scope.originalTodo;
$scope.doneEditing(id);
};
$scope.editTodo = function (id) {
$scope.editedTodo = $scope.todos[id];
$scope.originalTodo = angular.extend({}, $scope.editedTodo);
};
$scope.removeTodo = function (id) {
delete $scope.todos[id];
};
$scope.doneEditing = function (id) {
$scope.editedTodo = null;
var title = $scope.todos[id].title.trim();
if (title) {
$scope.todos.$save(id);
} else {
$scope.removeTodo(id);
}
};
$scope.clearCompletedTodos = function () {
var notCompleted = {};
angular.forEach($scope.todos, function (todo, id) {
if (!todo.completed) {
notCompleted[id] = todo;
}
});
$scope.todos = notCompleted;
};
$scope.revertEditing = function (id) {
$scope.todos[id] = $scope.originalTodo;
$scope.doneEditing(id);
};
$scope.markAll = function (completed) {
angular.forEach($scope.todos, function (todo) {
todo.completed = completed;
});
};
$scope.removeTodo = function (id) {
$scope.todos.$remove(id);
};
$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.editedTodo = null;
......@@ -82,7 +96,6 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, angularFire)
}
$scope.location = $location;
angularFire(url, $scope, 'todos', {}).then(function () {
this.onDataLoaded($scope, $location, url);
}.bind(this));
// Bind the todos to the firebase provider.
$scope.todos = $firebase(fireRef);
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7