What's new in AngularFire 1.2

The 1.2 release of AngularFire introduces dependency injection of Firebase references and a simplified authentication service.

What’s new?

Dependency Injection with $firebaseRefProvider

Do you find yourself writing new Firebase("") in your AngularFire code too often?

When it comes to Angular, new is a bad word. Using new in a controller makes it difficult to unit test, because it couples your object construction logic to your application logic. This makes it very difficult to unit test in isolation.

AngularFire 1.2 introduces the $firebaseRefProvider, which allows you to register a reference in the configuration phase of your Angular app.

app.config(function($firebaseRefProvider) {
  $firebaseRefProvider.registerUrl('https://<my-app>.firebaseio.com');
});

After you’ve registered the URL, you can inject them into your controllers, services, factories, or wherever you need them.

function MyCtrl($firebaseArray, $firebaseRef) {
  this.messages = $firebaseArray($firebaseRef.default);
}

You can also register multiple URLs by using a config object:

app.constant('FirebaseUrl', 'https://<my-app>.firebaseio.com/');
app.config(function(FirebaseUrl, $firebaseRefProvider) {
  $firebaseRefProvider.registerUrl({
    default: FirebaseUrl, // 'https://<my-app>.firebaseio.com/'
    messages: FirebaseUrl + 'messages' // 'https://<my-app>.firebaseio.com/messages'
  });
});

The only requirement when specifying multiple urls is that you provide a default property that by convention points to the root url.

Simplified authentication with $firebaseAuthService

Whenever you register a Firebase URL with $firebaseRefProvider, AngularFire will be able construct a $firebaseAuth service on your behalf using the $firebaseAuthService service (I know, it’s a service-service).

$firebaseRefProvider.registerUrl('https://<my-firebase-app>.firebaseio.com');
$routeProvider.when('/', {
  controller: 'MyCtrl as ctrl',
  templateUrl: 'views/my-ctrl.html',
    resolve: {
      user: function($firebaseAuthService) {
        return $firebaseAuthService.$waitForAuth();
      }
    }
});

This service makes it even easier to use authentication features in the router, because there’s no need to create your own $firebaseAuth service.

Give it a try

Even though we’re also hard at work on AngularFire 2, we’re still giving AngularFire 1 the attention it needs. Give the 1.2 version a spin and let us know what you think.

bower install angularfire --save
# or for you CommonJS fans
npm install angularfire --save