Wie Angular CLI ein Angular-Projekt implementiert

Dieses Mal zeige ich Ihnen, wie Angular CLI ein Angular-Projekt implementiert und welche Vorsichtsmaßnahmen es gibt, wie Angular CLI ein Angular-Projekt implementiert. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Angular CLI ist ein Befehlszeilenschnittstellentool, das Projekte erstellen, Dateien hinzufügen und viele Entwicklungsaufgaben wie Testen, Packen und Veröffentlichen ausführen kann. Der Schnellstart hier basiert auf diesem Befehl.

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.

3: Benutzerdefinierte 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" }
  ];  
}

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
  declarations: [
    MyComponent
  ]  
})
......

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'//Custom tag selector;

2.Selektor: '.class'//Stil-Selektor;

3.Selektor: '[Attribut]'//Attribut-Selektor

4.Selektor: '[Attribut=Wert]' //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" }
    ];
  }  
}

import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
  providers: [MyServ]  
})

-Dienstes ist ebenfalls sehr einfach. Verwenden wir den Konstruktor, um es hier 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 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中文网其它相关文章！

推荐阅读：

移动端怎样做出上拉下滑刷新加载

Vue做出弹窗功能（附代码）

Das obige ist der detaillierte Inhalt vonWie Angular CLI ein Angular-Projekt implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!