Team sumbission for Front End Assignment 3: Create Pokemon Trainer using Angular.
The aim of the assignment was to host our own api and then make a web app using Angular that utilizes said api.
We used Figma to create a basic draft of the component tree. We used Railway for hosting the API. On the coding side, we used VS Code. For styling we used Tailwind as per the videos provided.
Working with Angular was fair bit more troublesome than REACT. Some more detailed thoughts from each of us bellow:
- Tasos Antoniou:
What I've learned:
- How http.get works. There is a different approach working with asynchronous functions and synchronous functions. The get method is async and has a unique way of handling the function and manipulate the data.
- To debug the response object when you get error and response status is 200!!
- How typescript declarations works!
- How to ignore null values etc.
- How to use services and what NgOnInit does
- Better understanding of session storage.
- How to use environment files
- Navigation with Angular
- When instantiation happens(without "new")
- The usage of models and when is the right time to create them with the proper names.
- How to connect componentName.component.html with componentName.component.ts
- Bill Tsolis:
Tasos once again did most of the legwork regarding functionality. On my part, Tailwind ended up being quite easy and pleasant to work with despite being initially confusing. Definitely faster and easier than pure css.
- NPM
- Begin with downloading/cloning the repo.
- Dowload the provided "environments" folder via Moodle and place it at
./src/environments - Use
npm starton your terminal of choice(while still in root fodler) - Open
http://localhost:4200in your browser of choice
If you get any errors try running npm install in the root folder of the app before running npm start again.
- Tasos Antoniou @tassosant
- Bill Tsolis @bt001