在Eclipse项目中创建Angular 2项目
，可以按照以下步骤进行：
- 确保已经安装了Eclipse IDE，并且已经配置好Java开发环境。
- 打开Eclipse，点击菜单栏的"File"，选择"New"，然后选择"Project"。
- 在弹出的对话框中，选择"JavaScript"文件夹下的"JavaScript Project"，点击"Next"。
- 在项目名称的输入框中，输入项目的名称，例如"Angular2Project"，然后点击"Finish"。
- 在Eclipse的"Project Explorer"视图中，右键点击刚刚创建的项目，选择"New"，然后选择"Folder"。
- 在弹出的对话框中，输入文件夹的名称为"src"，然后点击"Finish"。
- 右键点击刚刚创建的"src"文件夹，选择"New"，然后选择"File"。
- 在弹出的对话框中，输入文件的名称为"index.html"，然后点击"Finish"。
- 在"index.html"文件中，输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</body>
</html>- 右键点击刚刚创建的"src"文件夹，选择"New"，然后选择"Folder"。
- 在弹出的对话框中，输入文件夹的名称为"app"，然后点击"Finish"。
- 右键点击刚刚创建的"app"文件夹，选择"New"，然后选择"File"。
- 在弹出的对话框中，输入文件的名称为"app.component.ts"，然后点击"Finish"。
- 在"app.component.ts"文件中，输入以下代码：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello, Angular 2!</h1>'
})
export class AppComponent { }- 右键点击刚刚创建的"app"文件夹，选择"New"，然后选择"File"。
- 在弹出的对话框中，输入文件的名称为"main.ts"，然后点击"Finish"。
- 在"main.ts"文件中，输入以下代码：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);- 右键点击刚刚创建的"app"文件夹，选择"New"，然后选择"File"。
- 在弹出的对话框中，输入文件的名称为"app.module.ts"，然后点击"Finish"。
- 在"app.module.ts"文件中，输入以下代码：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }至此，你已经成功在Eclipse项目中创建了一个简单的Angular 2项目。你可以通过点击Eclipse的"Run"按钮来运行该项目，并在浏览器中查看效果。请注意，以上代码中使用的是Angular 2的CDN链接，你也可以根据需要使用其他方式引入Angular 2的库文件。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）
相关·内容
1回答
与webpack一起使用绝对路径的角度2导入模块
angularjs、angular、webpack-2
我正在尝试使用absolute path在angular 2中实现webpack 2。
我看了一下这个 ，它展示了如何使用绝对路径.
我的文件夹结构如下：
|-resources
|-assets
|-Typescript
|-main.ts
|-App
|-app.module.ts
|-Modules
|-Core
|-Assets
|-Typescript
|-core.module.ts
|-Cart
|-Assets
浏览 5提问于2016-11-21得票数 1
回答已采纳
1回答
角2.0路由- TS 2305 .没有导出成员“ModulewithProviders”
javascript、angularjs
我正在学习关于角js官方的Range2.0教程，并在路由节选结束时卡住了。该代码上一次工作，但前几天，当我再次点击'npm ‘在node.js cmd，“错误: TS 2305 .没有导出成员'ModulewithProviders'”弹出，尽管整个文件没有被触及。
下面是同一个应用程序文件夹中的代码：
main.ts:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module
浏览 3提问于2016-08-30得票数 3
4回答
角2象形文字未显示
angular、angular-components
尝试在主页上呈现一个星型图标，但是它没有显示出来(这是页面上唯一应该显示的东西)。很新所以我还在学习。请原谅这个问题的绝对愚蠢。
因此，我创建了名为AppComponent的以下组件：
import {Component} from '@angular/core';
import {Input} from '@angular/core';
@Component({
selector: 'my-app',
template: `<i class="glyphicon"
[class.glyphic
浏览 7提问于2017-02-05得票数 2
回答已采纳
1回答
寻找通过razor @Html.Raw(Json.Encode(模型))将json数据从asp.net MVC4.5传递到angular 2组件的解决方案
json、asp.net-mvc、angular、typescript、asp.net-4.5
我正在尝试使用Angular 2、TypeScript和ASP.NET MVC4.5在页面上显示数据行。我正在尝试将JSON传递到Angular 2组件中，但是没有成功，浏览器也没有显示任何错误。
有谁知道如何从.NET控制器返回JSON数据，使用(@Html.Raw(Json.Encode(Model)嵌入到视图中，然后传递到Angular 2组件/模板中进行显示？
这是我到目前为止已经尝试过的(从Plunkr上的各种示例和AngularJS站点上的示例构建的)。我会注意到，我有一个基本的Angular 2示例在相同的解决方案中工作，所以我相信框架和工具设置正确。只是在应用上有点困难。在我最
浏览 2提问于2017-03-29得票数 2
1回答
为什么这个AngularJS 2的子组件@Component不能被替代？
angular、typescript
更新:这似乎是我构建和服务项目的方式(gulp，browserify，tsify，uglify)的问题，而不是代码问题。如果我弄清楚了，我会进一步更新的。
谢谢你的帮助。
我正在开发一个AngularJS 2应用程序，但我无法获得要替换的子组件。主组件"my-app“可以工作，但"test-view”子组件不会被替换。我没有看到TypeScript编译或浏览器控制台日志中列出的任何错误。
main.ts：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
imp
浏览 0提问于2016-08-30得票数 0
1回答
在Visual 2015更新3中使用类型记录学习角
angular、visual-studio-2015
我对角质很陌生。我正在尝试使用visual 2015创建一个角度应用程序。我已经安装了在VS2015中工作所需的所有需求和配置，就像提到的一样。
我已经学会了角度方面的基本知识。现在，我需要继续与棱角样例项目深入学习。
在我的第一个示例项目中，我有三个.ts(转录本)文件，
Main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './boot';
const platform = platformB
浏览 0提问于2017-05-09得票数 0
回答已采纳
1回答
不使用ASP.net核心MVC的角2路由
asp.net-mvc、angular、angular2-routing
我在一个ASP.NET核心网络应用程序中工作，使用了Range2和VS 2015作为IDE。这对我来说是全新的，所以我一直在遵循每一个教程来完成这个页面的工作。当我最终把所有的东西组合在一起时，我面临一个路由问题:页面停留在加载中.标记，永远不要在ModuleViewComponent中显示内容。读了很多堆叠溢出的问题，但我无法解决。
我的main.ts文件如下所示：
// main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { A
浏览 3提问于2017-06-02得票数 0
2回答
如何改变角度2目录路由？
angular、routes、subdirectory
我已经开始使用来自官方文档的Quickstart proyect，但是我不喜欢“app”文件夹中的所有东西都混合在一起，所以我在里面做了一些文件夹并改变了路线，但是我在控制台中得到了这个错误
404 (未找到)
这是proyect的结构：
以下是我在路线上所作的改变：
main/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from '../module/app.module';
cons
浏览 1提问于2016-09-21得票数 1
回答已采纳
2回答
重新安装NgModule后找不到'AppModule‘的node_modules元数据
javascript、angular、typescript、webpack、angular5
我在一些节点依赖项上遇到了一些问题，所以我删除了整个node_modules文件夹，之后运行ng serve将导致上述错误
这是我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NavComponent } from './shared/na
浏览 5提问于2018-01-21得票数 0
2回答
角2不从AppComponent移动到起始页。
javascript、angular、web
我正在努力学习角2和玩它现在。但我不知道为什么它不从AppComponent开始页面。据我所知，这必须移动到测试页面，并显示“测试”文本。但是当我运行它时，它只显示"Hello“，即app.component文本。如果输入/test url，就会出现404错误。这是因为测试组件没有成功加载吗？
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
浏览 2提问于2017-12-01得票数 0
回答已采纳
1回答
Angular2重定向到根文件夹
apache、angular、typescript、server、localhost
我是新的角2，并试图创建我的第一个应用程序。我遵循教程来开发第一个应用程序。我按照建议创建了应用程序，我的主要文件是：
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our
浏览 0提问于2016-11-25得票数 0
1回答
错误:没有为“NgModule”找到AppModule元数据
angular、typescript
我有一个问题角2应用程序，我正在建设。我一直在从不同的位置练习我的复制/粘贴技巧，并且消除了所有的构建错误，但是当我在浏览器中启动它时，浏览器中有一个错误。我看过，但它并没有解决我的问题。
我的AppModule看起来是这样的：
import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'
浏览 3提问于2016-10-25得票数 6
回答已采纳
2回答
在浏览器中使用没有Reflect.js和zone.js的角2
javascript、angular、typescript、reflect-metadata、zone.js
我试图在一个现有的类型记录项目中使用bundle，在这个项目中，我使用了browserify来捆绑实际的应用程序。
现在，我刚刚从上重建了这个应用程序，并设法让它全部运行起来：
angular/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { na
浏览 2提问于2016-12-16得票数 0
回答已采纳
1回答
角4中的自举多根分量
javascript、angular
我们有一个JQuery应用程序，在该应用程序中，我们需要在角4中实现一些模块。为此，我们将手动引导一个角应用程序。但是现在情况是，我们已经创建了多个角分量，现在它们都是在引导AppComponent时加载的，这使得应用程序加载速度缓慢。
因此，我希望引导多个根组件(即AppComponent、App1Component)，以便在此基础上使用相应的子组件。
因此，下面是我的实施，这是无效的。
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ap
浏览 0提问于2018-10-11得票数 0
1回答
为什么app.modules.ts中导出的是Angular空类？
angular、typescript
我是Angular的新手，我正在使用Angular 4，我通过ng new命令使用Angular CLI制作了一个应用程序。
在main.ts中，我们有
...
import {AppModule} from './app/app.module';
.
.
platformBrowserDynamic().bootstrapModule(AppModule);
AppModule是在app/app.module中定义的(如您所见)，这是我们在app.module.ts中的定义
import { BrowserModule } from '@angular/plat
浏览 0提问于2017-06-02得票数 7
1回答
不能绑定到“formGroup”
angular
不能绑定到“formGroup”，因为它不是“form”的已知属性。
为什么我会收到这条错误消息？
有关实际示例，请参阅我的。
文件app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from '
浏览 2提问于2016-11-24得票数 1
回答已采纳
3回答
角不能读取未定义的属性“版本”
javascript、angular、frontend
我很难安装angular2并在本地安装它，使用Babel和Webpack重新实现一个简单的Hello world应用程序。
我目前有一个运行时错误：
如果你好奇的话，index.html:9 Uncaught TypeError: Cannot read property 'Version' of undefined。
这是一张性感的图片，说明了这种情况。
我试着找出这个错误发生在哪里，结果发现它是有角度的(如果我错了，请纠正我)。
准确地说这条线，var VERSION=new _angular_core.Version(\"2.4.8\") ...。
浏览 1提问于2017-02-21得票数 0
回答已采纳
3回答
不能绑定到“ng模型”，因为它不是“输入”的已知属性
angular、angular2-forms
开始学习角2，因为这个错误尝试了堆栈溢出中的几乎所有链接，但是请帮助我理解为什么即使在导入FormsModule之后仍然会产生错误。
这是我的customer.ts文件
export class Customer {
public CustomerName: string = "asdsad";
public Code: string = "asdsa";
public Amount: string = "asdasd";
}
app.component.ts
import { Component } from '@angu
浏览 3提问于2017-03-29得票数 0
回答已采纳
1回答
如何将可重用的角2组件捆绑到多个应用程序中？
angular、gulp、systemjs
我想要创建一个可重用的组件，可以绑定到一个js文件中，并与不同的角2应用程序共享。然而，我一直得到Error: (SystemJS) Unexpected value 'undefined' declared by the module 'AppModule'
我用gulp来制作我的包裹。输出如下所示：
build/pkg/basic.js (this is my reusable package)
build/app/main.js (this is one test app trying to use the package)
build/app/app.m
浏览 6提问于2016-11-26得票数 4
回答已采纳
0回答
visual studio无法识别typescript包
typescript、sharepoint-addin
我创建了一个sharepointaddin应用程序，并添加了3个新的ts项(app.component，app.module，main)，我像常规一样实现了这些类型批注文件，但当我运行时，它会抛出这些异常；
这里是ts文件的内容；
app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
浏览 11提问于2017-01-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
