Heim >Web-Frontend >js-Tutorial >So erstellen Sie ein Angular-Projekt mit Angular CLI
Dieses Mal zeige ich Ihnen, wie Sie Angular CLI zum Erstellen eines Angular-Projekts verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Angular CLI zum Erstellen eines Angular-Projekts gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Bevor Sie das Projekt starten, müssen Sie zuerst Node und NPM installieren und dann npm install -g @angular/cli ausführen, um Angular CLI zu installieren.
1: Verwenden Sie die Befehlszeile, um ein neues Projekt zu erstellen
ng new newApp --skip-install cd newApp cnpm install ng serve --open
Durch Ausführen des obigen Befehls wird automatisch ein neues Angualr-Projekt erstellt und das gestartet Projekt.
Unter anderem bedeutet --skip-install, dass das Knotenpaket nicht zuerst installiert wird. Wir werden es dann mit cnpm install viel schneller installieren.
2: Verzeichnisstruktur
Schauen wir uns nun an, was uns der Befehl ng bei der Generierung geholfen hat, nämlich die Verzeichnisstruktur des Projekts , das heißt: Erstens müssen Sie nicht alles wissen, aber denken Sie zunächst an die folgenden, die ich für wichtig halte:
1.src: wo sich der Anwendungscode befindet gespeichert;
2 .src/app: Der Hauptort, an dem Ihr Code gespeichert wird. Dies ist möglicherweise nicht angemessen, aber wenn Sie entwickeln, verbringen Sie die meiste Zeit damit, den Code hier zu ändern >3.src/assets: Bilder usw. Wo es gespeichert ist, wird es beim Erstellen in das Release-Paket kopiert
4.src/main.js: Sie werden es grundsätzlich nicht ändern der Haupteingang des Programms;
5.src /styles.css: Wie später erwähnt, werden hier öffentliche Stile geschrieben 6.karma.conf.js: Unit-Test-Konfiguration für Karma. Wird beim Ausführen von NG-Tests verwendet.
Drei: Benutzerdefinierte
Definierte Komponenteimport { Component } from '@angular/core';
@Component({
selector: 'my-comp',
template: '<ul><li *ngFor='let row of dataList'>ID:{{row.id}} INFO:{{row.info}}</li></ul>',
styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
})
export class MyComponent {
dataList = [
{ id: 1, info: "Angular" },
{ id: 2, info: "React" },
{ id: 3, info: "Vue" }
];
}
Eine sehr einfache Komponente wurde oben definiert, aber vor der Verwendung, Sie müssen es noch im Modul definieren. Registrieren Sie es jetzt in src/app/app.module.ts: import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
MyComponent
]
})
......
Jetzt können Sie es verwenden Die Methode ist sehr einfach. Passen Sie einfach ein Label namens my-comp an, das genau dem normalen p entspricht.
Es ist zu beachten, dass ich zur Vereinfachung der Anzeige irrelevanten Code im Registrierungsbeispiel entfernt habe. Glücklicherweise umfasst die tatsächliche Situation die Registrierung von Startups, anderen Komponenten, Diensten usw. Sie können sich den Befehl ansehen Zeile Für andere automatisch generierte Anweisungen erklären wir hier hauptsächlich wichtigere Dinge, das Gleiche gilt weiter unten.
Ähnlich wie AngularJS verfügt der Selektor von Angular neben den oben genannten benutzerdefinierten Tags über weitere Funktionen:
1.selector: 'element-name'//Customized
Tag selector;
2.selector: '.class'//Style selector;3.selector: '[attribute]'//
Attribute selector; >4.selector: '[attribute=value]'//Attributwert-Selektor;
5.selector: ':not(sub_selector)'//Selektor invertieren;6.selector: 'selector1, selector2'//Mehrere Selektoren.
Viertens: Benutzerdefinierter Service
Genau wie bei Komponenten definieren wir zunächst einen Service. import { Injectable } from '@angular/core';
export class DataFormat {
id: number;
info: string;
}
@Injectable()
export class MyServ {
getData(): DataFormat[] {
return [
{ id: 1, info: "Angular" },
{ id: 2, info: "React" },
{ id: 3, info: "Vue" }
];
}
}
Als nächstes registrieren wir es etwas anders. Registrieren Sie es zunächst in der Datei arc/app/app.component.ts Datei: Die Verwendung des import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
providers: [MyServ]
})
-Dienstes ist ebenfalls sehr einfach. Hier verwenden wir den
, um zu demonstrieren:
import { MyServ } from './my.service'; ...... export class MyComponent { dataList: any[]; constructor(private demoService: MyServ) { this.dataList = this.demoService.getData(); } }
Erinnern Sie sich noch an den Code der benutzerdefinierten Komponente? ? Wir haben darin die Nutzung des Dienstes demonstriert, und oben ist nur der geänderte Teil des Codes angegeben.
Fünftens: Verwendung von Routing
Hier geben wir eine einfache Verwendung von Routing. Die spezifischen Details ähneln den oben genannten und werden besprochen Um dies separat zu besprechen, besteht der Zweck dieses Artikels darin, schnell loszulegen. Zur Vereinfachung der Demonstration haben wir standardmäßig zwei Komponenten definiert: MyComponent und My2Component. Zunächst müssen Sie sicherstellen, dass
Wir registrieren zunächst die Route in src/app/app.module.ts:
...... import { RouterModule } from '@angular/router'; @NgModule({ declarations: [MyComponent,My2Component], imports: [ RouterModule.forRoot([ {path: 'my',component: MyComponent}, {path: 'my2',component: My2Component} ]) ] ...... }) ......
Es ist sehr einfach zu verwenden:
<a routerLink="/my">toMycomp</a> <a routerLink="/my2">toMy2comp</a> <router-outlet></router-outlet>
点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。
六:HTTP
由于@angular/http库中的HttpModule保存着http相关的服务,需要先引入进来(这里是在src/app/app.module.ts中引入):
import { HttpModule } from '@angular/http'; @NgModule({ imports: [HttpModule] }) ......
现在,http就是一个服务,下面简单演示一种用法:
...... import { Http } from '@angular/http'; ...... constructor(private http: Http) { http.get('assets/XXX.json').forEach(function (data) { console.log(data['_body']); }); } ......
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Angular-Projekt mit Angular CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!