Angular怎麼建構組件？本篇文章為大家介紹一下Angular創建專案的方法，Angular創建元件的三種方式。
命名變化，Angular2 以後官方命名為Angular, 2.0 先前的版本稱為AngualrJS。 【相關教學推薦：《angular教學》】
1.x 的使用方式是引入AngularJS 的js 檔案到網頁，2.0 之後就完全不同了，兩者的差異類似Java 和JavaScript。
1.安裝全域的Angular CLI 命令列工具
npm install -g @angular/cli
2.建立專案
ng new angular-tour-of-heroes
注意：node 版本需要在12以上，否則會提示：「'ng' 不是內部或外部指令，也不是可執行的程式或批次檔。 ”
3.跑專案
cd angular-tour-of-heroes ng serve --open
#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: './app.component.html',//组件模板
styles: ['h1 { color:red}']
// styleUrls: ['./app.component.scss']//组件的样式文件
})
export class AppComponent {//组件名称
}3.app.module.ts中引入元件，宣告元件
#使用cli建立元件
輸入指令：
ng generate component hello-world
1.在vscode下載Angular Files
2.在components下方右鍵，則出現下圖
3.點選Generater component輸入元件名稱回車
#4.元件產生
更多程式相關知識，請造訪：程式設計入門！ ！
以上是Angular怎麼建構元件？ 3種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
