ionic2中如何使用自動生成器

2022-04-06 12:24:12 字數 1995 閱讀 4264

ionic generator是命令列的功能,ionic2自動幫我們建立應用程式,從而節省了大量的時間,並增加我們的速度來開發乙個專案的關鍵部分。

ionic generator使我們可以自動建立以下幾部份:

一、建立頁面:ionic g page [pagename]

通過這個命令建立乙個新的頁面,ionic2專案中這個命令使​​用最多

我們只需要進入我們的命令列中,並執行下面的命令:

ionic g page login

# results:

login.ts:

import from '@angular/core';

import from 'ionic-angular';

@component()

export class loginpage

}

login.html:

login

二、建立元件:ionic g component [componentname]

元件是一段**,可以在我們的應用程式的任何部分使用

通過這個命令建立乙個元件:

ionic g component mycomponent

# results:

my-component.ts:

import from '@angular/core';

@component()

export class mycomponent

}

三、建立指令:ionic g directive [directivename]

指令,我們的應用程式可以在任何元素上使用的修飾符屬性.

ionic g directive mydirective 

# results:

my-directive.ts:

import from '@angular/core';

@directive()

export class mydirective

}

四、建立服務提供者:ionic g provider [providername]

現在建立乙個新的服務(提供者),提供者負責處理資料的rest api的連線,本地儲存,sqlite的等等。

要建立它,我們去執行以下命令我們的終端:

ionic g provider userservice 

# results:

服務**如下:

五、建立管道pipe:ionic g pipe [pipename]

該管道的變化,我們可以對任何資料使用我們的模板,如以大寫字母顯示文字,顯示貨幣值,日期格式等。

ionic g pipe mypipe 

# results:

我們的管道的**如下

mypipe.ts:

import from '@angular/core';

@pipe()

@injectable()

export class mypipe

}

最後,我們生成的應用程式結構如下圖:

我們的專案將存放在乙個更加有序和更多的控制方式,這一切都可以手動實現,但用ionic generator來做,可以節省寶貴的時間來創造這些內容。

Ionic2生成網頁工作原理

ionic2生成網頁工作原理 由於專案需要,沒有使用android原生開發,而是使用了現在流行的hybird開發技術。經過選擇最終選擇了ionic1,學習了一段時間,發現了官網的文件函式在ionic1,沒有實現相應的效果。才發現原來得使用ionic2,新版的框架。因此,現在專案使用ionic2開發。...

ionic2 中的網路監測功能

參考 後須還將發表其他我正在ionic2使用的外掛程式或功能 增加網路監測功能的cordova外掛程式 ionic plugin add cordova plugin network information 開啟網路狀態動態檢測 開啟網路監測 startnetdetect stop disconne...

ionic2中跨頁面回傳值

1 在跳轉到新頁面時傳入乙個contactscallback的引數,在該引數的函式定義中做出乙個承諾。注意 最開始我本來是採用如下圖方式的,但是很不幸,出現了問題,問題所在就是關於這個this的作用域問題。這裡要用到es6的箭頭函式 arrow functions。普通function函式和箭頭函式...