Firebase Angular2

examples/firebase-angular2/.angular-cli.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "firebase-angular2"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

examples/firebase-angular2/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/firebase-angular2/README.md

@@ -0,0 +1,38 @@
+# Firebase Angular2 • [TodoMVC](http://todomvc.com)
+
+> Official description of the framework (from its website)
+
+
+## Resources
+
+- [Website]()
+- [Documentation]()
+- [Used by]()
+- [Blog]()
+- [FAQ]()
+
+### Articles
+
+- [Interesting article]()
+
+### Support
+
+#### Firebase
+
+* [Firebase on StackOverflow](http://stackoverflow.com/questions/tagged/firebase)
+* [Google Groups mailing list](https://groups.google.com/forum/?fromgroups#!forum/firebase-talk)
+* [Firebase on Twitter](https://twitter.com/Firebase)
+* [Firebase on Facebook](https://facebook.com/Firebase)
+* [Firebase on Google +](https://plus.google.com/115330003035930967645/posts)
+
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+
+
+## Implementation
+
+How was the app created? Anything worth sharing about the process of creating the app? Any spec violations?
+
+
+## Credit
+
+Created by [Pablo Albaladejo](https://github.com/pablo-albaladejo)

examples/firebase-angular2/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { FirebaseAngular2Page } from './app.po';
+
+describe('firebase-angular2 App', () => {
+  let page: FirebaseAngular2Page;
+
+  beforeEach(() => {
+    page = new FirebaseAngular2Page();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+  });
+});

examples/firebase-angular2/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class FirebaseAngular2Page {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

examples/firebase-angular2/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

examples/firebase-angular2/karma.conf.js

@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+	config.set({
+		basePath: '',
+		frameworks: ['jasmine', '@angular/cli'],
+		plugins: [
+			require('karma-jasmine'),
+			require('karma-chrome-launcher'),
+			require('karma-jasmine-html-reporter'),
+			require('karma-coverage-istanbul-reporter'),
+			require('@angular/cli/plugins/karma')
+		],
+		client: {
+			clearContext: false // leave Jasmine Spec Runner output visible in browser
+		},
+		coverageIstanbulReporter: {
+			reports: ['html', 'lcovonly'],
+			fixWebpackSourcePaths: true
+		},
+		angularCli: {
+			environment: 'dev'
+		},
+		reporters: ['progress', 'kjhtml'],
+		port: 9876,
+		colors: true,
+		logLevel: config.LOG_INFO,
+		autoWatch: true,
+		browsers: ['Chrome'],
+		singleRun: false
+	});
+};

examples/firebase-angular2/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "firebase-angular2",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "angularfire2": "5.0.0-rc.3",
+    "core-js": "^2.4.1",
+    "enhanced-resolve": "3.3.0",
+    "firebase": "4.7.0",
+    "rxjs": "^5.1.0",
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1",
+    "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.1.2",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/language-service": "^4.0.0",
+    "@types/jasmine": "2.5.45",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}

examples/firebase-angular2/protractor.conf.js

@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+	allScriptsTimeout: 11000,
+	specs: [
+		'./e2e/**/*.e2e-spec.ts'
+	],
+	capabilities: {
+		browserName: 'chrome'
+	},
+	directConnect: true,
+	baseUrl: 'http://localhost:4200/',
+	framework: 'jasmine',
+	jasmineNodeOpts: {
+		showColors: true,
+		defaultTimeoutInterval: 30000,
+		print: function () {}
+	},
+	onPrepare() {
+		require('ts-node').register({
+			project: 'e2e/tsconfig.e2e.json'
+		});
+		jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+	}
+};

examples/firebase-angular2/src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { TodoListComponent } from './components/todo-list/todo-list.component';
+
+export let routes = [
+    { path: '', component: TodoListComponent, pathMatch: 'full' },
+    { path: ':status', component: TodoListComponent }
+  ];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}

examples/firebase-angular2/src/app/app.component.html

@@ -0,0 +1,6 @@
+<router-outlet></router-outlet>
+<footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Written by <a href="https://github.com/pablo-albaladejo">Pablo Albaladejo</a></p>    
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+</footer>

examples/firebase-angular2/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import 'rxjs/Rx';
+
+@Component({
+  selector: 'todo-app',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  title = 'app';
+}

examples/firebase-angular2/src/app/app.module.ts

@@ -0,0 +1,38 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireDatabase } from 'angularfire2/database';
+import { environment } from '../environments/environment';
+
+import { AppRoutingModule } from './app-routing.module';
+
+import { AppComponent } from './app.component';
+import { TodoListComponent } from './components/todo-list/todo-list.component';
+import { TodoHeaderComponent } from './components/todo-header/todo-header.component';
+import { TodoFooterComponent } from './components/todo-footer/todo-footer.component';
+
+import { TodoStoreService } from './services/todo-store.service';
+
+import { TrimPipe } from './pipes/trim.pipe';
+
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    TodoListComponent,
+    TodoHeaderComponent,
+    TodoFooterComponent,
+    TrimPipe,
+  ],
+  imports: [
+    FormsModule,
+    AppRoutingModule,
+    BrowserModule,
+    AngularFireModule.initializeApp(environment.firebase)
+  ],
+  providers: [AngularFireDatabase, TodoStoreService],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

examples/firebase-angular2/src/app/components/todo-footer/todo-footer.component.html

@@ -0,0 +1,15 @@
+<footer class="footer" *ngIf="counter > 0">
+  <span class="todo-count"><strong>{{ remainingCount }}</strong> {{ remainingCount == 1 ? 'item' : 'items' }} left</span>
+  <ul class="filters">
+      <li>
+          <a [routerLink]="['']" [class.selected]="currentStatus == ''">All</a>
+      </li>
+      <li>
+          <a [routerLink]="['', 'active']" [class.selected]="currentStatus == 'active'">Active</a>
+      </li>
+      <li>
+          <a [routerLink]="['', 'completed']" [class.selected]="currentStatus == 'completed'">Completed</a>
+      </li>
+  </ul>
+  <button class="clear-completed" *ngIf="hasCompleted" (click)="removeCompleted()">Clear completed</button>
+</footer>