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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
js回文数的4种判断方法示例
Jun 04 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
第十二节--类的自动加载
2006/11/16 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
SVG实现时钟效果
2018/07/17 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python调用cmd复制文件代码分享
2013/12/27 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python环境变量设置方法
2016/08/28 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python元组的概念知识点
2019/11/19 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
应届大学生的推荐信
2013/11/20 职场文书
档案管理员岗位职责
2013/12/01 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
生日宴会答谢词
2014/01/09 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
岗位说明书范文
2014/05/07 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
在职证明格式样本
2015/06/15 职场文书
Python经常使用的一些内置函数
2022/04/11 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技