This exercise is designed to be a hub for DIY and "How-to" projects uploaded by users and searchable for other patrons to view. Using Angular CLI, this is practice in setting up ng, routing to nested components, sending data down with inputs, passing actions up with EventEmitters, and filtering data with pipes. The page will have a section for uploading projects, where a series of forms will be filled out until the overall form is submitted in to a database. Users will be able to search for relevant projects on how to do or make a project and the respective "how-to's" will display their title. Then a user can click the title to get to the details of the step-by-step instructable.
| Spec | Input | Output |
|---|---|---|
| User can add a project to a database by creating an instance of their project | Input: Title, category, difficulty, number of steps, [array with each step] is enter in each specified form. | Output: A saved formatted and styled project that is easy for anyone to read. |
| Returns each project for a searched category | Input: "Automotive" | Output: A list of project titles that have been uploaded by previous users that fall under the "automotive" category. |
| When user enters '5' for number of steps, user will be able to write step 1 through 5 in order and seperately | Input: "5" | Output: First form displays, user types, clicks next, second form displays, ... 5th form displays, user writes final step, clicks submit, and project is saved. |
| A project can be editted by a project owner | Input: User clicks edit button and updates the number of steps and adds a few more | Output: New, updated project will be saved. |
- You can check out the repository link in my github pages Link to repository
-
Navigate to the application root directory:
$ cd ng-friday-project -
Install the required packages:
$ npm install $ npm install rxjs-compat --save -
Build the application:
$ npm run build -
Use the right api-key:
Copy the masterFirebaseConfig export from the api-key folder Create an api-keys.ts file in app folder Paste the const masterFirebaseConfig in the api-keys.ts file -
Run the application:
$ ng serve -o
-
Execute the tests with Jasmine and Karma:
$ npm run test
If you have any feedback or concerns, please contact Stephen Trewick.
_Windows 10.1, Visual Studio Code _
Licensed under the GPL License Copyright (c) 2019 Stephen Trewick
This project was generated with Angular CLI version 8.0.2.
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.