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学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
详解Python中的正则表达式
2018/07/08 Python
Python3实现定时任务的四种方式
2019/06/03 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python实现自动清理重复文件
2020/08/24 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
财政专业求职信范文
2014/02/19 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
学校食品安全实施方案
2014/06/14 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
城南旧事观后感
2015/06/11 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang