Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

    Use the Ionic CLI to Generate Angular 2 Mobile Components

    Mike HartingtonMike Hartington
    2 - 6

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.