Status: In-Development
AngularFire2 integrates Firebase's realtime observers and authentication with Angular2.
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.list('/items');
}
}npm install angularfire2 --saveDon'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.
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.
npm install angularfire2 && firebase --saveNow that you have a new project setup, install AngularFire 2 and Firebase from NPM.
npm install typings -g
typings install --save --ambient firebaseAngularFire 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.
Open ember-cli-build.js (yes, I said Ember).
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();
}ng buildRun a build and check the /dist/vendor folder for the angularfire2 and firebase folders.
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.
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
]);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) {
}
}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.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.
ng serveRun 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.
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.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')
]);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);
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')
]);
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);
}
}
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')
]);
Injectable service for managing authentication state.
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.
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
});
}
}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) {}
}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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent