ionic generator is the function of command line. Ionic2 automatically helps us create applications, which saves a lot of time and increases our speed to develop a key part of a project.

ionic generator so that we can automatically create the following parts:

- component
- directive
- page
- provider

, ionic g page [PageName]

: create a page through the

command to create a new page, this command in the ionic2 project make Torgovnik with the most

we only need to enter our command line then, run the following command:

 ionic g page login Results: Create app/pages/login/login.html Create # tick tick tick app/pages/login/login.scss Create app/ pages/login/login.ts


 import {Component} from'@angular/core'import {NavController} from;'ionic-angular'; @Component (templateUrl: {'build/pages/login/login.html'} class {LoginPage, export) Constructor (public nav: NavController}


 <) {}; ion-header> < ion-navbar> < ion-title> login < /ion-title> < /ion-navbar> < /ion-header> < ion-content padding> < /ion-content> 

two, G component [ComponentName]

ionic to create a component:

component is a piece of code that can be in any part of our application using

to create a component through this command:

 ionic g component myComponent Results: Create app/components/my-component/my-component.html Create # tick tick app/components/my-component/my-component.ts


 import {Component} from'@angular/core'@Component ({selector:'; My-component', templateUrl:'build/components/my-component/my-component.html' export class MyComponent {text:}) = "string"; constructor (this.text ='Hello) {World'};}

three, ionic g directive [the creation instruction: DirectiveName]

instruction, our application can be used in any element on the properties of the.

 ionic g directive modifier myDirective # Results: v Create app/components/my-directive/my-directive.ts


pre> import {Directive} from'@angular/core' "(selector:'[my-directive]'; @Directive {/ / Attribute selector export class MyDirective {constructor}) (console.log ('Hello) {World'});}

four, create a service. The donor: ionic g provider [ProviderName]

now creates a new service provider, which is responsible for handling REST API connections, local storage, SQLite and so on.

to create it, we are going to run the following command:

 ionic our terminal g provider userService Results: Create app/providers/user-service/user-service.ts

# V

service code is as follows:


 import {Injectable} from'@angular/core'; import {Http} from'@angular/http'; import'rxjs/add/operator/map'; @Injectable (export) class UserService any {data: = null; constructor (public http: Http (load)) {} {if} {( return new Promise (resolve => this.http.get ('path/to/data.json') {.Map (RES => res.json (.Subscribe (data)) { = data; => resolve (;});}});}

pipe:ionic G five, create a pipeline pipe [PipeName ]

the change of the pipeline, we can use any template to display any data, such as capitalized letter, currency, date format, etc.

 ionic g pipe myPipe Results: Create app/pipes/myPipe.ts

# put our pipeline


 code import {Injectable, Pipe} from'@angular/core'; @Pipe ('my-pipe' {name:}) (@Injectable) export class MyPi

This concludes the body part