ionic2中使用自动生成器的方法


Posted in Javascript onMarch 04, 2018

ionic generator是命令行的功能,ionic2自动帮我们创建应用程序,从而节省了大量的时间,并增加我们的速度来开发一个项目的关键部分。

ionic generator使我们可以自动创建以下几部份:

•component
•directive
•page
•provider

一、创建页面:ionic g page [PageName]

通过这个命令创建一个新的页面,ionic2项目中这个命令使​​用最多

我们只需要进入我们的命令行中,并运行下面的命令:

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>

二、创建组件:ionic g component [ComponentName]

组件是一段代码,可以在我们的应用程序的任何部分使用

通过这个命令创建一个组件:

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

三、创建指令:ionic g directive [DirectiveName]

指令,我们的应用程序可以在任何元素上使用的修饰符属性.

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

四、创建服务提供者:ionic g provider [ProviderName]

现在创建一个新的服务(提供者),提供者负责处理数据的REST API的连接,本地存储,SQLite的等等。

要创建它,我们去运行以下命令我们的终端:

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

服务代码如下:

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

五、创建管道pipe:ionic g pipe [PipeName]

该管道的变化,我们可以对任何数据使用我们的模板,如以大写字母显示文本,显示货币值,日期格式等。

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

我们的管道的代码如下

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(); 
 } 
}

最后,我们生成的应用程序结构如下图:

ionic2中使用自动生成器的方法

我们的项目将存放在一个更加有序和更多的控制方式,这一切都可以手动实现,但用ionic generator来做,可以节省宝贵的时间来创造这些内容。

总结

以上所述是小编给大家介绍的ionic2中使用自动生成器的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
Vue.directive()的用法和实例详解
Mar 04 #Javascript
Vue.directive 自定义指令的问题小结
Mar 04 #Javascript
JavaScript图片处理与合成总结
Mar 04 #Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 #Javascript
编写React组件项目实践分析
Mar 04 #Javascript
Vue组件开发技巧总结
Mar 04 #Javascript
代码详解javascript模块加载器
Mar 04 #Javascript
You might like
PHP计数器的实现代码
2013/06/08 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
解决python 输出是省略号的问题
2018/04/19 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
详解Python正则表达式re模块
2019/03/19 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
优秀教师申报材料
2014/12/16 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL