Practice using Firebase and AngularFire with a little Routing.

Create an angular app with the following script dependencies:

• Angular
• Firebase
• AngularFire
• ui-router

Make sure your index.html file includes all of the scripts as well as the basic components for getting your app to work with routing (ng-app, ui-view).

Create the following routes in your app's config method:

• "cars": /cars
• "car": /cars/:carId

Create templates for both of the views.

This view will show a list of cars. Use an ng-repeat and bind to properties on a car such as:

• Make
• Model
• Year
• Mileage
• Price

This view will show a single car and its associated comments. Use some HTML to summarize the properties of the car (Make, Model, etc.). Also use an ng-repeat to iterate over all of the car's comments and display each comment's text.

Create the two controllers your routes will depend on:

• carsCtrl
• carCtrl

Also, create a carsService (make sure it's linked in the HTML) and add the following methods:

• getCars(): will return a Firebase ref pointing to your app's collection of cars
• getCar(carId): will return a Firebase ref pointing to a single car in the cars collection
• getComments(carId): will return a Firebase ref pointing to a collection of comments made for a single car

Create resolves on your routes so they will invoke the service methods we just created.

On the "cars" state, resolve for a variable carsRef, which will receive the result of the carsService.getCars() method.

  .state('cars', {
  	url: '/cars',
  	templateUrl: '/templates/cars.html',
  	controller: 'carsCtrl',
  	resolve: {
  		carsRef: function(carsService) {
  			return carsService.getCars();
  		}
  	}
  })

On the "car" state, resolve for a variable carRef, which will receive the result of the carsService.getCar(carId) method. It will need to get the carId from the $stateParams service provided by the router. Also, resolve for the variable commentsRef, which will receive the result of the carsService.getComments(carId) method. It will also need the $stateParams.carId value.

  .state('car', {
  	url: '/cars/:carId',
  	templateUrl: '/templates/car.html',
  	controller: 'carCtrl',
  	resolve: {
  		carRef: function(carsService, $stateParams) {
  			return carsService.getCar($stateParams.carId);
  		},
  		commentsRef: function(carsService, $stateParams) {
  			return carsService.getComments($stateParams.carId);
  		}
  	}
  });

In carsCtrl, grab the carsRef variable provided to you by the router and convert it to a $firebaseArray so it can be placed on the scope (and used in your ng-repeat).

Also, use anchor tags on the individual cars so that when they're clicked, the ui-sref points to the correct route so that the secondary view can be seen:

<a ui-sref="car({carId:car.$id})">{{car.year}} {{car.make}} {{car.model}}</a>

In the carCtrl, grab the carRef variable provided to your by the router and convert it to a $firebaseObject so it can be placed on the scope (and bound from your view). Also convert the commentsRef variable to a $firebaseArray so the comments will show up in your ng-repeat for that car.

Add the necessary HTML to create a new car (on the /cars route) and to create a new comment (on the car route). You'll also need to utilize the $add method to create these new objects on your Firebase collections.

© DevMountain LLC, 2016. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.