Comment Angular CLI implémente un projet Angular

Cette fois, je vais vous montrer comment Angular CLI implémente un projet Angular et quelles sont les précautions à prendre pour la façon dont Angular CLI implémente un projet Angular. Ce qui suit est un cas pratique, jetons un coup d'œil.

Angular CLI est un outil d'interface de ligne de commande qui peut créer des projets, ajouter des fichiers et effectuer de nombreuses tâches de développement, telles que les tests, l'empaquetage et la publication. Le démarrage rapide ici est basé sur cette commande.

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.

3 : Composant personnalisé

Un composant très simple a été défini ci-dessus, mais avant de l'utiliser, vous devez également être défini dans le module. À ce stade, il est enregistré 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. L'exemple ci-dessus est très simple. à utiliser. C'est simple, il suffit de personnaliser une étiquette my-comp, qui est exactement la même que la normale p.

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'//Sélecteur de balises personnalisées

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

3.selector : '[attribut]'//Sélecteur d'attribut

4.selector : '[attribut=valeur]' // 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. Utilisons le constructeur pour le démontrer ici :

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

Vous souvenez-vous encore du 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 :

......
import { RouterModule } from '@angular/router';
@NgModule({
  declarations: [MyComponent,My2Component],  
  imports: [  
    RouterModule.forRoot([    
      {path: 'my',component: MyComponent},      
      {path: 'my2',component: My2Component}      
    ])
  ]
  ......
})
......

<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做出弹窗功能（附代码）

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!