CodeMix 和 Angular IDE中包含出色的 Angular 支持，MyEclipse授權(quán)包括對 CodeMix 的訪問。 MyEclipse下載可點擊下面獲取官方最新V2022.1版本：

MyEclipse官方正版下載

創(chuàng)建項目

第一步是使用 New Angular Project 向?qū)?chuàng)建一個新的 Angular 項目。要開始，請選擇File>New>Angular Project。輸入項目的名稱，然后單擊完成以接受默認設(shè)置。Angular IDE 使用 angular-cli 設(shè)置了一個新項目。

該向?qū)J為新建 Angular 應(yīng)用程序，它會創(chuàng)建一個空應(yīng)用程序。您還有以下選擇：

• 示例應(yīng)用程序 (QuizzManiac) —如果您想使用示例“QuizzManiac”應(yīng)用程序 引導(dǎo)您的項目，請選擇此選項。
• 無初始應(yīng)用程序（推薦用于庫）——選擇此選項以創(chuàng)建Angular 工作區(qū)或Angular 庫。

查看 Angular 應(yīng)用程序的實際應(yīng)用

創(chuàng)建項目后，該項目將列在“服務(wù)器”視圖中。讓我們啟動 Angular 開發(fā)服務(wù)器。我們可以先在項目中編寫更多代碼，但讓我們深入了解應(yīng)用程序。

要啟動服務(wù)器，請轉(zhuǎn)到 Servers 視圖并展開 Web Applications。選擇項目，然后右鍵單擊并從上下文菜單中選擇啟動服務(wù)器，或單擊啟動按鈕運行服務(wù)器圖標(biāo). 運行“ng serve”的 Terminal+ 視圖中打開一個新選項卡。

創(chuàng)建一個隨機詞組件

要顯示一個隨機單詞，您首先需要創(chuàng)建一個顯示它的組件。要創(chuàng)建組件，請右鍵單擊項目并選擇 New>Component。該組件是在項目的 src/app 目錄中創(chuàng)建的。

創(chuàng)建一個名為 RandomWords 的組件。

創(chuàng)建后，您需要將組件的內(nèi)容（src/app/random-words/random-words.component.ts）替換為以下源：

從'@angular/core'導(dǎo)入{組件，OnInit，輸入}；

@零件（{
  選擇器：'app-random-words',
  templateUrl: './random-words.component.html',
  styleUrls: ['./random-words.component.css']
})
導(dǎo)出類 RandomWordsComponent 實現(xiàn) OnInit {
  @Input() 單詞：Array<string>;
 
  構(gòu)造函數(shù)（）{}

  ngOnInit() {
  }
}

注意： @Input() words: Array;表示組件接受可以通過“words”輸入屬性設(shè)置的字符串?dāng)?shù)組。然后將src/app/random-words/random-words.component.html的內(nèi)容設(shè)置為如下：

<ul>
  <li *ngFor="let word of words">{{word}}</li>
</ul>

這將呈現(xiàn)一個列表，其中包含random-words.component.ts中定義的“words”屬性的內(nèi)容。該ngFor指令用于遍歷項目，在我們的例子中是“words”屬性。使用“word”引用可迭代中的當(dāng)前項。我們{{word}}用來打印出“word”的內(nèi)容。

更新應(yīng)用程序以顯示一些單詞

AppComponent 將負責(zé)將隨機詞（通過 randomWords 屬性）提供給 RandomWordsComponent。現(xiàn)在讓我們只使用“hello”和“world”。

替換或更新src/app/app.component.ts 文件以定義一些隨機詞。稍后您將對其進行更新以使用 Web 服務(wù)來獲取合法的隨機單詞。

從'@angular/core'導(dǎo)入{組件}；

@零件（{
  選擇器：'應(yīng)用程序根'，
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
導(dǎo)出類 AppComponent {
  title = '隨機詞！';
  randomWords = ['你好'，'世界'];
}

現(xiàn)在，讓我們告訴 Angular 渲染新的 RandomWords 組件并將一組單詞傳遞給我們上面定義的那個組件。對src/app/app.component.html進行以下更改 ：

<h1>
  {{標(biāo)題}}
</h1>

<app-random-words [words]="randomWords"></app-random-words>

看看你的瀏覽器！如果一切都正確完成，您現(xiàn)在應(yīng)該會看到自動為您的應(yīng)用程序顯示“hello”和“world”。恭喜，您已經(jīng)集成了您的第一個組件。

以上就是創(chuàng)建 Angular 應(yīng)用程序第一部分的相關(guān)內(nèi)容，想要了解更多MyEclipse使用教程，

MyEclipse V2022.1正式發(fā)布，大家可以下載MyEclipse官方正版試用。

MyEclipse | 下載試用

MyEclipse是功能最全面、性價比最高的企業(yè)級Java IDE之一。

MyEclipseQQ群：742336981   ;   歡迎進群一起討論