Detaillierte Erläuterung der Schritte zum Erstellen eines Angular-Projekts mit Angular CLI

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

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=&#39;let row of dataList&#39;>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

Konstruktor

, 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 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}      
    ])
  ]
  ......
})
......

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中文网其它相关文章！

推荐阅读：

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!