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对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
JS删除对象中某一属性案例详解
Sep 08 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现单词翻译功能
2017/06/06 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
运动会新闻稿
2015/07/17 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL