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

MyEclipse官方正版下載

創建項目

第一步是使用 New Angular Project 向導創建一個新的 Angular 項目。要開始，請選擇File>New>Angular Project。輸入項目的名稱，然后單擊完成以接受默認設置。Angular IDE 使用 angular-cli 設置了一個新項目。

該向導默認為新建 Angular 應用程序，它會創建一個空應用程序。您還有以下選擇：

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

查看 Angular 應用程序的實際應用

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

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

創建一個隨機詞組件

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

創建一個名為 RandomWords 的組件。

創建后，您需要將組件的內容（src/app/random-words/random-words.component.ts）替換為以下源：

從'@angular/core'導入{組件，OnInit，輸入}；

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

  ngOnInit() {
  }
}

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

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

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

更新應用程序以顯示一些單詞

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

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

從'@angular/core'導入{組件}；

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

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

<h1>
  {{標題}}
</h1>

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

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

以上就是創建 Angular 應用程序第一部分的相關內容，想要了解更多MyEclipse使用教程，

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

MyEclipse | 下載試用

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

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