nativescript ionic template
1.0.0
NativeScriptとWebアプリ（Mobile First）を備えたネイティブモバイルアプリ（ Ionic StylesとコンポーネントがAngularと同じコードを共有しています！
このテンプレートは、Angularのデフォルトナビゲーションを使用します。Ionic3のナビゲーションはWebサイトを開発するために推奨されないため、イオンナビゲーションを必要とするイオン成分を使用することは推奨されません。ただし、このテンプレートでは、ナビゲーションに依存せずにサイドメニューなどのコンポーネントを使用する方法の例を見つけることができます。
このテンプレートを使用すると、 Ionic 3コンポーネントを使用してWebアプリ（Mobile First）と、同じコードを持つNativeScriptを使用してモバイルネイティブアプリを使用して作成できます。 ？
詳細については、AngularとNativeScriptを使用してWebとMobileの間のコード共有に関する優れたNativeScriptチームの記事を確認できます：https：//www.nativecript.org/blog/code-sharing-wetheweb-and-mobile-with-angular-and-nativecript
Webとネイティブのアプリ間でコードを共有することについてのセバスチャンWitalecの優れたビデオを確認してください
npm install (It's required to create the symlinks at the first time before to execute the app)
ng serve
cd nativescript
npm install
npm run livesync (Required to detect changes and reload the app from the simulator/device)
npm run ios (using other terminal)
ここで利用可能なコマンドを表示：シードコマンド
| 指示 | アクション |
|---|---|
npm install -g @angular/cli | Angular-CLIをインストールします。こちらのドキュメントをご覧ください |
ng g module [name] | 新しいモジュールを生成します。怠zyなロードでコンポーネントをロードするアプリのセクションを作成することをお勧めします。 |
ng g component [name] | 現在のディレクトリに新しいコンポーネントを生成します。すべてのコンポーネントにmoduleidプロパティmoduleId: module.idを追加することを忘れないでください |
ng g service [name] | 新しいサービスを生成します。 app/providers/パスは、いくつかのコンポーネント間で共有サービスに推奨されます。 |
nativeScriptはアイコンのユニコードを必要とします。SRC src/fonts/ionicons.svgファイルのコンテンツからアイコンの名前を持つUnicodeを見つけることができ、後で<Label>または<Button>からそれを使用できます。
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
ターゲット電話とタブレットテンプレートは個別に。次の拡張機能がサポートされています。
| 拡大 | プラットフォーム |
|---|---|
.{html/scss} | Webプラットフォーム。 .tns拡張機能がない場合にモバイルから使用します |
.tns.{html/scss} | モバイルのみ |
.tns.ios.{html/scss} | iOSのみ |
.tns.android.{html/scss} | Androidのみ |
.tns.ios.phone.{html/scss} | iOS電話のみ |
.tns.android.phone.{html/scss} | Android電話のみ |
| 構文 | 意味 | 期待される結果 |
|---|---|---|
{{ title }}{{ getTitle() }} | 値を動的にレンダリングすると、この式は実行時に評価されます。 | |
[src]="imageUrl" | プロパティバインディング： DOM要素のプロパティをコンポーネントのフィールドにバインドします。 | |
[attr.colspan]="colSpan" | 属性バインディング | |
[class.selected]="user.selected" | クラスのバインディング：クラスを動的に追加します。 | |
[style.color]="isActive? 'green': 'red'" | スタイルバインディング | |
(tap)="onSave($event)" | イベントバインディング | |
(keyup.enter)="onEnter()" | イベントフィルタリング | |
#email (keyup.enter)="onEnter(email.value) | テンプレート変数 | |
[(ngModel)]="user.email" | 双方向の結合。 Import formsmoduleが必要です。 | |
{{ price | currency:'AUD' }} | パイプ：フォーマットデータ。 | |
@Input('input-property') myData;<example [input-property]="data"> | 入力プロパティ：コンポーネントの入力データ。 | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> | 出力プロパティ：コンポーネントからイベントを上げます。 | onchange（{msg}） { console.log（msg） } |
| ショーン・パーキンス | フアン・ニコルズ |
私はユニコーンを信じていますか？あなたもそうするなら、私をサポートしてください。
❤️で作られています
