Explication détaillée des étapes pour créer un projet Angular avec Angular CLI

Cette fois, je vais vous apporter une explication détaillée des étapes pour créer un projet Angular avec Angular CLI Quelles sont les précautions pour créer un projet Angular avec Angular CLI ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Avant de démarrer le projet, vous devez d'abord installer node et npm, puis exécuter npm install -g @angular/cli pour installer Angular CLI.

1 : Utilisez la ligne de commande pour créer un nouveau projet

ng new newApp --skip-install
cd newApp
cnpm install
ng serve --open

L'exécution de la commande ci-dessus créera automatiquement un nouveau projet Angualr et démarrez le projet.

Parmi eux, --skip-install signifie que le package node n'est pas installé en premier. Nous utiliserons ensuite cnpm install pour l'installer beaucoup plus rapidement.

2 : Structure des répertoires

Jetons maintenant un coup d'œil à ce que la commande ng nous a aidé à générer, à savoir la structure des répertoires du projet , c'est-à-dire Ayons une compréhension générale de ce qu'il fait. Vous n'êtes pas obligé de tout savoir, mais rappelez-vous d'abord les éléments suivants qui me semblent importants :

1.src : où le code de l'application est stocké. ;

2 .src/app : L'endroit principal où votre code est stocké. Cela n'est peut-être pas approprié, mais lorsque vous développez, vous passez la plupart de votre temps à modifier le code ici ; 3.src/assets : images, etc. Là où il est stocké, il sera copié dans le package de version lors de la construction

4.src/main.js : vous ne le modifierez fondamentalement pas, c'est le entrée principale du programme ;

5.src /styles.css : Les styles spécialement utilisés sont écrits aux endroits correspondants. Comme nous le mentionnerons plus tard, les styles publics seront écrits ici

6 ; .karma.conf.js : configuration de test unitaire pour Karma. Il est utilisé lors de l'exécution de ng test.

Trois : Personnalisé Composant défini

Un composant très simple a été défini ci-dessus Mais avant utilisation. il, vous devez encore le définir dans le module. A ce moment, enregistrez-le dans src/app/app.module.ts :

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

Maintenant qu'il est enregistré, vous pouvez l'utiliser, comme ci-dessus L'utilisation de l'exemple est très simple, il s'agit de personnaliser un label my-comp, qui est exactement le même que le p normal.

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

Il convient de noter que pour faciliter la visualisation, j'ai supprimé le code non pertinent dans l'exemple d'enregistrement. Heureusement, la situation réelle inclut l'enregistrement du démarrage, d'autres composants, services, etc. Vous pouvez consulter la commande. line Pour les autres instructions générées automatiquement, nous expliquons ici principalement les choses plus importantes, les mêmes ci-dessous.

Semblable à AngularJS, le sélecteur d'Angular a d'autres fonctionnalités en plus des balises personnalisées ci-dessus :

1.selector : 'element-name'//Personnalisé

Sélecteur de balises

 ; 2.selector : '.class'//Sélecteur de style ;

3.selector : '[attribut]'//

Sélecteur d'attribut

4.selector : '[attribute=value]'//Sélecteur de valeur d'attribut ;

5.selector : ':not(sub_selector)'//Inverser le sélecteur ;

6.selector : 'selector1, selector2'//Sélecteurs multiples.

Quatre : Service personnalisé

Comme pour les composants, définissons d'abord un service.

Ensuite, enregistrons-le. L'enregistrement des services et des composants est un peu différent. Enregistrons-le d'abord sur le composant principal. La valeur par défaut est de l'enregistrer dans arc/app/app.component. Fichier .ts :

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

L'utilisation des services est également très simple. Nous utilisons le

constructeur

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

pour le démontrer ici :

Vous en souvenez-vous encore. le code du composant personnalisé ? Nous y avons démontré l'utilisation du service, et seule la partie modifiée du code est donnée ci-dessus.

import { MyServ } from './my.service';
......
export class MyComponent {
  dataList: any[];  
  constructor(private demoService: MyServ) {
     this.dataList = this.demoService.getData();
    }  
}

Cinq : Utilisation du routage

Nous donnons ici une utilisation simple du routage. Les détails spécifiques sont similaires à ceux ci-dessus et seront discutés. séparément. Pour en discuter, le but de cet article est de démarrer rapidement.

Pour faciliter la démonstration, nous avons défini deux composants par défaut : MyComponent et My2Component.

Tout d'abord, vous devez vous assurer que est défini dans la balise head de la page index.html ou dans le script qui génère dynamiquement cet élément.

Nous enregistrons d'abord l'itinéraire dans src/app/app.module.ts :

L'utilisation est très simple :

<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实现哈夫曼编码步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!