Comment construire des composants en Angular ? 3 méthodes présentées

Comment construire des composants en Angular ? Cet article vous présentera les méthodes Angular pour créer des projets et trois façons de créer des composants dans Angular.

1. Quelle est la différence entre angulaire et angulairejs ?

• Changements de nom, Angular 2 et versions ultérieures seront officiellement nommés Angular, et les versions antérieures à 2.0 s'appellent AngualrJS. [Recommandation de didacticiel connexe : "Tutoriel angulaire"]

• 1.x est utilisé en introduisant des fichiers AngularJS js dans la page Web. Après la version 2.0, la différence entre les deux est similaire à Java et JavaScript. .

2. Créez un projet

1. Installez l'outil global de ligne de commande Angular CLI

npm install -g @angular/cli

2. Créez un projet

ng new angular-tour-of-heroes

Remarque : la version du nœud doit être supérieure à 12, sinon elle affichera : " 'ng' n'est pas reconnu comme une commande interne ou externe, un programme opérationnel ou un fichier batch. "

3. Exécutez le projet

cd angular-tour-of-heroes
ng serve --open

3. 1. Sous le fichier src, créez un nouveau fichier et nommez-le hello-world.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'hello-world组件',
    // templateUrl: './app.component.html',
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

2.app.component.html ou app.component.ts Ajouter une balise de composant

// 引入ng核心包和组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

3. Introduisez le composant dans app.module.ts et déclarez le composant

Quatrièmement, la deuxième façon de créer un composant :

Utilisez cli pour créer un composant

Entrée la commande :

ng generate component hello-world

5. La troisième façon de créer des composants :

1. Téléchargez les fichiers angulaires dans vscode

2. apparaît

3. Cliquez sur Composant générateur Entrez le nom du composant et appuyez sur Entrée

4. Programmation

! !

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!