The Automatic Generator method is used in ionic2. The ionic2 generator method

The Automatic Generator method is used in ionic2. The ionic2 generator method

Ionic generator is a command line function. ionic2 automatically helps us create applications, saving a lot of time and increasing our speed to develop a key part of a project.

Ionic generator allows us to automatically create the following parts:

• Component
• Directive
• Page
• Provider

1. Create a page: ionic g page [PageName]

Use this command to create a new page. In ionic2 project, this command is used at most

We only need to enter our command line and run the following command:

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

Login. ts:

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

Login.html:

<ion-header> <ion-navbar> <ion-title>  login </ion-title> </ion-navbar></ion-header><ion-content padding class="login"></ion-content>

Ii. Create components: ionic g component [ComponentName]

A component is a piece of code that can be used in any part of our application.

Use this command to create a component:

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

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';  } }

Iii. Create commands: ionic g directive [DirectiveName]

Command. modifier attributes that can be used by our application on any element.

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

My-directive.ts:

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

4. Create a service provider: ionic g provider [ProviderName]

Now, a new service (provider) is created. The provider is responsible for the connection of REST APIs for data processing, local storage, and SQLite.

To create it, run the following command on our terminal:

ionic g provider userService # Results: √ Create app/providers/user-service/user-service.ts

The Service Code is as follows:

User-service.ts:

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

5. Create pipeline pipe: ionic g pipe [PipeName]

We can use our template for any data, such as displaying text, currency value, date format, and so on with uppercase/lowercase letters.

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

The pipeline code is as follows:

MyPipe. ts:

import {Injectable, Pipe} from '@angular/core'; @Pipe({  name: 'my-pipe' }) @Injectable() export class MyPipe {  transform(value: string, args: any[]) {  value = value + ''; // make sure it's a string  return value.toLowerCase();  } }

Finally, the application structure we generated is as follows:

Our projects will be stored in a more orderly and more control mode, which can be implemented manually, but using ionic generator can save valuable time to create such content.

Summary

The above section describes how to use the Automatic Generator in ionic2. I hope it will be helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!