Use the Ionic CLI to Generate Angular 2 Mobile Components

Mike Hartington
InstructorMike Hartington

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

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.