Heim > Web-Frontend > js-Tutorial > Was sind die Schritte zur Verwendung automatischer Generatoren in ionic2?

Was sind die Schritte zur Verwendung automatischer Generatoren in ionic2?

亚连
Freigeben: 2018-06-01 14:59:01
Original
1404 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode zur Verwendung des automatischen Generators in ionic2 vorgestellt.

ionischer Generator ist eine Befehlszeilenfunktion, die uns beim automatischen Erstellen von Anwendungen hilft und so viel spart Wir sparen Zeit und erhöhen unsere Geschwindigkeit bei der Entwicklung kritischer Teile eines Projekts.

Der Ionengenerator ermöglicht uns die automatische Erstellung der folgenden Teile:

•Komponente
•Richtlinie
•Seite
•Anbieter

1 . Erstellen Sie eine Seite: ionic g page [PageName]

Erstellen Sie eine neue Seite mit diesem Befehl.

Wir müssen nur unsere eingeben Befehlszeile und führen Sie den folgenden Befehl aus:

ionic g page login
# Results: 
√ Create app/pages/login/login.html 
√ Create app/pages/login/login.scss 
√ Create app/pages/login/login.ts
Nach dem Login kopieren

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) {} 
}
Nach dem Login kopieren

login.html:

<ion-header>
 <ion-navbar>
 <ion-title>
  login
 </ion-title>
 </ion-navbar>
</ion-header>
<ion-content padding class="login">
</ion-content>
Nach dem Login kopieren

2. Erstellen Sie die Komponente: ionic g Component [ ComponentName ]

Eine Komponente ist ein Stück Code, das in jedem Teil unserer Anwendung verwendet werden kann

Erstellen Sie eine Komponente mit diesem Befehl:

ionic g component myComponent
# Results: 
√ Create app/components/my-component/my-component.html 
√ Create app/components/my-component/my-component.ts
Nach dem Login kopieren

my- Component.ts :

import {Component} from &#39;@angular/core&#39;; 
@Component({ 
 selector: &#39;my-component&#39;, 
 templateUrl: &#39;build/components/my-component/my-component.html&#39; 
}) 
export class MyComponent { 
 text: string = ""; 
 constructor() { 
 this.text = &#39;Hello World&#39;; 
 } 
}
Nach dem Login kopieren

3. Direktive erstellen: ionic g Directive [DirectiveName]

Direktive, unsere Anwendung kann das Modifikatorattribut für jedes Element verwenden.

ionic g directive myDirective 
# Results: 
√ Create app/components/my-directive/my-directive.ts
Nach dem Login kopieren

my-directive.ts:

import {Directive} from &#39;@angular/core&#39;; 
@Directive({ 
 selector: &#39;[my-directive]&#39; // Attribute selector 
}) 
export class MyDirective { 
 constructor() { 
 console.log(&#39;Hello World&#39;); 
 } 
}
Nach dem Login kopieren

4. Erstellen Sie einen Dienstanbieter: ionic g Provider [ProviderName]

Erstellen Sie jetzt einen neuen Dienst ( Provider) , der Anbieter ist für die Handhabung von Datenverbindungen zu REST-APIs, lokalem Speicher, SQLite usw. verantwortlich.

Um es zu erstellen, gehen wir zu unserem Terminal und führen den folgenden Befehl aus:

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

Der Servicecode lautet wie folgt:

user-service.ts:

import {Injectable} from &#39;@angular/core&#39;; 
import {Http} from &#39;@angular/http&#39;; 
import &#39;rxjs/add/operator/map&#39;; 
@Injectable() 
export class UserService { 
 data: any = null; 
 constructor(public http: Http) { } 
 load() { if (this.data) { 
 } 
 return new Promise(resolve => { 
 this.http.get(&#39;path/to/data.json&#39;)
  .map(res => res.json())
  .subscribe(data => { 
  this.data = data; 
  resolve(this.data); 
  }); 
 }); 
 } 
}
Nach dem Login kopieren

5. Erstellen Sie eine Pipeline-Pipe: ionic g pipe [PipeName]

Variation dieser Pipe, wir können unsere Vorlage für beliebige Daten verwenden, z. B. für die Anzeige von Text in Großbuchstaben , Anzeige von Währungswerten, Datumsformat usw.

ionic g pipe myPipe 
# Results: 
√ Create app/pipes/myPipe.ts
Nach dem Login kopieren

Der Code unserer Pipeline lautet wie folgt

myPipe.ts:

import {Injectable, Pipe} from &#39;@angular/core&#39;; 
@Pipe({ 
 name: &#39;my-pipe&#39; 
}) 
@Injectable() 
export class MyPipe { 
 transform(value: string, args: any[]) { 
 value = value + &#39;&#39;; // make sure it&#39;s a string 
 return value.toLowerCase(); 
 } 
}
Nach dem Login kopieren

Abschließend lautet die von uns generierte Anwendungsstruktur wie folgt:

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Angular-Beispiel für die Verwendung des Operationsereignisbefehls ng-click zum Übergeben mehrerer Parameter

JavaScript-Code zum Hochladen von TXT Vorschaufunktion für Dateien

AngularJS-Zusammenfassung von Beispielen für Kommunikationsmethoden zwischen Controllern

Das obige ist der detaillierte Inhalt vonWas sind die Schritte zur Verwendung automatischer Generatoren in ionic2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage