Java IDE MyEclipse 使用教程：创建Angular 应用程序

CodeMix 和 Angular IDE中包含出色的 Angular 支持，MyEclipse授权包括对 CodeMix 的访问。

创建项目

第一步是使用 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之一。

MyEclipse

标签：