Start an Ionic 2 App with the CLI

Build your first page component with Ionic 2

Use Sliding Gestures to Reorder an Ionic 2 List

Use the Ionic CLI to Generate Angular 2 Mobile Components

Fetch data from an API using Angular 2 HTTP module 

Lazy Load Data with Ionic 2

Navigate Between Mobile Screens  with the Ionic 2 NavController

Preview an Angular 2 Mobile  App with Ionic Lab

Create Angular 2 Mobile Card based layouts with Ionic 2

Use Ionic 2 NavController to Manipulate App History

Create an Overlay Component with the Ionic 2 Overlay API

Create a Native Mobile Side Menu Layout in Ionic 2

Building apps with Ionic 2

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.

Course

Building apps with Ionic 2

Use the Ionic CLI to Generate Angular 2 Mobile Components

Share this video with your friends