最近学会了做手机APP，发现Ionic2这个神器，里面竟然有个牛逼的自动生成器，可以快速搞定APP里的小零件，真是省时省力！今天就来跟大家分享下怎么用，以及需要注意些什么。
一、自动生成器的基本认识
用ionic2的时候，我发现那个自动生成器真的太棒了！它可以帮助你自动快速搞定APP的所有基本元素，包括页面啦、组件啦、指令啦、服务提供者甚至管道等等。有了这个神奇的工具，搭建APP框架简直就是小菜一碟！
二、创建页面的体验
我先试试了’ionicgpage[PageName]’这个命令，这可是我在做Ionic2项目时常用的。这样一来，新页面的前端就全搞定，包括TS文件、HTML模板和SCSS样式文件，省事儿多了！
ionic g page login # Results: √ Create app/pages/login/login.html √ Create 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',
})
export class LoginPage {
constructor(public nav: NavController) {}
}
后来，我弄了个’ionicgcomponent[ComponentName]’的指令，秒变组件归属！这跟复制黏贴一样简单，想让哪个组件跑哪儿去咱说了算！这自动化生成真好用，比自己动手还快，都不用你操心选啥，简直太省事儿了！
login
四、创建指令的尝试
在ionic2中，用指令就能给元素添动作。比如用’ionicgdirective[DirectiveName]’这命令，简单得很呐！自动生成器会帮你搞定指令框架，你只需要直接使用就行了，速度飞快！
ionic g component myComponent # Results: √ Create app/components/my-component/my-component.html √ Create 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';
}
}
用Ionic2做APP，想要快速搭建好用的服务系统？挺简单的，直接输入`ionicgprovider[ProviderName]`就能搞定了，像是连接RESTAPI啦、本地存储这些功能。这货除了能给你瞬间生成文件，还会自动搞定相关类和方法，真的是快到没朋友又实用！
六、创建管道的便利
管子这玩意儿，在Ionic2里挺管用的，可以让模板里的数据排列得整整齐齐。你只需要用指令’ionicgpipe[PipeName]’，就能搞定一个大概的管道程序，然后再把里面的内容换成你想要的转换规则就行。
ionic g directive myDirective # Results: √ Create app/components/my-directive/my-directive.ts
七、自动生成器的综合体验
import {Directive} from '@angular/core';
@Directive({
selector: '[my-directive]' // Attribute selector
})
export class MyDirective {
constructor() {
console.log('Hello World');
}
}
用了Ionic2的自动生成器之后，感觉太妙了！不仅仅好用，关键是效率也高多了，做出来的东西整齐有序。这样一来，就没必要花时间弄那些乱七八糟的事，比如配置什么的，或者写重复的代码，咱们就能专心致志地研究业务逻辑！
八、使用自动生成器的注意事项
当然，自动生成器确实方便，不过也不能掉以轻心！首先，得确保每一个零件都能用，代码整洁些可别乱七八糟的。其次，生成的代码最好再修改下，使其更适合我们的项目需求。最后，把那些没用的零件清理掉，让项目看起来干净利落。
ionic g provider userService # Results: √ Create app/providers/user-service/user-service.ts
首先要说，Ionic2这个自动生成工具真的特别好用！它操作简单，省去很多繁琐的步骤，极大提高了开发效率！只要懂得正确使用，这个神器就能帮助我们快速打造出优秀的Ionic2应用。希望我的分享对你们有所帮助。如果你有任何问题或建议，欢迎随时留言；别忘了给我点个赞，让更多人了解并掌握Ionic2的自动生成器。
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);
});
});
}
}
评论0