From 57aa4a3c2cba7ab9f0771192fe590a3d6f63e090 Mon Sep 17 00:00:00 2001 From: David East Date: Fri, 12 Aug 2016 16:39:40 -0700 Subject: [PATCH 1/4] chore(docs): Update README for next releases --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fe7ba29fe..552ca81bb 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,9 @@ Status: Beta ## Install ```bash -npm install angularfire2 firebase --save +npm install firebase angularfire2 --save +# Or install the pre-release for RC5 +npm install firebase angularfire2@next --save ``` ## Example use: From 9870a7f79600ccfdd5d882c9c8ac8797f052ca24 Mon Sep 17 00:00:00 2001 From: David East Date: Fri, 19 Aug 2016 16:10:24 -0700 Subject: [PATCH 2/4] feat(docs): Docs for RC5 --- docs/1-install-and-setup.md | 120 +++---------- docs/broccoli-system-js-cli-setup.md | 207 +++++++++++++++++++++++ src/database/firebase_list_observable.ts | 6 +- 3 files changed, 231 insertions(+), 102 deletions(-) create mode 100644 docs/broccoli-system-js-cli-setup.md diff --git a/docs/1-install-and-setup.md b/docs/1-install-and-setup.md index d8df07101..2f5ea2fd7 100644 --- a/docs/1-install-and-setup.md +++ b/docs/1-install-and-setup.md @@ -1,13 +1,21 @@ +# These instructions are for the @next RC5 setup +We have yet to release the RC5 version to the main package because we are still testing it out. We recommend you try it by following the steps below. However, if you are still on RC4, you can refer to the older docs here: https://github.com/angular/angularfire2/blob/5720ebc48fddb2d1e75cd905fb534c4ed2e5c286/docs/1-install-and-setup.md + # 1. Installation and Setup > Getting started with AngularFire2 is easy with the [Angular CLI](https://github.com/angular/angular-cli). Follow the 10 steps below to get started. Don't worry, we're always working to make this shorter. -**The setups below use the [Angular CLI](https://github.com/angular/angular-cli).** +**The setups below use the Webpack branch of the [Angular CLI](https://github.com/angular/angular-cli).** + +**For the Broccoli/System.js branch [see this set up guide](broccoli-system-js-cli-setup.md)** ### 0. Prerequisites ```bash -npm install -g angular-cli +npm install -g angular-cli@webpack +# or install locally +npm install angular-cli@webpack --save-dev +# make sure you have typings installed npm install -g typings ``` @@ -28,125 +36,39 @@ npm install angularfire2 firebase --save Now that you have a new project setup, install AngularFire 2 and Firebase from npm. -### 3. Include Firebase SDK typings - -```bash -typings install file:node_modules/angularfire2/firebase3.d.ts --save --global && typings install -``` - -This saves the typings reference into `typings.json` and installs it. - -Note: for typings < 1, use the `--ambient` flag instead of `--global`. - -Unless you're targeting ES6 output in tsconfig.json, you'll also need to install -typings for the global Promise constructor. Run this command: - -`$ typings install --save --global es6-promise` - -If you're using Angular CLI, the typings will automatically be added to your -tsconfig since there is already a reference to `"typings.d.ts"` which transitively -includes `es6-promise`. If you're using a different seed project, or managing your -build yourself, just add the reference to your tsconfig files array: - -```json -"files": [ - "node_modules/angularfire2/firebase3.d.ts", - "typings/main.d.ts" -] -``` - - -### 4. Include AngularFire 2 and Firebase in the vendor files - -Open `angular-cli-build.js`. - -Include AngularFire2 and Firebase in the `vendorNpmFiles` array: - -```js -/* global require, module */ - -var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); - -module.exports = function(defaults) { - return new Angular2App(defaults, { - vendorNpmFiles: [ - 'systemjs/dist/system-polyfills.js', - 'systemjs/dist/system.src.js', - 'zone.js/dist/**/*.+(js|js.map)', - 'es6-shim/es6-shim.js', - 'reflect-metadata/**/*.+(js|js.map)', - 'rxjs/**/*.+(js|js.map)', - '@angular/**/*.+(js|js.map)', - // above are the existing entries - // below are the AngularFire entries - 'angularfire2/**/*.js', - 'firebase/*.js' - ] - }); -}; -``` - -### 5. Build - -```bash -ng build -``` - -Run a build and check the `/dist/vendor` folder for the `angularfire2` and `firebase` folders. - -### 6. System.js - -Open `/src/system-config.ts`. Modify the file like below: - -```js -/** Map relative paths to URLs. */ -const map: any = { - 'firebase': 'vendor/firebase/firebase.js', - 'angularfire2': 'vendor/angularfire2' -}; - -/** User packages configuration. */ -const packages: any = { - angularfire2: { - defaultExtension: 'js', - main: 'angularfire2.js' - } -}; -``` - -AngularFire 2 and Firebase need to be mapped with System.js for module loading. - -### 7. Bootstrap +### 3. Setup @NgModule Open `/src/main.ts`, inject the Firebase providers, and specify your Firebase configuration. This can be found in your project at [the Firebase Console](https://console.firebase.google.com): ```ts import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode, NgModule } from '@angular/core'; -import { , environment } from './app/'; +import { AppComponent, environment } from './app/'; import { AngularFireModule } from 'angularfire2'; -const firebaseConfig = { +// Must export the config +export const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", storageBucket: "" -} +}; @NgModule({ imports: [ BrowserModule, AngularFireModule.initializeApp(firebaseConfig) ], - declarations: [ MyComponent ], - Bootstrap: [ MyComponent ] + declarations: [ AppComponent ], + Bootstrap: [ AppComponent ] }) export class MyAppModule {} ``` -### 8. Inject AngularFire +### 4. Inject AngularFire Open `/src/app/.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know): @@ -168,7 +90,7 @@ export class Component { ``` -### 9. Bind to a list +### 5. Bind to a list In `/src/app/.component.ts`: @@ -215,7 +137,7 @@ observable as they arrive. Also the array that is received through the `items` o ] ``` -### 10. Serve +### 6. Serve ```bash ng serve diff --git a/docs/broccoli-system-js-cli-setup.md b/docs/broccoli-system-js-cli-setup.md new file mode 100644 index 000000000..c5f5b067f --- /dev/null +++ b/docs/broccoli-system-js-cli-setup.md @@ -0,0 +1,207 @@ +# These instructions are for the @next RC5 setup +We have yet to release the RC5 version to the main package because we are still testing it out. We recommend you try it by following the steps below. However, if you are still on RC4, you can refer to the older docs here: https://github.com/angular/angularfire2/blob/5720ebc48fddb2d1e75cd905fb534c4ed2e5c286/docs/1-install-and-setup.md + +# 1. Installation and Setup + +> Getting started with AngularFire2 is easy with the [Angular CLI](https://github.com/angular/angular-cli). Follow the 10 steps below to get started. Don't worry, we're always working to make this shorter. + +**The setups below use the [Angular CLI](https://github.com/angular/angular-cli).** + +**We recommend using the Webpack branch, [which you can see the guide here.](1-install-and-setup.md)** + +### 0. Prerequisites + +```bash +npm install -g angular-cli +npm install -g typings +``` + +### 1. Create a new project + +```bash +ng new +cd +``` + +The Angular CLI's `new` command will set up the latest Angular build in a new project structure. + +### 2. Install AngularFire 2 and Firebase + +```bash +npm install angularfire2 firebase --save +``` + +Now that you have a new project setup, install AngularFire 2 and Firebase from npm. + +### 3. Include AngularFire 2 and Firebase in the vendor files + +Open `angular-cli-build.js`. + +Include AngularFire2 and Firebase in the `vendorNpmFiles` array: + +```js +/* global require, module */ + +var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); + +module.exports = function(defaults) { + return new Angular2App(defaults, { + vendorNpmFiles: [ + 'systemjs/dist/system-polyfills.js', + 'systemjs/dist/system.src.js', + 'zone.js/dist/**/*.+(js|js.map)', + 'es6-shim/es6-shim.js', + 'reflect-metadata/**/*.+(js|js.map)', + 'rxjs/**/*.+(js|js.map)', + '@angular/**/*.+(js|js.map)', + // above are the existing entries + // below are the AngularFire entries + 'angularfire2/**/*.js', + 'firebase/*.js' + ] + }); +}; +``` + +### 4. Build + +```bash +ng build +``` + +Run a build and check the `/dist/vendor` folder for the `angularfire2` and `firebase` folders. + +### 5. System.js + +Open `/src/system-config.ts`. Modify the file like below: + +```js +/** Map relative paths to URLs. */ +const map: any = { + 'firebase': 'vendor/firebase/firebase.js', + 'angularfire2': 'vendor/angularfire2' +}; + +/** User packages configuration. */ +const packages: any = { + angularfire2: { + defaultExtension: 'js', + main: 'angularfire2.js' + } +}; +``` + +AngularFire 2 and Firebase need to be mapped with System.js for module loading. + +### 6. Set up @NgModule + +Open `/src/main.ts`, inject the Firebase providers, and specify your Firebase configuration. +This can be found in your project at [the Firebase Console](https://console.firebase.google.com): + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode, NgModule } from '@angular/core'; +import { AppComponent, environment } from './app/'; +import { AngularFireModule } from 'angularfire2'; + +// Must export the config +export const firebaseConfig = { + apiKey: "", + authDomain: "", + databaseURL: "", + storageBucket: "" +}; + +@NgModule({ + imports: [ + BrowserModule, + AngularFireModule.initializeApp(firebaseConfig) + ], + declarations: [ AppComponent ], + Bootstrap: [ AppComponent ] +}) +export class MyAppModule {} + +``` + +### 7. Inject AngularFire + +Open `/src/app/.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know): + +```ts +import { Component } from '@angular/core'; +import { AngularFire, FirebaseListObservable } from 'angularfire2'; + +@Component({ + moduleId: module.id, + selector: '-app', + templateUrl: '.component.html', + styleUrls: ['.component.css'] +}) +export class Component { + constructor(af: AngularFire) { + + } +} + +``` + +### 8. Bind to a list + +In `/src/app/.component.ts`: + +```ts +import { Component } from '@angular/core'; +import { AngularFire, FirebaseListObservable } from 'angularfire2'; + +@Component({ + moduleId: module.id, + selector: '-app', + templateUrl: '.component.html', + styleUrls: ['.component.css'] +}) +export class Component { + items: FirebaseListObservable; + constructor(af: AngularFire) { + this.items = af.database.list('items'); + } +} +``` + +Open `/src/app/.component.html`: + +```html +
    +
  • + {{item.$value}} +
    • +
+``` + +The `async` pipe unwraps the each item in the people observable as they arrive. The observable emits an array of items that automatically unwraps A structure like this: + +```json +[ + { + "$value": 'something', + "$key": '' + }, + { + "$value": 'something else', + (...) + }, +] +``` + +### 9. Serve + +```bash +ng serve +``` + +Run the serve command and go to `localhost:4200` in your browser. + +And that's it! If it totally borke, file an issue and let us know. + +###[Next Step: Retrieving data as objects](2-retrieving-data-as-objects.md) diff --git a/src/database/firebase_list_observable.ts b/src/database/firebase_list_observable.ts index 3d3270a56..02f135500 100644 --- a/src/database/firebase_list_observable.ts +++ b/src/database/firebase_list_observable.ts @@ -39,10 +39,10 @@ export class FirebaseListObservable extends Observable { }); } - remove(item:FirebaseOperation = null): firebase.Promise { + remove(item?:FirebaseOperation): firebase.Promise { // TODO: remove override when typings are updated to include // remove() returning a promise. - + // if no item parameter is provided, remove the whole list if (!item) { return this._ref.ref.remove(); @@ -68,7 +68,7 @@ export class FirebaseListObservable extends Observable { // Unwrapped snapshot return cases.unwrappedSnapshotCase() } - throw new Error(`FirebaseListObservable.remove requires a key, snapshot, reference, or unwrapped snapshot. Got: ${typeof item}`); + throw new Error(`Method requires a key, snapshot, reference, or unwrapped snapshot. Got: ${typeof item}`); } } From 3cffac88b43c4571a29ad3082e659578df029113 Mon Sep 17 00:00:00 2001 From: David East Date: Mon, 22 Aug 2016 10:13:14 -0700 Subject: [PATCH 3/4] fix(tests): FirebaseListObservable tests --- src/database/firebase_list_observable.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/database/firebase_list_observable.spec.ts b/src/database/firebase_list_observable.spec.ts index 04c855f7e..614b200a2 100644 --- a/src/database/firebase_list_observable.spec.ts +++ b/src/database/firebase_list_observable.spec.ts @@ -142,9 +142,9 @@ describe('FirebaseObservable', () => { }); - it('should throw an exception if input is not supported', () => { + fit('should throw an exception if input is not supported', () => { var input = ({lol:true}); - expect(() => O.remove(input)).toThrowError(`FirebaseListObservable.remove requires a key, snapshot, reference, or unwrapped snapshot. Got: ${typeof input}`); + expect(() => O.remove(input)).toThrowError(`Method requires a key, snapshot, reference, or unwrapped snapshot. Got: ${typeof input}`); }) }); From 242d2451ad9a598c793acb707229bf874511b0a8 Mon Sep 17 00:00:00 2001 From: David East Date: Mon, 22 Aug 2016 10:15:36 -0700 Subject: [PATCH 4/4] fix(tests): Don't throw a fit --- src/database/firebase_list_observable.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/database/firebase_list_observable.spec.ts b/src/database/firebase_list_observable.spec.ts index 614b200a2..26d63d513 100644 --- a/src/database/firebase_list_observable.spec.ts +++ b/src/database/firebase_list_observable.spec.ts @@ -142,7 +142,7 @@ describe('FirebaseObservable', () => { }); - fit('should throw an exception if input is not supported', () => { + it('should throw an exception if input is not supported', () => { var input = ({lol:true}); expect(() => O.remove(input)).toThrowError(`Method requires a key, snapshot, reference, or unwrapped snapshot. Got: ${typeof input}`); })