This section details important experience with Angular. Click here if you want to see how to run this project yourself.
Links within this section direct to different sections of this readme for quick navigation.
Here are the different major sections of this section of the readme: Services, and Routing.
If you have any feedback please feel free to let me know. I am always looking to improve my coding skills.
I made services that communicate with free to use API backends. This was done to have a good source of data and simulate a full stack web development project. The important concepts used in these files are dependency injection, http client functions, http error handling, observables, and TypeScript interfaces.
There are currently three services: fruits service, cocktails service, and meals service.
There are two different types of dependency injection going on here. One is the act of providing a dependency to be injected and the other is injecting the dependency to the class.
Dependency injection is used in all of the services. An example with the fruits service. Providing a dependency can be seen on line 8 and injecting a dependency can be seen on line 15.
Providing a class as a dependency that can be injected can be done two ways. Adding it as a provider in a decorator metadata or using the injectable decorator. I choose to use the injectable decorator and provided the service in the root. I choose this because angular will only create the service this way if it is used. Providing in say a module will cause it to be created with that module. This helps with optimization of the app.
To inject a dependency to the class it is declared in the classes constructor. This lets angular know you need to pull in this dependency.
The services created use the HttpClientModule and the accompanying HttpClient to connect to the free to use APIs.
Since these are free to use APIs, modifications to the underlying data are largly not allowed, so all the http methods used are get. I might change this in the future if I create a personal project that implements an API. Get does allow for typing so that the observable returned is typed. This is useful to be able to use TypeScript's typing mechanisms and I personally do this. I find not doing this to not be utilizing TypeScript to its full ability.
Http client functions are used in all of the services. An example with the cocktails service. The get function is used for the first time on line 23 and used several more times throughout the file.
The content of the services is provided to the components via observables. Observables are very powerful and can do many things. The observables here used http client functions which return observables, the of functions, pipe function, map function, catch error function, and throw error function.
Observables are used in all of the services. The of function is unique to the fruits service, while the map function is unique to the cocktails service. The first http function is used on line 22, under that on line 23 is the pipe function, and under that on line 24 is the catch error function within the fruits service. The throw error function is used on line 88 within the fruits service. The map function is first used on line 25 of the cocktails service.
The of function is used to create an observable from an object. The observable returned will emit the object passed into it. Of was used here in order to make listing properties within the fruits service behave in a similar fashion to the cocktails service. The api behind the cocktails service has endpoints to list out various available search parameters. I used of to do this with the fruits service.
Throw error is used to emit an observable error, so that when the components expects an observable it doesn't break. The main reason for using this function is to allow the app to fail gracefully.
Interfaces are an important part of TypeScript. The define types that different objects need to adhear to. They allow for better control over information by enforcing that certain properties need to exist. I used interfaces due to this reason. I also used a vs code extension that converts json into TypeScript interfaces called JSON to TS. This allowed for faster translation of api responses into interfaces.
Interfaces are used in all of the services. The fruits service provides a simple example starting on line 81. The cocktails service has more interfaces and is more complex example which starts on line 265.
Routing is obviously a very important concept in any web development, even static html pages. It allows users to move around the site and gain the information they want. Routing can be extremely complex with many moving parts to take into mind.
This project was generated with Angular CLI version 16.0.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application 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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.