Getting Setup

I am going to use Angular-cli to create angular project.

Installing angular cli

Creating new project

I have divided this app into three angular module

1. App Module

App module is a main module. This is our entry module

2. Customers Module

Customers module is a feature module.This customer module will have the customer-list component . This customer-list component will fetch the customers from firebase database.I am going to use firebase database to get data from server.

3. Departments Module

Departments module is also a feature module.We will implement lazy loading for customers module and departments module.Departments will be fetched from the firebase database.

Integrating firebase with Angular

To integrate firebase with Angular you need to install this package

Create Customers Module

Now we are going to create new customers module by using angular-cli .

Create Customers Components

Let us create customers related components. Open your terminal and navigate to src /app/customers directory

Create Departments Module

Now we are going to create new customers module by using angular-cli .

Create Departments Components

Let us create customers related components. Open your terminal and navigate to src /app/departments directory

Integrating Firebase with Angular

First of all you need to create a new project in google firebase console. Now you have created a project in firebase console, grab your api keys and add them to AppModule

 

Create AppRoutingModule

Create a new AppRoutingModule in app directory

loadChildren is a reference to lazy loaded child routes . customers.module#CustomersModule is telling to Angular please register this CustomersModule only when customers route hits.

departments.module#DepartmentsModule is telling to Angular please register this DepartmentsModule only when departments route hits.

This #CustomersModule and #DepartmentsModule is used by ng-router-loader to locate the exact path of the file that the @NgModule code is in.

RouterModule.forRoot creates a new module that contains directives and services itself. We have exported RouterModule because we need to use this RouterModule directives,service etc in AppModule’s components

 

Add Navigation in AppComponent

we have used [routerLink] directive to bind routes .This directive comes from RouterModule . We have imported this RouterModule in AppModule.

 <router-outlet> is also directive in RouterModule. It acts as a placeholder that Angular dynamically fills based on the current router state. A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

Create CustomersRouting Module

In this file I have defined all the routes for CustomersModule. CustomersComponent will be a parent component for CustomersModule. I have also created child route CustomerList. It will only display inside the CustomersComponent.

Add CustomersRouting Module to CustomersModule

Add RouterOutlet to CustomersComponent

This router-outlet will display the Customers component and CustomerList Component.

Get Customers from firebase database

Create DepartmentsRoutingModule

Add DepartmentsRoutingModule to DepartmentsModule

Add RouterOutlet to DepartmentsComponent

Get Departments from firebase database