Custom Students Service
Before you flesh out the Roster page, you need to get some students to display. Later you will want to tie the list into a data store of some sort, but you do not need to do that just to get some data displayed on the page.
For that, you are going to create a simple “Students” service you can inject into the pages that need it. Use the command line to create the service.
In this case, it does not matter whether or not you use the Angular CLI or the Ionic CLI. Go ahead and use the Angular CLI this time. Enter the following command.
npx ng generate service Students --dry-run
In case this is your first time seeing
npx, I will explain. When you install
npmpackages globally, as you did with the Ionic CLI, the package’s main binary will be linked to a folder that is already in your execution path.
On the other hand, the Ionic-Angular project template installs the Angular CLI as a local project dependency. This means that the entire Angular CLI is installed in your project’s node_modules folder. This makes it visible to your project’s npm scripts, but completely invisible to your system. When you type
nginto your terminal, it has no idea where to find that command.
npxcommand, which is installed with
npm, knows to look for commands inside of your node_modules command. Before
npx, if you wanted to run a command you had installed locally, you had two choices:
Run it as an
npmscript, because npm already know where to look.
Prepend your command with
This command is simply instructing the Angular CLI to generate a service named Students. The dry-run option gives you a chance to see what will happen, and then tweak things if you do not like what you see.
CREATE src/app/students.service.spec.ts (338 bytes)
CREATE src/app/students.service.ts (136 bytes)
NOTE: The "dryRun" flag means no changes were made.
By default, the service will be created in the app folder, but not in a folder of its own, and it will be created with a unit test. We have already run these commands for you. The service is present in the application provided below.
students.service.ts file, you will create an interface, a constant, and a function.
Implementing the service