Angular 5 Front End - AntonioMarrero/Calorie-Companion-App-Front-End GitHub Wiki

Angular 5 Front End Documentation

Installation

In order to install this project in to your environment use the following commands to clone and set up your angular environment. We used Visual Studio Code, Git Bash as our environment for the front end.

On your git command line type the following:

Once you have cloned the repository you can open the project on your editor. On the command line, navigate to the project root directory and type the following:

  • npm install

This will ensure you have all the modules necessary from ng Modules cli.

Ensure that you have Chart.js library. If not sure just run this command:

  • npm install chart.js --save

This will be necessary to be able to see the charts on the graph component.

Components

  • Nav -- Component that holds the navigation bar.
  • Landing -- Landing page component. What the user will see when they first open the App.
  • Login -- User login component.
  • Registration -- User registration component.
  • Dashboard -- Once logged in the user will be directed to the Dashboard component where they can choose where to go: Search Foods or Graphs.
  • FoodSearch -- User is able to search for foods and added to their meals. Then submit to the back-end for persistence.
  • Graph -- User can see a graphical representation of their nutrition habits by entering a date range.
  • AddMeal -- NOT IMPLEMENTED YET
  • Summary -- NOT IMPLEMENTED YET

Services

  • UserService -- Handles all the user and their registration.
  • FoodInfoService -- All the Nutritionix calls and responses transactions. Also transaction exchange to the back-end.
  • GraphService -- Receives data from back-end to convert into graphical representation and pass it to the component.