App Description: Client management application that uses Firebase as the back end with the new Firestore database. Application has full C.R.U.D functionality with Log In authentication. From the Udemy Course [Angular Front to Back]

• Chrome extension: Augury
  -(For debugging and visualizing angular applications at runtime)
  

Using ng g c components/component_name

• Router Module ng g m app-routing --flat -module:app, inside created app-routing.module.ts file, imported the routes for the components
  

• angularfire2 Module npm install firebase angularfire2
  -Github documentation for angularfire2 setup, and adding firebase config to enviromental variable: https://github.com/angular/angularfire2
  (great module for interacting with firebase, allows interaction with realtime database, firestore, authentication etc..)
  

• client service module ng g s services/client, added after installing the angularfire2 module , imported necessary angularfirestore imports, make sure to import in the app.module.ts file
  

• client interface created models directory with a Client.ts file , and there implemented the interface for Client. Imported that interface to the client.service.ts file.
  

• angular2-flash-messages npm install angular2-flash-messages --save, then bring it into the app.module.ts file, add as import then append the .forRoot()
  -NPM documentation for angular2-flash-messages setup : https://www.npmjs.com/package/angular2-flash-messages
  

• authentication service module ng g s services/auth, make sure to import in the app.module.ts file, this will be use for user login
  

• Authentication Guard for Routes created guards directory with a auth.guards.ts file , and there implemented the injectable for the AuthGuard. imported to the app-routing.module.ts file as a provider and added the canActivate:[AuthGuard] to each of the routes wanting to protect.
  

• settings service module ng g s services/settings -module:app, this will also import all necessary depedencies to the app.module.ts file
  

• settings interface created inside models directory with a Settings.ts file , and there implemented the interface for Settings. Imported that interface to the Settings.service.ts file.
  

• Authentication Guard for Register created in guards directory with a register.guards.ts file name , and there implemented the injectable for the RegisterGuard. imported to the app-routing.module.ts file as a provider and added the canActivate:[RegisterGuard] to the register route.
  

Other notes: imported the Observable from the rxjs library in the 'client.services.ts' file

• Bootstrap V4 - jQuery - Popper.js - Font-Awesome:
  npm install [email protected] jquery popper.js font-awesome
  

-Note for dependencies above: modify .angular-cli.json to add necessary styles and scripts. Then you can use inside your "componentName.component.html" files.

"styles": [ "styles.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/umd/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],

• firbase tool npm install -g firebase-tools
  -then firebase login firebase init firebase deploy
  -steps found in firebase hosting
  

login: [email protected]
password: 123456
feel free to play around with it, just use above login

you can Create, Remove, Update client information and balance, or Delete clients.

This project was generated with Angular CLI version 1.6.8.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.