Submodule 20.3: Services and Dependency Injection - Practice

Open the angularChocoYourname  angular-sub-folder in your Visual Editor code and create a folder named services in the src/app folder.

Open your Terminal and move to the angularChocoYourname  angular-sub-folder.

To add a service to your application using Angular CLI, type the following at the prompt:

ng generate service services/dish

This will create two new files in the services folder named dish.service.spec.ts and dish.service.ts.

• This first one is used for testing our angular service.
• The second one is where we will create our dish service and then inject that into our app module and make use of it in our menu component. 

Note

The very first statement there says import injectable from @angular/core.

This statement allows us to define the decorator @Injectable() . Any class to which we apply this decorator becomes injectable. 

By using this injectable decorator to theDishService, we are making this object now injectable within our application. So this is what enables the dependency injection to be used within our application.