This project was generated with Angular CLI version 1.6.5.
Really enjoying Angular and JavaScript. I want to get another build going and further study the flow and structure of Angular and how it works with TypeScript and JavaScript, as well as further study TS/JS. I am going to attempt to make a recipe app that can track, store and display recipes.
- Strive harder to comprehend my code to create better work and become better at what I do.
- Have this builds code be better than the lasts. Which was another similar forum that I can certainly improve on. How you say? Well last forum we used 3 models for 3 different sections of the forum. I believe I can use one recipe model and have different sections with different types of recipes, from the eastcoast and the westcoast
- Learn how to implement users login with Firebase.
Behavior | Input | Output |
---|---|---|
A user can see a list of the recipes in a section | click eastcoast-rbx | displayed list of recipes under eastcoast-rbx |
A user can see a list of recipe sections | view main page | see list of east and west recipe boxes |
A user can add a recipe to a recipe section | ||
A user can edit a recipe | ||
A admin can edit and delete recipes | ||
Will have testing of functions and/or features | ||
Filter data by coast on respective main pages | ||
Show json array of ingredients and directions in lists on details page | ||
- run
npm-install
andbower install
in root project directory
- Sign up for a Firebase account @Firebase and create a new database. Import the
sample-recipes.json
file in this project directory into your newly created database. - Click on
Project Overview
in Firebase and thenAdd Firebase to your web app
. - Create an
api-keys.ts
file in src/app folder and add the given api-key from @Firebase to yourapi-keys.ts
file in the following format:
export var masterFirebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com",
messagingSenderId: "xxxx"
};
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.