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 window.opener返回父页面的应用
Oct 24 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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
JS 网站性能优化笔记
2011/05/24 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
《Python学习手册》学习总结
2018/01/17 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
英语教学随笔感言
2014/02/20 职场文书
参观接待方案
2014/03/17 职场文书
文案策划专业自荐信
2014/07/07 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
Redis 常见使用场景
2021/08/30 Redis
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android