An unofficial library for AngularDart and Firebase.
The current stable release of angular_fire works best with the following:
dependencies:
angular2: ^3.1.0
angular_fire: ^0.1.0
firebase: ^3.1.0To get started, you need to, at minimum, include the Firebase SDK:
<body>
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
</body>A high-level authentication service. First setup for dependency injection:
import 'package:angular2/angular2.dart';
import 'package:angular2/platform/browser.dart';
import 'package:angular_fire/angular_fire.dart';
import 'package:firebase/firebase.dart' as sdk;
main() {
bootstrap(AngularFireExample, <dynamic>[
provide(
FirebaseAuth,
useValue: new FirebaseAuth(
sdk.initializeApp(
apiKey: '...',
authDomain: '...',
databaseURL: '...',
storageBucket: '...',
),
),
),
]);
}Then inject into your app and use. See GoogleSignInComponent below for an example.
Displays a rendered sign in box for Google authentication that follows the branding guidelines.
import 'package:angular2/angular2.dart';
import 'package:angular_fire/angular_fire.dart';
@Component(
selector: 'angular-fire-example',
directives: const [
GoogleSignInComponent,
],
template: r'''
<google-sign-in (trigger)="signIn()">
</google-sign-in>
''',
)
class AngularFireExample {
final FirebaseAuth _auth;
void onTrigger() {
_auth.signIn();
}
}NOTE: To use this component, you must have the brand assets in your
web/assets directory, or use the [assetPath] property, or the
googleSignInAssetPath token at bootstrap time to configure the location of
your assets - for example on an external CDN.
Like ngIf, but shows content if the value matches the current authentication:
<div *ifFirebaseAuth="true; let currentUser = currentUser">
Logged in as: {{currentUser.displayName}}.
<button (click)="signOut()">Sign Out</button>
</div>
<div *ifFirebaseAuth="false">
Waiting for sign in...
<br>
<google-sign-in
(trigger)="signIn()">
</google-sign-in>
</div>We welcome a diverse set of contributions, including, but not limited to:
- Filing bugs and feature requests
- Send a pull request
- Or, create something awesome using this API and share with us and others!
For the stability of the API and existing users, consider opening an issue first before implementing a large new feature or breaking an API. For smaller changes (like documentation, bug fixes), just send a pull request.
Run the (simple) test suite in Dartium. It doesn't currently run on Travis:
$ pub run angular_test -p dartium