Skip to content

Commit f8be081

Browse files
feat: remove Firebase demo app
The demo app uses a deprecated FirebaseAuth API.
1 parent a4d25c5 commit f8be081

File tree

2 files changed

+29
-367
lines changed

2 files changed

+29
-367
lines changed

Diff for: src/index.html

+29-344
Original file line numberDiff line numberDiff line change
@@ -256,54 +256,6 @@ <h4 class="text-title">AngularJS Todo Tutorial</h4>
256256
</div>
257257
</div>
258258

259-
260-
<h3 class="text-display-1" id="wire-up-a-backend">Wire up a Backend</h3>
261-
<div class="row">
262-
<div class="span4">
263-
<h4 class="text-title">Deep Linking</h4>
264-
<p class="text-body">
265-
A deep link reflects where the user is in the app. This is useful so users can bookmark
266-
and email links to locations within the app. Round trip apps get this automatically, but
267-
AJAX apps by their nature do not. AngularJS combines the benefits of deep linking with
268-
desktop app-like behavior.
269-
</p>
270-
</div>
271-
<div class="span4">
272-
<h4 class="text-title">Form Validation</h4>
273-
<p class="text-body">
274-
Client-side form validation is an important part of a great user experience.
275-
AngularJS lets you declare the validation rules of the form without having to write
276-
JavaScript code. Write less code, go have beer sooner.
277-
</p>
278-
</div>
279-
<div class="span4">
280-
<h4 class="text-title">Server Communication</h4>
281-
<p class="text-body">
282-
AngularJS provides built-in services on top of XHR as well as various other backends
283-
using third party libraries. Promises further simplify your code
284-
by handling asynchronous return of data. In this example, we use the AngularFire
285-
library to wire up a <a href="https://www.firebase.com/">Firebase</a> backend to a simple AngularJS app.
286-
</p>
287-
</div>
288-
</div>
289-
<div class=" row example">
290-
<div class="span8 app-source" app-source="project.html project.js list.html detail.html project-list.js" resource="resource" route="route" firebase="firebase" annotate="project.annotation" module="project"></div>
291-
<div class="span4">
292-
<span hint></span>
293-
<span class="pull-right" plnkr="project.html list.html detail.html project.js project-list.js" resource="resource" route="route" firebase="firebase" module="project"></span>
294-
<div class="tabs-spacer"></div>
295-
<!--[if lt IE 10]>
296-
<div class="alert alert-error">
297-
Your browser doesn't support <a href="https://www.w3.org/TR/cors/">CORS</a>, therefore
298-
it can not fetch data from an external domain resulting in no projects shown in this example.
299-
</div>
300-
<![endif]-->
301-
<div app-run="project.html" module="project" class="well"></div>
302-
</div>
303-
</div>
304-
305-
306-
307259
<h3 class="text-display-1" id="create-components">Create Components</h3>
308260
<div class="row">
309261
<div class="span4">
@@ -344,6 +296,35 @@ <h4>Locale: SK</h4>
344296
</div>
345297
</div>
346298

299+
<h3 class="text-display-1" id="wire-up-a-backend">Navigation, Forms and Backends</h3>
300+
<div class="row">
301+
<div class="span4">
302+
<h4 class="text-title">Deep Linking</h4>
303+
<p class="text-body">
304+
A deep link reflects where the user is in the app. This is useful so users can bookmark
305+
and email links to locations within the app. Round trip apps get this automatically, but
306+
AJAX apps by their nature do not. AngularJS combines the benefits of deep linking with
307+
desktop app-like behavior.
308+
</p>
309+
</div>
310+
<div class="span4">
311+
<h4 class="text-title">Form Validation</h4>
312+
<p class="text-body">
313+
Client-side form validation is an important part of a great user experience.
314+
AngularJS lets you declare the validation rules of the form without having to write
315+
JavaScript code. Write less code, go have beer sooner.
316+
</p>
317+
</div>
318+
<div class="span4">
319+
<h4 class="text-title">Server Communication</h4>
320+
<p class="text-body">
321+
AngularJS provides built-in services on top of XHR as well as various other backends
322+
using third party libraries. Promises further simplify your code
323+
by handling asynchronous return of data.
324+
</p>
325+
</div>
326+
</div>
327+
347328
<h3 class="text-display-1" id="testability">Testability Built-in</h3>
348329
<div class="row">
349330
<div class="span6">
@@ -495,302 +476,6 @@ <h2>Todo</h2>
495476
}
496477
</script>
497478
</div>
498-
<div class="project-code">
499-
<!-- ============== Projects ============== -->
500-
<style type="text/css" id="project.css">
501-
table { text-align: left; }
502-
table td, table th {
503-
vertical-align: top;
504-
padding: 0 .25em;
505-
}
506-
</style>
507-
<script id="project.js">
508-
angular.module('project', ['ngRoute', 'firebase'])
509-
510-
.value('fbURL', 'https://ng-projects-list.firebaseio.com/')
511-
.service('fbRef', function(fbURL) {
512-
return new Firebase(fbURL)
513-
})
514-
.service('fbAuth', function($q, $firebase, $firebaseAuth, fbRef) {
515-
var auth;
516-
return function () {
517-
if (auth) return $q.when(auth);
518-
var authObj = $firebaseAuth(fbRef);
519-
if (authObj.$getAuth()) {
520-
return $q.when(auth = authObj.$getAuth());
521-
}
522-
var deferred = $q.defer();
523-
authObj.$authAnonymously().then(function(authData) {
524-
auth = authData;
525-
deferred.resolve(authData);
526-
});
527-
return deferred.promise;
528-
}
529-
})
530-
531-
.service('Projects', function($q, $firebase, fbRef, fbAuth, projectListValue) {
532-
var self = this;
533-
this.fetch = function () {
534-
if (this.projects) return $q.when(this.projects);
535-
return fbAuth().then(function(auth) {
536-
var deferred = $q.defer();
537-
var ref = fbRef.child('projects-fresh/' + auth.auth.uid);
538-
var $projects = $firebase(ref);
539-
ref.on('value', function(snapshot) {
540-
if (snapshot.val() === null) {
541-
$projects.$set(projectListValue);
542-
}
543-
self.projects = $projects.$asArray();
544-
deferred.resolve(self.projects);
545-
});
546-
547-
//Remove projects list when no longer needed.
548-
ref.onDisconnect().remove();
549-
return deferred.promise;
550-
});
551-
};
552-
})
553-
554-
.config(function($routeProvider) {
555-
var resolveProjects = {
556-
projects: function (Projects) {
557-
return Projects.fetch();
558-
}
559-
};
560-
561-
$routeProvider
562-
.when('/', {
563-
controller:'ProjectListController as projectList',
564-
templateUrl:'list.html',
565-
resolve: resolveProjects
566-
})
567-
.when('/edit/:projectId', {
568-
controller:'EditProjectController as editProject',
569-
templateUrl:'detail.html',
570-
resolve: resolveProjects
571-
})
572-
.when('/new', {
573-
controller:'NewProjectController as editProject',
574-
templateUrl:'detail.html',
575-
resolve: resolveProjects
576-
})
577-
.otherwise({
578-
redirectTo:'/'
579-
});
580-
})
581-
582-
.controller('ProjectListController', function(projects) {
583-
var projectList = this;
584-
projectList.projects = projects;
585-
})
586-
587-
.controller('NewProjectController', function($location, projects) {
588-
var editProject = this;
589-
editProject.save = function() {
590-
projects.$add(editProject.project).then(function(data) {
591-
$location.path('/');
592-
});
593-
};
594-
})
595-
596-
.controller('EditProjectController',
597-
function($location, $routeParams, projects) {
598-
var editProject = this;
599-
var projectId = $routeParams.projectId,
600-
projectIndex;
601-
602-
editProject.projects = projects;
603-
projectIndex = editProject.projects.$indexFor(projectId);
604-
editProject.project = editProject.projects[projectIndex];
605-
606-
editProject.destroy = function() {
607-
editProject.projects.$remove(editProject.project).then(function(data) {
608-
$location.path('/');
609-
});
610-
};
611-
612-
editProject.save = function() {
613-
editProject.projects.$save(editProject.project).then(function(data) {
614-
$location.path('/');
615-
});
616-
};
617-
});
618-
</script>
619-
<script id="project-list.js">
620-
angular.module('project').value('projectListValue', [
621-
{
622-
name: 'AngularJS',
623-
site: 'https://angularjs.org',
624-
description: 'HTML enhanced for web apps!'
625-
},
626-
{
627-
name: 'Angular',
628-
site: 'https://angular.io',
629-
description: 'One framework. Mobile and desktop.'
630-
},
631-
{
632-
name: 'jQuery',
633-
site: 'https://jquery.com/',
634-
description: 'Write less, do more.'
635-
},
636-
{
637-
name: 'Backbone',
638-
site: 'https://backbonejs.org/',
639-
description: 'Models for your apps.'
640-
},
641-
{
642-
name: 'SproutCore',
643-
site: 'https://sproutcore.com/',
644-
description: 'A Framework for Innovative web-apps.'
645-
},
646-
{
647-
name: 'Polymer',
648-
site: 'https://www.polymer-project.org/',
649-
description: 'Reusable components for the modern web.'
650-
},
651-
{
652-
name: 'Vue.js',
653-
site: 'https://vuejs.org/',
654-
description: 'The Progressive JavaScript Framework.'
655-
},
656-
{
657-
name: 'Cappucino',
658-
site: 'http://www.cappuccino-project.org/',
659-
description: 'Objective-J.'
660-
},
661-
{
662-
name: 'Knockout',
663-
site: 'http://knockoutjs.com/',
664-
description: 'MVVM pattern.'
665-
},
666-
{
667-
name: 'GWT',
668-
site: 'http://www.gwtproject.org/',
669-
description: 'JS in Java.'
670-
},
671-
{
672-
name: 'Ember',
673-
site: 'https://emberjs.com/',
674-
description: 'Ambitious web apps.'
675-
},
676-
{
677-
name: 'React',
678-
site: 'https://reactjs.org/',
679-
description: 'A JavaScript library for building user interfaces.'
680-
}
681-
])
682-
</script>
683-
<script type="text/ng-template" id="project.html">
684-
<h2>JavaScript Projects</h2>
685-
<div ng-view></div>
686-
</script>
687-
<script type="text/ng-template" id="list.html">
688-
<input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
689-
placeholder="Search">
690-
<table>
691-
<thead>
692-
<tr>
693-
<th>Project</th>
694-
<th>Description</th>
695-
<th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
696-
</tr>
697-
</thead>
698-
<tbody>
699-
<tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
700-
<td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
701-
<td>{{project.description}}</td>
702-
<td>
703-
<a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
704-
</td>
705-
</tr>
706-
</tbody>
707-
</table>
708-
</script>
709-
<script type="text/ng-template" id="detail.html">
710-
<form name="myForm">
711-
<div class="control-group" ng-class="{error: myForm.name.$invalid && !myForm.name.$pristine}">
712-
<label>Name</label>
713-
<input type="text" name="name" ng-model="editProject.project.name" required>
714-
<span ng-show="myForm.name.$error.required && !myForm.name.$pristine" class="help-inline">
715-
Required {{myForm.name.$pristine}}</span>
716-
</div>
717-
718-
<div class="control-group" ng-class="{error: myForm.site.$invalid && !myForm.site.$pristine}">
719-
<label>Website</label>
720-
<input type="url" name="site" ng-model="editProject.project.site" required>
721-
<span ng-show="myForm.site.$error.required && !myForm.site.$pristine" class="help-inline">
722-
Required</span>
723-
<span ng-show="myForm.site.$error.url" class="help-inline">
724-
Not a URL</span>
725-
</div>
726-
727-
<label>Description</label>
728-
<textarea name="description" ng-model="editProject.project.description"></textarea>
729-
730-
<br>
731-
<a href="#/" class="btn">Cancel</a>
732-
<button ng-click="editProject.save()" ng-disabled="myForm.$invalid"
733-
class="btn btn-primary">Save</button>
734-
<button ng-click="editProject.destroy()"
735-
ng-show="editProject.project.$id" class="btn btn-danger">Delete</button>
736-
</form>
737-
</script>
738-
<script type="text/ng-template" id="project.annotation">
739-
{ "project.html":
740-
{ "ng-app": "Tells AngularJS to be active in this portion of the page. In this case the entire document."
741-
, "project": "The <code>ng-app</code> activates the <code>project</code> module for this page region. This lets you have modules that run in different parts of the page."
742-
, "angular.min.js": "Load AngularJS."
743-
, "angular-resource.min.js": "Load AngularJS resource module."
744-
, "angular-route.min.js": "Load AngularJS route module."
745-
, "firebase.js": "Load the Firebase JavaScript SDK."
746-
, "angularfire.min.js": "Load the AngularJS bindings for Firebase."
747-
, "project.js": "The <code>project.js</code> file contains the controllers which specify your application’s behavior."
748-
, "ng-view": "We’re marking this <code>&lt;div&gt;</code> as the place we’ll load partial pages or “views”. The surrounding page will stay static while we load changing UI into this section. In this case, we’ll be switching between a list of “projects” and the form to add new or edit existing “projects”."
749-
}
750-
, "project.js":
751-
{ "project": "This defines the <code>project</code> module. You use modules to configure existing services, and define new services, directives, filters, and so on. Here, we’ll set up ‘routes’ that map URLs to partials. AngularJS watches the browser location and automatically updates the partial when the URL changes."
752-
, "firebase": "Modules can depend on other modules. Here, <code>project</code> needs <code>firebase</code> which handles the persistence for this application."
753-
, "value": "Define a singleton object that can be injected into controllers and services."
754-
, "fbURL": "The URL to the Firebase location from which we want to load data (and store changes)."
755-
, "factory": "Define a factory that will return a singleton object that can be injected into controllers and services."
756-
, "$firebase": "A service provided by AngularFire for binding data from Firebase to AngularJS models."
757-
, "$asArray": "A method that returns data from Firebase in the form of a synchronized array."
758-
, "config": "You use <code>config()</code> to configure existing services. Here, we’re configuring the <code>$routeProvider</code> responsible for mapping URL paths to partials."
759-
, "controller": "Define a controller function that can be attached to the DOM using <code>ng-controller</code> or to a view template by specifying it in the route configuration."
760-
, "'/'": "When the URL is <code>/</code> it will load <code>list.html</code> into the view and attach the <code>ProjectListController</code> controller. You can instantly get an overview of an app's structure by reading the route definitions."
761-
, "/edit/:projectId": "This route definition has a colon ':' in it. You use colons to make a component of the URL available to your controller. So now, <code>EditCtrl</code> can refer to the <code>projectId</code> property which tells it which project to edit."
762-
, "otherwise": "The <code>otherwise</code> route specifies which view to display when the URL doesn’t match any of the explicit routes. It’s the default."
763-
, "Projects": "<code>Projects</code> is an instance of <code>$firebase</code>, and is defined in the <code>projects</code> module. It exposes method to add, remove and update projects in the collection. Its purpose is to abstract the server communication. This lets the controller focus on the behavior rather than the complexities of server access."
764-
, "$scope": "We can immediately assign the set of projects to our scope, and they will be displayed in the view."
765-
, "$location": "You use the <code>$location</code> service to access the browser's location."
766-
, "path": "Use the <code>path</code> method to change the application's 'deep-linking' location. Changing the URL will automatically activate the new route, and transition the application to display that view -- in this case, the <code>/edit/</code> view."
767-
, "$routeParams": "Here, we ask AngularJS to inject the <code>$routeParams</code> service. We use it to access the parameters extracted from the route path definitions."
768-
, "projectId": "This extracts the <code>projectId</code> from the URL. This allows the controller to use deep-linking information for processing."
769-
, "isClean": "Determines whether the user has modified the form. We use this information to enable the save button in the view."
770-
, "destroy": "Called when the user clicks the delete button in the view."
771-
, "save": "Called when the user clicks the save button in the view."
772-
, "null": "We can delete an object by simply setting its value to null."
773-
}
774-
, "list.html":
775-
{ "ng-model": "Bind the input field to the <code>search</code> property. The property is then used to filter for only the projects which contain the text entered by the user."
776-
, "#/new": "A link to a <code>/new</code> route defined in <code>projects.js</code>. Note that we follow the spirit of the web. There is no need to register callbacks on links, we are simply navigating to a new URL. This automatically updates the browser history, and enables deep-linking. But unlike a server round trip application, this navigation event gets rendered instantly in the browser."
777-
, "ng-repeat": "Use <code>ng-repeat</code> to unroll a collection. Here, for every project in <code>projects</code>, AngularJS will create new copy of the <code>&lt;tr&gt;</code> element."
778-
, "ng-repeat": "Use <code>ng-repeat</code> to unroll a collection. Here, for every project in <code>projects</code>, AngularJS will create new copy of the <code>&lt;tr&gt;</code> element."
779-
, "filter": "The <code>filter</code> uses the <code>search</code> to return only a subset of items in the <code>projects</code> array. As you enter text into the search box, the <code>filter</code> will narrow down the list according to your criteria. <code>ng-repeat</code> will then add or remove items from the table."
780-
, "orderBy": "Returns the <code>project</code> list ordered by <code>name</code> property."
781-
, "#/edit/{{project._id.$oid}}": "Creates individual edit links, by embedding the project id into the URL. The embedded project id serves the purpose of deep-linking, back button, as well as a way to communicate to <code>EditProjectController</code> which project should be edited."
782-
}
783-
, "detail.html":
784-
{ "myForm": "Create a form named <code>myForm</code>. We will declare form validation rules here which we'll use to show input errors and disable buttons."
785-
, "ng-class": "Add an <code>error</code> CSS class when the <code>myForm</code>'s input <code>name</code> is invalid."
786-
, "required": "Invalidate the input control when no text is entered."
787-
, "ng-show": "Show this error message when the <code>myForm</code>'s input <code>name</code> has <code>required</code> validation error."
788-
, "url": "The URL type automatically adds URL validation."
789-
, "ng-disabled": "Disable the 'Save' button when the form has not been filled in or is invalid."
790-
}
791-
}
792-
</script>
793-
</div>
794479
<div class="tabs-code">
795480
<!-- ============== Tabs ============== -->
796481
<script id="components.js">

0 commit comments

Comments
 (0)