ionic2中使用自動生成器的方法
ionic generator是命令行的功能,ionic2自動幫我們創(chuàng)建應(yīng)用程序,從而節(jié)省了大量的時(shí)間,并增加我們的速度來開發(fā)一個(gè)項(xiàng)目的關(guān)鍵部分。
ionic generator使我們可以自動創(chuàng)建以下幾部份:
•component
•directive
•page
•provider
一、創(chuàng)建頁面:ionic g page [PageName]
通過這個(gè)命令創(chuàng)建一個(gè)新的頁面,ionic2項(xiàng)目中這個(gè)命令使用最多
我們只需要進(jìn)入我們的命令行中,并運(yùn)行下面的命令:
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>
二、創(chuàng)建組件:ionic g component [ComponentName]
組件是一段代碼,可以在我們的應(yīng)用程序的任何部分使用
通過這個(gè)命令創(chuàng)建一個(gè)組件:
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'; } }
三、創(chuàng)建指令:ionic g directive [DirectiveName]
指令,我們的應(yīng)用程序可以在任何元素上使用的修飾符屬性.
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'); } }
四、創(chuàng)建服務(wù)提供者:ionic g provider [ProviderName]
現(xiàn)在創(chuàng)建一個(gè)新的服務(wù)(提供者),提供者負(fù)責(zé)處理數(shù)據(jù)的REST API的連接,本地存儲,SQLite的等等。
要?jiǎng)?chuàng)建它,我們?nèi)ミ\(yùn)行以下命令我們的終端:
ionic g provider userService # Results: √ Create app/providers/user-service/user-service.ts
服務(wù)代碼如下:
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); }); }); } }
五、創(chuàng)建管道pipe:ionic g pipe [PipeName]
該管道的變化,我們可以對任何數(shù)據(jù)使用我們的模板,如以大寫字母顯示文本,顯示貨幣值,日期格式等。
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(); } }
最后,我們生成的應(yīng)用程序結(jié)構(gòu)如下圖:
我們的項(xiàng)目將存放在一個(gè)更加有序和更多的控制方式,這一切都可以手動實(shí)現(xiàn),但用ionic generator來做,可以節(jié)省寶貴的時(shí)間來創(chuàng)造這些內(nèi)容。
總結(jié)
以上所述是小編給大家介紹的ionic2中使用自動生成器的方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時(shí)回復(fù)大家的!
相關(guān)文章
Openlayers實(shí)現(xiàn)點(diǎn)閃爍擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)點(diǎn)閃爍擴(kuò)散效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09php register_shutdown_function函數(shù)詳解
register_shutdown_function() 函數(shù)可實(shí)現(xiàn)當(dāng)程序執(zhí)行完成后執(zhí)行的函數(shù),其功能為可實(shí)現(xiàn)程序執(zhí)行完成的后續(xù)操作,需要的朋友可以參考下2017-07-07微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)效果,手機(jī)登錄、填手機(jī)號獲取驗(yàn)證碼,倒計(jì)時(shí)后重新獲取效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧2022-09-09