ホームページ > 記事 > ウェブフロントエンド > Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介
Angular でコンポーネントを構築するにはどうすればよいですか?この記事では、Angular でプロジェクトを作成する方法と、Angular でコンポーネントを作成する 3 つの方法を紹介します。
名前の変更。Angular2 以降は正式に Angular という名前になり、2.0 より前のバージョンは AngualrJS と呼ばれます。 [関連チュートリアル推奨: "angular チュートリアル"]
1.x は、AngularJS の js ファイルを Web ページに導入して使用します。2.0 以降は、両者の違いは Java と JavaScript に似ています。
npm install -g @angular/cli2. プロジェクトを作成します
ng new angular-tour-of-heroes注: ノードのバージョンは 12 以降である必要があります。そうでない場合は、次のプロンプトが表示されます。「'ng' は内部コマンドでも外部コマンドでも、操作可能でもありません」プログラムまたはバッチ ファイル。”3. プロジェクトを実行します
cd angular-tour-of-heroes ng serve --open#3. コンポーネントを作成する最初の方法:
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: './app.component.html',//组件模板 styles: ['h1 { color:red}'] // styleUrls: ['./app.component.scss']//组件的样式文件 }) export class AppComponent {//组件名称 }
を追加します。 3. コンポーネントを app.module.ts に導入し、宣言します。コンポーネント
4. コンポーネントを作成する 2 番目の方法:
入力コマンド: ng generate component hello-world
##2. コンポーネントの下を右クリックすると、次の図が表示されます
#3. 「ジェネレーター コンポーネント」をクリックし、コンポーネント名を入力して Enter キーを押します
##4. コンポーネントの生成
プログラミング関連の知識については、プログラミング入門をご覧ください。 !
以上がAngular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。