ionic2 generate生成器的使用

在开发ionic2项目时，会有很多页面和服务需要创建，如果全靠自己手动创建的话，会有很多重复的枯燥的操作要做，即增加开发时间，又影响开发效率，严重影响写代码的心情。

Ionic现在提供了一个生成器功能来为您的应用程序创建页面和服务。 这是一个命令行的功能，在终端输入一个命令，告诉ionic你想创建什么，然后按下回车享受三秒闲暇时光:)

能够创建的部分(CLI v2.2.3)：

• page

#commandionic g page mypage#result√ Create app/pages/mypage/mypage.html 
√ Create app/pages/mypage/mypage.scss 
√ Create app/pages/mypage/mypage.ts

mypage.html

<!--
  Generated template for the Mypage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
--><ion-header>
  <ion-navbar>
    <ion-title>mypage</ion-title>
  </ion-navbar></ion-header><ion-content padding></ion-content>

mypage.ts

import { Component } from '@angular/core';import { NavController, NavParams } from 'ionic-angular';/*
  Generated class for the Mypage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/@Component({  selector: 'page-mypage',  templateUrl: 'mypage.html'})export class MypagePage {  constructor(public navCtrl: NavController, public navParams: NavParams) {}
  ionViewDidLoad() {    console.log('ionViewDidLoad MypagePage');
  }
}

• component

#commandionic g component myComponent#result√ Create app/component/my-component/my-component.html 
√ Create app/component/my-component/my-component.scss 
√ Create app/component/my-component/my-component.ts

my-component.ts

import { Component } from '@angular/core';/*
  Generated class for the MyComponent component.
  See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
  for more info on Angular 2 Components.
*/@Component({  selector: 'my-component',  templateUrl: 'my-component.html'})export class MyComponentComponent {
  text: string;  constructor() {    console.log('Hello MyComponent Component');    this.text = 'Hello World';
  }
}

• directive

#commandionic g directive myDirective#result√ Create app/components/my-directive/my-directive.ts

my-directive.ts

import { Directive } from '@angular/core';/*
  Generated class for the MyDirective directive.
  See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
  for more info on Angular 2 Directives.
*/@Directive({  selector: '[my-directive]' // Attribute selector})export class MyDirective {  constructor() {    console.log('Hello MyDirective Directive');
  }
}

• provider

#commandionic g provider myProvider#result√ Create app/providers/my-provider.ts

my-provider.ts

import { Injectable } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/map';/*
  Generated class for the MyProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/@Injectable()export class MyProvider {  constructor(public http: Http) {    console.log('Hello MyProvider Provider');
  }
}

以上四种形式是开发过程中最长用到的，在CLI>=3.0.0的版本中，ionic2新增了更多的服务生成器，用法基本一样。

作者：SuperBinlin
链接：https://www.jianshu.com/p/c445dbfdb56f