Unduh nativescript ionic template - Unduh Kode Sumber nativescript ionic template

nativescript ionic template

Kode sumber lainnya

1.0.0

Unduh

Template ionik NativeScript {n}

Aplikasi seluler asli dengan nativeScript dan aplikasi web (seluler pertama) dengan gaya dan komponen ionik berbagi kode yang sama dengan Angular!

Template ini menggunakan navigasi default Angular, navigasi Ionic 3 tidak disarankan untuk mengembangkan situs web, oleh karena itu tidak disarankan untuk menggunakan komponen ionik yang memerlukan navigasi ionik. Namun, dalam templat ini Anda dapat menemukan contoh cara menggunakan komponen seperti menu samping tanpa tergantung pada navigasi.

NativeCript dan Ionic

Perkenalan

Menggunakan template ini Anda dapat membuat aplikasi web (seluler pertama) menggunakan komponen Ionic 3 dan aplikasi asli seluler menggunakan NativeScript dengan kode yang sama , yay! ?

Native and Web Grid

Untuk detail lebih lanjut, Anda dapat memeriksa artikel Tim NativeScript yang sangat baik tentang berbagi kode antara Web dan Mobile dengan Angular dan NativeScript : https://www.nativescript.org/blog/code-haring-between-web-and-mobile-with-nangular-nativationscrip

Bagaimana cara kerjanya? ☕

Periksa video Sebastian Witalec yang luar biasa tentang berbagi kode antara aplikasi web dan asli

Jalankan proyek ⏯

Aplikasi Web Ionik (menggunakan Angular-CLI) :

  npm install (It's required to create the symlinks at the first time before to execute the app)
  ng serve

Aplikasi Seluler NativeScript :

  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)

Perintah

Lihat Perintah yang Tersedia Di Sini: Perintah Benih

Memulai

Memerintah	Tindakan
`npm install -g @angular/cli`	Pasang Angular-Cli. Ingatlah lihat dokumentasi di sini
`ng g module [name]`	Menghasilkan modul baru. Disarankan untuk membuat bagian dari aplikasi Anda yang akan memuat komponen dengan pemuatan malas.
`ng g component [name]`	Menghasilkan komponen baru di direktori saat ini. Ingat Tambahkan ModuleID Properti `moduleId: module.id` di setiap komponen
`ng g service [name]`	Menghasilkan layanan baru. `app/providers/` jalur direkomendasikan untuk layanan bersama di antara beberapa komponen.

Gunakan ikon ionik dari sisi NativeScript?

NativeScript memerlukan unicode ikon, Anda dapat menemukan unicode dengan nama ikon dari konten file src/fonts/ionicons.svg dan kemudian Anda dapat menggunakannya dari <Label> atau <Button> , contoh:

 // name: ion-ios-contact, unicode: &#xf41a;
<Button class="ion-icon" fontSize="25" text="&#xf41a;"></Button>

Templat khusus untuk setiap platform?

THETET THONE DAN TEMPLATE TABLET SETIAP SEDIKIT. Ekstensi berikut didukung:

Perpanjangan	Platform
`.{html/scss}`	Platform Web. Digunakan dari seluler saat tidak ada ekstensi .tns
`.tns.{html/scss}`	Hanya untuk ponsel
`.tns.ios.{html/scss}`	Hanya untuk iOS
`.tns.android.{html/scss}`	Hanya untuk Android
`.tns.ios.phone.{html/scss}`	Hanya untuk telepon iOS
`.tns.android.phone.{html/scss}`	Hanya untuk ponsel android

Pemisahan kode

Tip sudut

Sintaksis	Arti	Hasil yang diharapkan
`{{ title }}` `{{ getTitle() }}`	Merender nilai secara dinamis, ekspresi ini akan dievaluasi pada waktu berjalan.
`[src]="imageUrl"`	Properti Ikatan: Bind Properti elemen DOM ke bidang komponen.
`[attr.colspan]="colSpan"`	Ikatan atribut
`[class.selected]="user.selected"`	Ikatan Kelas : Tambahkan kelas secara dinamis.
`[style.color]="isActive? 'green': 'red'"`	Gaya mengikat
`(tap)="onSave($event)"`	Acara mengikat
`(keyup.enter)="onEnter()"`	Penyaringan acara
`#email (keyup.enter)="onEnter(email.value)`	Variabel template
`[(ngModel)]="user.email"`	Ikatan dua arah . Diperlukan Impor Formsmodule .
`{{ price \| currency:'AUD' }}`	PIPA: Format data.
`@Input('input-property') myData;` `<example [input-property]="data">`	Properti Input: Input Data untuk Komponen.
`@Output('output-property') change= new EventEmitter();` `this.change.emit({msg: 'Hi!'});` `<example (output-property)="onChange($event)">`	Properti Output: Naikkan acara dari komponen.	Onchange ({msg}) { Console.log (MSG) }