AngularFire2
Status: In-Development
Realtime bindings and authentication for Angular 2
AngularFire2 integrates Firebase's realtime observers and authentication with Angular2.
Example use:
import {Component} from 'angular2/core';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'project-name-app',
providers: [],
templateUrl: 'app/project-name-app.html',
directives: [],
pipes: []
})
export class MyApp {
items: Observable<any[]>;
constructor(af: AngularFire) {
this.items = af.database.list('/items');
}
}
Install
npm install angularfire2 --save
10 steps to AngularFire2
Don't worry, we're working to make this shorter.
To build with AngularFire 2, make sure you have the Angular CLI installed. Then follow the steps below.
1. Create a new project
ng new <project-name>
cd <project-name>
The Angular CLI's new
command will set up the latest Angular build in a new project structure.
2. Install AngularFire 2 and Firebase
npm install angularfire2 firebase --save
Now that you have a new project setup, install AngularFire 2 and Firebase from NPM.
3. Install typings
npm install typings -g
typings install --save --ambient firebase
AngularFire 2 is written in Typescript and depends on typings for the Firebase SDK. To get a clean build, install typings and download the Firebase typings.
4. Include AngularFire 2 and Firebase in the vendor files
Open angular-cli-build.js
.
Include AngularFire2 and Firebase in the vendorNpmFiles
array:
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
var app = new Angular2App(defaults, {
vendorNpmFiles: [
'angularfire2/**/*.js',
'firebase/lib/*.js'
]
});
return app.toTree();
}
5. Build
ng build
Run a build and check the /dist/vendor
folder for the angularfire2
and firebase
folders.
6. System.js
Open /src/index.html
. Modify the System.config
like below:
System.config({
map: {
firebase: 'vendor/firebase/lib/firebase-web.js',
angularfire2: 'vendor/angularfire2'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
angularfire2: {
defaultExtension: 'js',
main: 'angularfire2.js'
}
}
});
AngularFire 2 and Firebase need to be mapped with System.js for module loading.
7. Bootstrap
Open /src/app.ts
:
import {bootstrap} from 'angular2/platform/browser';
import {MyAppClass} from './app/<my-app-class>';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';
bootstrap(<MyAppClass>, [
FIREBASE_PROVIDERS,
defaultFirebase('https://<your-firebase>.firebaseio.com'),
ROUTER_PROVIDERS
]);
8. Inject AngularFire
Open /src/app/project-name.ts
:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'project-name-app',
providers: [],
templateUrl: 'app/project-name-app.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
@RouteConfig([
])
export class ProjectNameApp {
constructor(af: AngularFire) {
}
}
9. Bind to a list
In /src/app/project-name.ts
:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AngularFire} from 'angularfire2';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'project-name-app',
providers: [],
templateUrl: 'app/project-name-app.html',
directives: [ROUTER_DIRECTIVES],
pipes: []
})
@RouteConfig([
])
export class ProjectNameApp {
items: Observable<any[]>;
constructor(af: AngularFire) {
// create a list at /items
this.items = af.database.list('/items');
}
}
Open /src/app/project-name.html
:
<ul *ngFor="#item of items | async">
<li class="text">
{{item}}
</li>
</ul>
The async
pipe unwraps the each item in the people
observable as they arrive.
10. Serve
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.
API
AngularFire Service
The recommended way to take advantage of the AngularFire library is to use the injectable AngularFire service.
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import {FIREBASE_PROVIDERS, defaultFirebase, AngularFire} from 'angularfire2';
import {Question} from './services/question';
@Component({
template:`
<ul>
<li *ngFor="#question of questions | async">
{{question.text}}
</li>
</ul>
`
})
class App {
questions:Observable<Question[]>
constructor(af:AngularFire) {
// Get an observable of a synchronized array from <firebase-root>/questions
this.questions = af.database.list('/questions');
}
}
bootstrap(App, [
// Common injectable providers from the AngularFire lib
FIREBASE_PROVIDERS,
// Tell AngularFire the base URL for the Firebase used throughout
defaultFirebase('https://<some-firebase>.firebaseio.com')
]);
FIREBASE_PROVIDERS
Contains all AngularFire provider configuration for Angular's dependency injection.
Type: any[]
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {FIREBASE_PROVIDERS} from 'angularfire2';
bootstrap(App, FIREBASE_PROVIDERS);
defaultFirebase
Define the root url for the library, to resolve relative paths.
Type: string
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
bootstrap(App, [
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com')
]);
FirebaseRef
Injectable symbol to create a Firebase reference based on
the url provided by FirebaseUrl
.
Type: Firebase
Usage:
import {Inject} from 'angular2/core';
import {FirebaseRef} from 'angularfire2';
...
class MyComponent {
constructor(@Inject(FirebaseRef) ref:Firebase) {
ref.on('value', this.doSomething);
}
}
FirebaseUrl
URL for the app's default Firebase database.
Type: string
Usage:
import {bootstrap} from 'angular2/platform/browser';
import {Inject} from 'angular2/core';
import {FirebaseUrl, FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';
@Component({
selector: 'app',
template: `<a [href]="url">{{ url }}</a>`
})
class App {
constructor(@Inject(FirebaseUrl) public url: string) {}
}
bootstrap(App, [
FIREBASE_PROVIDERS,
defaultFirebase('https://my.firebaseio.com')
]);
FirebaseAuth
Injectable service for managing authentication state.
Logging In
To log in a user, call the login
method on an instance of FirebaseAuth
class. The method has
the following two signatures:
login(config?: AuthConfiguration): Promise<FirebaseAuthState>;
login(credentials: AuthCredentials, config?: AuthConfiguration): Promise<FirebaseAuthState>;
The signature that is used depends on which AuthMethod you chose to use to login. AuthMethods.Popup, AuthMethods.Redirect, and AuthMethods.Anonymous all use the first signature whereas AuthMethods.CustomToken, AuthMethods.OAuthToken, and AuthMethods.Password use the second signature. This is because if you use these three AuthMethods you need to provide a credentials argument to login.
AuthConfiguration
You MUST provide an AuthConfiguration
object to use the login
method, however you do not need
to pass it to login correctly. Instead you may choose to pass the configuration in through DI. This helps
keep your components modular because they can simply call login
and it will use whichever options were
provided through DI.
You can use the firebaseAuthConfigMethod
to generate a Provider
object which you can pass to DI like so:
import {bootstrap} from 'angular2/core';
import {
FIREBASE_PROVIDERS,
defaultFirebase,
firebaseAuthConfig,
AuthProviders,
AuthMethods
} from 'angularfire2';
bootstrap(MyApp, [
FIREBASE_PROVIDERS,
defaultFirebase('https://<some-firebase>.firebaseio.com'),
firebaseAuthConfig({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
remember: 'default',
scope: ['email']
})
]);
Once you've done that you can simply call login
on the auth object. This will automatically use the options that were configured with DI. You can override those options by providing an optional configuration object to the login
method like so:
import {Component} from 'angular2/core';
import {FirebaseAuth} from 'angularfire2';
@Component({
selector: 'my-component'
templateUrl: 'my_template.html'
})
export class MyApp {
constructor (private _auth: FirebaseAuth) {}
public doLogin () {
// This will perform popup auth with google oauth and the scope will be email
// Because those options were provided through bootstrap to DI, and we're overriding the provider.
this._auth.login({
provider: AuthProviders.Google
});
}
}
Subscribing to Authentication State
Type: class FirebaseAuth extends ReplaySubject<FirebaseAuthState>
Usage:
import {FirebaseAuth} from 'angularfire2';
@Component({
selector: 'auth-status',
template: `
<div *ng-if="auth | async">You are logged in</div>
<div *ng-if="!(auth | async)">Please log in</div>
`
})
class App {
constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) {}
}
FirebaseListObservable
Subclass of rxjs Observable
which also has methods for updating
list-like Firebase data.
type: class
additional methods:
add:(val) => void
: Add an element to the Firebase ref.