Comment utiliser le générateur automatique dans ionic2

Cette fois, je vais vous montrer comment utiliser le générateur automatique dans ionic2, et quelles sont les précautions d'utilisation du générateur automatique dans ionic2. Ce qui suit est un cas pratique, jetons un coup d'œil ensemble. Jetez un œil.

Le générateur ionique est une fonction de ligne de commande, ionic2 nous aide automatiquement à créer des applications, économisant ainsi beaucoup de temps et augmentant notre vitesse de développement des parties clés d'un projet.

le générateur ionique nous permet de créer automatiquement les pièces suivantes :

•component
•directive
•page
•provider

1 . Créer une page : ionic g page [PageName]

Créez une nouvelle page via cette commande Cette commande est la plus utilisée dans le projet ionic2

Il suffit de saisir notre. ligne de commande et exécutez les commandes suivantes :

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>

2. Créer composants :ionic g composant [ComponentName]

Un composant est un morceau de code qui peut être utilisé dans n'importe quelle partie de notre application

Créez un composant avec cette commande :

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'; 
 } 
}

3. Créer une directive : directive ionique g [DirectiveName]

directive, notre application peut être utilisé n'importe où Modificateurs utilisés sur les éléments attributs .

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'); 
 } 
}

4. Créer un fournisseur de services : fournisseur ionique g [ProviderName]

Créez maintenant un nouveau service (fournisseur), le fournisseur est responsable de la gestion des connexions de données à l'API REST, au stockage local, à SQLite, etc.

Pour le créer, nous allons sur notre terminal et exécutons la commande suivante :

ionic g provider userService 
# Results: 
√ Create app/providers/user-service/user-service.ts

Le code du service est le suivant :

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); 
  }); 
 }); 
 } 
}

5. Créez un tuyau : tuyau ionique g [PipeName]

Variations de ce tuyau, nous pouvons utiliser notre modèle pour toutes les données, telles que l'affichage. texte en lettres majuscules, affichage des valeurs monétaires, formats de date, etc.

ionic g pipe myPipe 
# Results: 
√ Create app/pipes/myPipe.ts

Le code de notre pipeline est le suivant

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(); 
 } 
}

Enfin, la structure de l'application que nous avons générée est la suivante :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez js pour obtenir rapidement l'adresse de l'image dans la page html

Comment faire package webpack, la compression des fichiers devient plus petite

Effets spéciaux de la barre de navigation étoilée

Plusieurs façons de lier cela pour réagir aux événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!