Connecting angularjs to firebase

AngularJS is mostly used in SPA (Single Page Application) kind of projects. In Single Page Application’s we have a main page and rather than calling a new page for each item, we create views which are partial html pages and those are loaded within the main page. For example, Let our main page be index.html with two menu items about and contact in it. We will create about.html and contact.html files and put them inside the views folder in the same level as our index.html.


Angular uses config() method for routing and loading different views, which is a part of angular.module(). Config() method accepts $routeProvider as a parameter.

NOTE: $routeProvider object is not a part of angular.js file. Rather it is a part of ngRoute module and to make use of ngRoute module we have to include angular-route.js file in our application.

Inside our config() method we use $routeProvider to check for different routes and based on those routes we load the appropriate views. This is done using the when() method of $routeProvider object. The first parameter in the when() method is the name of the route that we want to check and second parameter is an object. This object makes use of two properties:

1. controller – The name of the controller associated with the view which has to be loaded.

2. templateUrl – path of the html file to be used. If no controller is associated with the view to be loaded, then this field can be removed. In that case the controller that we have defined at the parent level will be used.

Now let us create our main view file i.e. index.html.

<!doctype html>


We have used <ng-view> in the above template file. In AngularJS while doing routing <ng-view></ng-view> is the most important set of tag because this is where out views will be loaded. For example, based on the hyperlinks which was clicked in our index.html file either about.html or contact.html will be loaded. Also the path in the address bar will be updated; like if we click contact us link the path on the address bar should be index.html#/contact.html. There can be only a single <ng-view> element in your page for loading of views.


Related Posts