开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular 2教程“英雄之旅”，很多文件在项目浏览器中编译后Eclipse

Angular 2是一种流行的前端开发框架，它是Angular框架的第二个版本。它提供了一种结构化的方法来构建Web应用程序，使开发人员能够更轻松地创建可维护和可扩展的应用程序。

在Angular 2教程“英雄之旅”中，提到了许多文件在项目浏览器中编译后Eclipse。这意味着该教程使用了Eclipse作为开发环境，并且在项目构建过程中使用了一些编译工具。

Eclipse是一个流行的集成开发环境（IDE），它提供了丰富的功能和工具，用于开发各种类型的应用程序。对于Angular 2项目，Eclipse可以用作开发和调试工具。

在项目浏览器中编译后，意味着项目中的文件经过编译后生成了可执行的代码。在Angular 2中，开发人员编写的TypeScript代码会被编译成JavaScript代码，以便在浏览器中运行。

使用Eclipse作为开发环境和编译工具的优势包括：

丰富的功能和工具：Eclipse提供了许多功能和工具，如代码编辑器、调试器、版本控制集成等，使开发人员能够更高效地开发和调试应用程序。
TypeScript支持：Eclipse具有对TypeScript的良好支持，包括语法高亮、代码提示、错误检查等功能，使开发人员能够更轻松地编写和维护Angular 2应用程序。
生态系统支持：Eclipse拥有庞大的插件生态系统，开发人员可以根据自己的需求选择适合的插件来增强开发环境的功能。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/tencentdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart4.0 指南原

教程一步一步，沉浸式学习Angular的方法，在应用程序上下文中介绍Angular的主要功能与特点。高级 Angular特征和开发实践的深入分析。 API 每个Angular库的详细细节。...获取依赖关系在WebStorm中：打开新项目。在项目视图中，双击pubspec.yaml。...Note:若获取依赖不成功： 1.检查浏览器能否访问pub.dartlang.org. 2.操作系统当前用户对文件的操作权限不足 windows 当前用户对C:\Users...例如：英雄之角。打开pubspec.yaml，并更新描述以适合您的项目。例如：描述：英雄之旅。可选项。...2.参加英雄之旅教程。英雄之旅让您逐步从安装到全功能的示例，演示了专业应用程序的基本特征：合理的项目结构，数据绑定，主/细节，服务，依赖注入，导航和远程数据访问。 3.

2.7K2 0

AngularDart4.0 英雄之旅-教程-06服务顶

随着“英雄之旅”应用的发展，您将添加更多需要访问英雄数据的组件。不是一遍又一遍复制和粘贴相同的代码，而是创建一个可重用的数据服务，并将其注入到需要它的组件中。...你开始的地方在继续英雄之旅之前，请确认您具有以下结构。如果没有，请返回前面的页面。 ? 如果该应用程序尚未运行，请启动该应用程序。在进行更改时，请通过重新加载浏览器窗口来保持运行。...这告诉Angular编译器，HeroService将成为注入的候选者（更多关于这个）。获取英雄数据 HeroService可以从任何地方（Web服务，本地存储或模拟数据源）获取英雄数据。...在“Asynchronous Programming: Futures”的Dart语言教程中阅读更多有关Futures的信息。 ...前方的路英雄之旅已经变得更加可重复使用共享组件和服务。下一个目标是创建一个仪表板，添加在视图之间路由的菜单链接，以及在模板中格式化数据。

2.9K1 0

AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页：https://gitee.com/scooplolwiki/toh-0 此教程讲解Angular的文件架构，（查看源代码）查看应用程序。...创建应用开始，创建名为angular_tour_of_heroes的项目，使用WebStorm或者命令行和GitHub项目：angular-examples/quickstart ，更多介绍查看安装开发页中的创建启动项目...，您可以从测试页面中了解如何测试“英雄之旅”应用程序。...web/main.dart 驱动应用程序在浏览器中运行。...注意：dart_to_js_script_rewriter编译器（如果存在）必须在编译器列表中的angular之后。如果顺序错误，angular模板将不起作用。

1.8K2 0

AngularDart4.0 英雄之旅-教程-04明细顶

当您进行更改时，请通过重新加载浏览器窗口来保持运行。应用程序重构在添加新功能之前，您可以从应用程序重构中受益。应用模板文件您将对应用程序组件的模板进行多次更新。...刷新浏览器，该应用程序不再失败，名称列表再次显示在浏览器中。当没有选定的英雄时，ngIf指令从DOM中移除英雄详情HTML。没有英雄细节元素或绑定担心。...回顾应用程序结构您的项目应该有以下文件： ? 教程组件测试本教程不包括测试，但是如果您查看示例代码，则会为本教程添加的每个新功能进行组件测试。详细信息请参阅组件测试页面。...你走过的路以下是您在此页面中所取得的成果：英雄之旅（Tour of Heroes）应用程序显示可选英雄列表。您将应用程序模板移到了自己的文件中。...您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。你的应用应该看起来像这个实例（查看源代码）。前方的路你已经扩大了英雄之旅的应用程序，但它还远远没有完成。

3K3 0

AngularDart4.0 英雄之旅-教程-01介绍

码云项目页：https://gitee.com/scooplolwiki/toh-6 本教程的宏伟计划是构建一个应用程序，帮助人力资源管理其稳定的英雄。...英雄之旅应用程序涵盖了Angular的核心基础。您将构建一个具有许多功能的基本应用程序，您可以在完整的数据驱动应用程序中找到许多功能：获取和显示英雄列表，编辑所选英雄的细节，以及浏览不同视图英雄数据。...你会学到Angular的核心来开始，并获得信心，Angular可以做任何你需要做的事情。您将在介绍性层面介绍很多方面，您会发现许多链接到更深入的页面。...完成本教程之后，该应用程序将看起来像这个实例（查看源代码）。本教程提供了一个可视化的想法，以仪表盘和众多英勇的英雄开始。 ?...接下来您将一步一步地构建“英雄之旅”应用程序。每一步都有一个要求，你可能会遇到许多应用程序。一切都是有根据的，一路上，您将会熟悉Angular的许多核心基础知识。

1.3K2 0

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器，页面将显示标题和英雄名双大括号是Angular插值绑定语法。这些插值绑定将组件的标题和英雄属性值作为字符串显示在HTML标题标签内。...在app_component.dart文件的顶部附近添加这些属性，就在import语句的下面（如果有的话）。...', 刷新浏览器，页面将显示英雄名组合HTML和多行模板字符串要显示所有英雄的属性，请为英雄的id属性添加一个，并为英雄的名称添加另一个。..., 编辑英雄名用户应该可以在文本框中编辑英雄名字。...刷新浏览器，应用程序应该会再次工作。您可以编辑英雄的名字，并看到立即在文本框上方的中反映的更改。

3.2K1 0

Angular 应用的外壳

继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。...每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。在本教程中，你将创建一个新的工作区。...希望创建一个新工作区并且初始一个应用项目，你需要：确保你现在没有位于 Angular 工作区的文件夹中。...一个最初的骨架应用项目，同样叫做 angular-tour-of-heroes（位于 src 子目录下）。一个端到端测试项目（位于 e2e 子目录下）。相关的配置文件。...font-family: Cambria, Georgia;}/* everywhere else */* { font-family: Arial, Helvetica, sans-serif;} 查看最终代码本教程的源文件以及英雄指南的完整全局样式可以在

1K3 0

Angular 应用的外壳原

继续下一步来创建《英雄指南》的工作区并且将这个应用初始化。创建一个新工作区并且初始化应用 Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。...每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。在本教程中，你将创建一个新的工作区。...希望创建一个新工作区并且初始一个应用项目，你需要：确保你现在没有位于 Angular 工作区的文件夹中。...一个最初的骨架应用项目，同样叫做 angular-tour-of-heroes（位于 src 子目录下）。一个端到端测试项目（位于 e2e 子目录下）。相关的配置文件。...Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; } 查看最终代码本教程的源文件以及英雄指南的完整全局样式可以在

9421 0

augular 英雄之旅

1.利用cli创建项目 ng new angular-tour-of-heroes 2.启用应用 cd ..../angular-tour-of-heroes ng serve --open //--open 标志会打开浏览器，并访问 http://localhost:4200/，可缩写成-o angular组件...修改数据打开组件的类文件 (app.component.ts)，并把 title 属性的值修改为 'Tour of Heroes' （英雄之旅）。...2.CLI自动在app.Module.ts中自动导入HeroesCompent(就是cli刚刚生成的heroes.component.ts中的类) 添加属性在class中增加属性即可 import...订阅可观测对象，可观测对象成功后及执行订阅事件

1.7K2 0

AngularDart4.0 英雄之旅-教程-05多组件顶

在这个页面中，您将通过将英雄细节划分为单独的，可重用的组件来迈向这个方向的第一步。当你完成后，应用程序应该看起来像这样。...在本教程页面结尾处，您将向AppComponent模板添加一个元素。...点击一个英雄。没有细节。如果您在浏览器开发工具的控制台中查找错误。没有错误。就好像Angular忽略了新的标签。那是因为它忽略了新的标签。...就像您为内建的Angular指令所做的那样，通过将其列在元数据指令列表中，告诉Angular关于英雄详细信息组件。...您将学习在下一个教程页面中创建服务。

1.8K1 0

AngularDart4.0 英雄之旅-教程-07路由顶

当用户在任一视图中点击英雄名称时，导航至所选英雄的详细视图。当用户点击电子邮件中的深层链接时，打开特定英雄的详细视图。完成后，用户将可以像这样浏览应用程序： ?...开始阶段在继续英雄之旅之前，请确认您具有以下结构。 ? 如果该应用程序尚未运行，请启动该应用程序。在进行更改时，请通过重新加载浏览器窗口来保持运行。...在这个仪表板中你指定了四个英雄（第二，第三，第四和第五）。刷新浏览器以查看新仪表板中的四个英雄名称。...从英雄名单到选定的英雄。从“深层链接”网址粘贴到浏览器地址栏中。路由到英雄细节您可以在AppComponent中添加到HeroDetailComponent的路由，其中定义了其他路由。...Dashboard 样式在lib / src文件夹中创建一个dashboard_component.css文件，并在组件元数据的styleUrls列表属性中引用该文件，如下所示： lib / src/

17.5K3 0

AngularDart4.0 英雄之旅-教程-08HTTP 顶

你离开的地方在前一页中，您学会了在仪表板和固定英雄列表之间导航，沿途编辑选定的英雄。这是这个页面的起点。在继续英雄之旅之前，请确认您具有以下结构。 ?...要将删除按钮放置在英雄项目的最右侧，请添加此CSS：lib/src/heroes_component.css (additions) button.delete { float:right; margin-top...添加按名称搜索的功能你要添加一个英雄搜索功能的英雄之旅。当用户在搜索框中输入一个名字时，你会对这个名字过滤的英雄进行重复的HTTP请求。...在仪表板中，在搜索框中输入一些文字。如果你输入的字符匹配任何现有的英雄名字，你会看到这样的东西。 ? 应用程序结构和代码查看此页面的实例（查看源代码）中的示例源代码。确认您具有以下结构： ?...终点直道你在旅程的尽头，你已经完成了很多。您添加了必要的依赖关系，以在应用程序中使用HTTP。您重构了HeroService以从Web API加载英雄。

11K3 0

Angular 显示英雄列表

但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。...打开 HeroesComponent 的模板文件，并做如下修改：在顶部添加然后添加表示无序列表的 HTML 元素（）在中插入一个元素，以显示单个 hero...完成后应该如下显示： heroes.component.html heroes.component.html (heroes template) content_copy My Heroes</...在教程的第一章，你曾在 styles.css 中为整个应用设置了一些基础的样式。但那个样式表并不包含英雄列表所需的样式。...你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。

4K3 0

Angular 显示英雄列表

但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。...打开 HeroesComponent 的模板文件，并做如下修改：在顶部添加然后添加表示无序列表的 HTML 元素（）在中插入一个元素，以显示单个 hero...完成后应该如下显示： heroes.component.html heroes.component.html (heroes template)content_copyMy Heroes</h2...在教程的第一章，你曾在 styles.css 中为整个应用设置了一些基础的样式。但那个样式表并不包含英雄列表所需的样式。...你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。

4.4K7 0

AngularDart4.0 指南- 显示数据顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。在这个页面中，您将创建一个包含英雄列表的组件。您将显示英雄名单的列表，并有条件地在列表下方显示一条消息。...它应该显示标题和英雄的名字： ? 模板内嵌或模板文件？您可以将组件的模板存储在两个地方之一中。...Angular ngFor指令来显示英雄列表中的每个项目。...Angular为列表中的每个项目复制，将hero变量设置为当前迭代中的项目（英雄）。 Angular使用该变量作为双曲花括号内插的上下文。...由于列表中有四个项目，所以应该显示消息。回到app_component.dart并删除或注释掉英雄列表中的一个元素。 浏览器应该自动刷新，消息应该消失。

5.3K1 0

Angular 英雄编辑器

ngOnInit 是一个生命周期钩子（lifecycle hook），Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...创建一个 Hero 类真实的英雄当然不仅仅只有一个名字。在 src/app 文件夹中为 Hero 类创建一个文件，并添加 id 和 name 属性。...显示 hero 对象修改模板中的绑定，以显示英雄的名字，并在详情中显示 id 和 name，就像这样： heroes.component.html (HeroesComponent 的模板) ...Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。...你可以编辑英雄的名字，并且会看到这个改动立刻体现在这个输入框上方的中。声明 HeroesComponent 每个组件都必须声明在（且只能声明在）一个 NgModule 中。

2.5K5 0

Angular 英雄编辑器

ngOnInit 是一个生命周期钩子（lifecycle hook），Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...创建一个 Hero 类真实的英雄当然不仅仅只有一个名字。在 src/app 文件夹中为 Hero 类创建一个文件，并添加 id 和 name 属性。...显示 hero 对象修改模板中的绑定，以显示英雄的名字，并在详情中显示 id 和 name，就像这样： heroes.component.html (HeroesComponent 的模板) ...Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。这里也就是你要添加 FormsModule 的地方。...你可以编辑英雄的名字，并且会看到这个改动立刻体现在这个输入框上方的中。声明 HeroesComponent 每个组件都必须声明在（且只能声明在）一个 NgModule 中。

2.6K7 0

AngularDart 4.0 高级-HTTP 客户端顶

以下演示使用http软件包来说明服务器通信： HTTP客户端演示：英雄之旅。跨源请求：Wikipedia示例。试试主持两个演示的实例（查看源代码）。...AppComponent, [ provide(Client, useFactory: () => new BrowserClient(), deps: []) ]); } HTTP客户端演示：英雄之旅...获取数据在之前的示例中，应用通过返回服务中的模拟英雄来伪造与服务器的交互： import 'dart:async'; import 'package:angular/angular.dart';...码后的JSON不会列出英雄。相反，服务器将JSON结果封装到具有数据属性的对象中。这是传统的Web API行为，受安全问题驱动。不要假设服务器API。...英雄在一个拥有自己data属性的响应对象中。

9.6K1 0

Angular 服务

ngOnInit() { this.getHeroes();} 查看运行效果刷新浏览器，该应用仍运行的一如既往。显示英雄列表，并且当你点击某个英雄的名字时显示出英雄详情视图。...在稍后的 HTTP 教程中，你就会知道 Angular HttpClient 的方法会返回 RxJS 的 Observable。...在 HTTP 教程中，你将会调用 HttpClient.get() 它也同样返回一个 Observable，它也会发出单个值，这个值就是来自 HTTP 响应体中的英雄数组...ng generate component messages CLI 在 src/app/messages 中创建了组件文件，并且把 MessagesComponent 声明在了 AppModule ...当你把最终代码某一页的内容添加到 messages.component.css 中时，这些消息会变得好看一些。刷新浏览器，页面显示出了英雄列表。

3.3K7 0

AngularDart 4.0 高级-路由概述顶

概观 浏览器是一种熟悉的应用程序导航模型：在地址栏中输入一个URL，然后浏览器导航到相应的页面。点击页面上的链接，浏览器导航到新页面。...并且路由器在浏览器的历史记录中记录活动，所以后退和前进按钮也起作用。设置概述添加angular_router 路由器功能位于angular_router库中，该库自带软件包。...在任何使用路由器功能的Dart文件中，导入路由器库： import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令如果您已经熟悉Angular...路由器插座当此应用的浏览器URL成为/#/heroes时，路由器将该URL与名为Heroes的RouteDefinition匹配，并在放置在宿主视图HTML中的RouterOutlet后显示HeroesComponent...但是，它不是教程，它掩盖了文档中其他地方更全面地介绍的Angular应用程序构建的细节。应用程序的最终版本的完整源代码可以从实例中查看并下载（查看源代码）。

6.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭