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 carsgetCar(carId)
: will return a Firebase ref pointing to a single car in the cars collectiongetComments(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.