Téléchargement nativescript ionic template - Téléchargement du code source nativescript ionic template

nativescript ionic template

Autre code source

1.0.0

Télécharger

Modèle ionique natifscript {n}

Applications mobiles natives avec des applications Nativescript et Web (Mobile First) avec des styles et des composants ioniques partageant le même code avec Angular!

Ce modèle utilise la navigation par défaut d'Angular, la navigation d'Ionic 3 n'est pas recommandée pour développer des sites Web, il n'est donc pas recommandé d'utiliser des composants ioniques qui nécessitent une navigation ionique. Cependant, dans ce modèle, vous pouvez trouver un exemple d'utilisation de composants tels que le menu latéral sans dépendre de la navigation.

Natifscript et ionique

Introduction

À l'aide de ce modèle, vous pouvez créer une application Web (Mobile First) à l'aide de composants Ionic 3 et une application native mobile utilisant NativeScript avec le même code , yay! ?

Native et Web Grid

Pour plus de détails, vous pouvez consulter l'excellent article de l'équipe Nativescript sur le partage de code entre le Web et le mobile avec Angular et Nativescript : https://www.nativescript.org/blog/code-sharing-betwown-web-and-mobile-with-angular-and-natifcriptcript

Comment ça marche? ☕

Consultez l'excellente vidéo de Sebastian Witalec sur le partage du code entre les applications Web et natives

Exécuter les projets ⏯

Application Web ionique (en utilisant le CLI angulaire) :

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

Application mobile 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)

Commandes

Voir les commandes disponibles ici: Commandes de semences

Commencer

Commande	Action
`npm install -g @angular/cli`	Installez le CLI angulaire. Rappelez-vous voir la documentation ici
`ng g module [name]`	Générer un nouveau module. Recommandé de créer des sections de votre application qui chargera des composants avec un chargement paresseux.
`ng g component [name]`	Générez un nouveau composant dans le répertoire actuel. N'oubliez pas d'ajouter la propriété moduleid `moduleId: module.id` dans chaque composant
`ng g service [name]`	Générer un nouveau service. L' `app/providers/` chemin sont recommandés pour les services partagés entre plusieurs composants.

Utiliser des icônes ioniques du côté indigène?

NativeScript nécessite le Unicode de l'icône, vous pouvez trouver le Unicode avec le nom de l'icône à partir du contenu du fichier src/fonts/ionicons.svg et plus tard, vous pouvez l'utiliser à partir d'un <Label> ou <Button> , exemple: Exemple:

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

Modèles personnalisés pour chaque plate-forme?

Modèles de téléphone et de tablette cibles individuellement. Les extensions suivantes sont prises en charge:

Extension	Plate-forme
`.{html/scss}`	Plateforme Web. Utilisé à partir de mobile quand il n'y a pas d'extension .tns
`.tns.{html/scss}`	Seulement pour mobile
`.tns.ios.{html/scss}`	Seulement pour iOS
`.tns.android.{html/scss}`	Seulement pour Android
`.tns.ios.phone.{html/scss}`	Seulement pour le téléphone iOS
`.tns.android.phone.{html/scss}`	Seulement pour le téléphone Android

Division du code

Conseils angulaires

Syntaxe	Signification	Résultat attendu
`{{ title }}` `{{ getTitle() }}`	Rendez une valeur dynamiquement, cette expression sera évaluée au moment de l'exécution.
`[src]="imageUrl"`	LIGNAGE DE LA PROPRIÉTÉ: liez une propriété d'un élément DOM à un champ du composant.
`[attr.colspan]="colSpan"`	Liaison d'attribut
`[class.selected]="user.selected"`	Classe Binding : Ajoutez une classe dynamiquement.
`[style.color]="isActive? 'green': 'red'"`	Liaison de style
`(tap)="onSave($event)"`	Reliure d'événement
`(keyup.enter)="onEnter()"`	Filtrage des événements
`#email (keyup.enter)="onEnter(email.value)`	Variables de modèle
`[(ngModel)]="user.email"`	Reliure bidirectionnelle . Importer FormsModule est requis.
`{{ price \| currency:'AUD' }}`	Pipes: Données de format.
`@Input('input-property') myData;` `<example [input-property]="data">`	Propriétés d'entrée: données d'entrée pour le composant.
`@Output('output-property') change= new EventEmitter();` `this.change.emit({msg: 'Hi!'});` `<example (output-property)="onChange($event)">`	Propriétés de sortie: augmenter les événements du composant.	onchange ({msg}) { console.log (msg) }