Use the Ionic CLI to Generate Angular 2 Mobile Components
In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run ionic g --list in your terminal.
[00:00] Having this People array be in line will work for now, but we should probably extract it out into a class. To do this, we'll use the Ionic-CLI's generate command.
[00:11] Let's open up a new terminal. We can run the command ionic g provider People. This will create a prebuilt provider for us in the source provider's folder.
[00:26] In home.ts, let's remove the original array of People.
[00:33] We'll then open up our newly-created provider, people.ts. We'll then create a new property of People, and then set its value to our original array.
[00:47] Then we'll create a method called getPeople and have it return the array of this.people.
[01:00] Now, we'll want to open up our app.modules.ts file. We'll import our newly-created provider from providers People, and then import that class People.
[01:12] Then we'll make sure to add it to the providers array of our NgModule.
[01:22] We can now go back to our home.ts file. We'll import the People's provider again from our providers/people and import the class People.
[01:35] We'll head down to our constructor and inject a service with a type of People. We can finish it by saying our property of People is going to equal this.service.getPeople.
[01:51] We can then save and have our data still be updated, just getting pulled from our service. Now, the CLI's generate command can create more than just providers.
[02:00] We can see all the available generators by running ionic g --list. We can create components, directives, full pages, types, and as well as generator for creating the full tabs layout.