Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

Angular でコンポーネントを構築するにはどうすればよいですか?この記事では、Angular でプロジェクトを作成する方法と、Angular でコンポーネントを作成する 3 つの方法を紹介します。

#1. angular と angularjs の違いは何ですか?

• 名前の変更。Angular2 以降は正式に Angular という名前になり、2.0 より前のバージョンは AngualrJS と呼ばれます。 [関連チュートリアル推奨: "angular チュートリアル"]

• 1.x は、AngularJS の js ファイルを Web ページに導入して使用します。2.0 以降は、両者の違いは Java と JavaScript に似ています。

#2. プロジェクトを作成します

1. グローバル Angular CLI コマンド ライン ツールをインストールします

npm install -g @angular/cli

2. プロジェクトを作成します

ng new angular-tour-of-heroes

注: ノードのバージョンは 12 以降である必要があります。そうでない場合は、次のプロンプトが表示されます。「'ng' は内部コマンドでも外部コマンドでも、操作可能でもありません」プログラムまたはバッチ ファイル。”

3. プロジェクトを実行します

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

#3. コンポーネントを作成する最初の方法:

1.src ファイルの下に新しいファイルを作成し、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 または app.component.ts にコンポーネント タグ

##

// 引入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. コンポーネントを app.module.ts に導入し、宣言します。コンポーネント

4. コンポーネントを作成する 2 番目の方法:

cli を使用してコンポーネントを作成する

入力コマンド:

ng generate component hello-world

##5. コンポーネントを作成する 3 番目の方法:

1. vscode Angular ファイルでダウンロード

##2. コンポーネントの下を右クリックすると、次の図が表示されます

#3. 「ジェネレーター コンポーネント」をクリックし、コンポーネント名を入力して Enter キーを押します

##4. コンポーネントの生成

プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がAngular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。