Dieses Mal werde ich Ihnen die Schritte zum Erstellen eines Angular-Projekts mit Angular CLI ausführlich erläutern. Was sind die Vorsichtsmaßnahmen zum Erstellen eines Angular-Projekts mit Angular CLI? Das Folgende ist ein praktischer Fall.
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
Nach dem Login kopieren
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 Komponente
import { 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" }
];
}Nach dem Login kopieren
import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
MyComponent
]
})
......Nach dem Login kopieren
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" }
];
}
}Nach dem Login kopieren
import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
providers: [MyServ]
})Nach dem Login kopieren
Konstruktor
, um zu demonstrieren:
import { MyServ } from './my.service';
......
export class MyComponent {
dataList: any[];
constructor(private demoService: MyServ) {
this.dataList = this.demoService.getData();
}
}Nach dem Login kopieren
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 Der Zweck dieses Artikels besteht darin, schnell loszulegen. Zur Vereinfachung der Demonstration haben wir standardmäßig zwei Komponenten definiert: MyComponent und My2Component. Zunächst müssen Sie sicherstellen, dass im Head-Tag der index.html-Seite oder dem dynamisch generierten Skript definiert ist dieses Element.
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}
])
]
......
})
......Nach dem Login kopieren
Es ist sehr einfach zu verwenden:
<a routerLink="/my">toMycomp</a>
<a routerLink="/my2">toMy2comp</a>
<router-outlet></router-outlet>
Nach dem Login kopieren
点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。
六：HTTP
由于@angular/http库中的HttpModule保存着http相关的服务，需要先引入进来（这里是在src/app/app.module.ts中引入）：
import { HttpModule } from '@angular/http';
@NgModule({
imports: [HttpModule]
})
......Nach dem Login kopieren
现在，http就是一个服务，下面简单演示一种用法：
......
import { Http } from '@angular/http';
......
constructor(private http: Http) {
http.get('assets/XXX.json').forEach(function (data) {
console.log(data['_body']);
});
}
......Nach dem Login kopieren
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Angular+Font-Awesome步骤详解
源生js实现哈夫曼编码步骤详解
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Erstellen eines Angular-Projekts mit Angular CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
