使用 Visual Studio 2015 的 TypeScript Angular2
4.00/5 (17投票s)
使用 TypeScript 和 VS2015 的 Angular2 示例应用程序。
引言
最近 Angular 团队发布了 Angular 2 beta (2.0.0-beta.0) 版本。 与之前的 alpha 版本相比，这次发布他们再次进行了许多更改，但好消息是，现在他们有信心大多数开发人员可以使用 Angular 2 成功构建大型应用程序。
背景
我们可以找到更多文章、录音来研究 Angular2 和 TypeScript。 然而，由于我们需要将 Angular2 与 VS2015 一起使用，在这种情况下，事情会有些不同。 所以我们在这里将讨论如何在 Visual Studio 中设置 Angular 2.0，并编写一个非常基本的示例应用程序。
源代码
https://www.dropbox.com/s/2tg4rte0vmjnmnz/Angular2Demo.zip?dl=0
使用代码
对于实现，我们只需要遵循以下步骤。
步骤 1 – 创建一个 VS (Visual Studio) ASP.NET Web 应用程序
打开 Visual Studio 2015 并按照以下说明创建一个空的 ASP.NET Web 应用程序。
文件 --> 新建 --> 项目 --> Web --> 选择 ASP.NET Web 应用程序模板。 --> 确定 --> 选择 ASP.NET 5 Preview 模板（空）
现在，解决方案资源管理器看起来像这样。
现在打开 project.json 文件并在 dependencies 里面添加下面的代码
"dependencies": {
"Microsoft.AspNet.Server.IIS": "1.0.0-beta6",
"Microsoft.AspNet.Server.WebListener": "1.0.0-beta6",
"Microsoft.AspNet.StaticFiles": "1.0.0-beta6"
},
现在打开 startup.cs 文件并替换
public void Configure(IApplicationBuilder app)
{
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
用以下代码
public void Configure(IApplicationBuilder app)
{
app.UseDefaultFiles();
app.UseStaticFiles();
}
现在右键 wwwroot 并添加新项目 à 客户端 à 选择 html 页面并创建 index.html 页面。
打开 index.html 页面并写下 'Hello'，然后运行你的基本 .net 应用程序。
步骤 2 – 添加 NPM 配置文件
作为 .Net 开发人员，你可能会认为，为什么我们不使用 NuGet 包？
答案在这里，NuGet 对服务器端库来说很棒，但当我们需要客户端 css 和 js 库时，NPM 比 Nuget 更丰富。 NPM 将为我们提供客户端运行时资产，如 jQuery、Bootstrap 和 AngularJS。
打开应用程序添加新项目窗口，然后按照以下说明选择 NPM 配置文件，并保留默认名称“package.json”。
现在右键单击应用程序名称的客户端 --> 按名称“package.json”添加 NPM 配置文件。
现在打开 pakage.json 文件并用以下代码替换现有代码
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.1",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.2",
"typescript": "^1.7.5"
}
}
步骤 3 – 添加 TypeScript 配置文件
TypeScript 是 JavaScript 的一个类型化超集，它编译成纯 JavaScript，它提供类、模块和接口来帮助您构建强大的组件。 它也有泛型和 lambda 表达式。
使用 TypeScript 的主要原因之一是，它实际上来自 Microsoft，这意味着 Angular 2 在 TypeScript 和 .Net 方面具有更多优势。
但你仍然可以在 Angular2 中使用传统的 js，但我更喜欢使用 TypeScript 和 Angular2。
现在右键单击应用程序名称 à 客户端 --> 按名称“tsconfig.json”添加 TypeScript JSON 配置文件。
现在打开“tsconfig.json”文件并用以下代码替换现有代码。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "wwwroot/app/"
},
"exclude": [
"node_modules"
]
}
注意： 你必须记住的一件重要的事情是，通过定义以下指令，我们指定了 js 文件路径。 在我们的例子中，这是必需的，因为只有在 wwwroot 文件夹中的文件才包含在发布的代码中。
"outDir": "wwwroot/app/" // 此路径定义 js 文件路径
步骤 4 – 添加 TypeScript 文件
现在右键单击应用程序名称，并按名称“scripts”添加新文件夹。
然后右键单击 scripts 文件夹 à 客户端 --> 按名称“app.component.ts”添加 TypeScript 文件。
打开 app.component.ts 文件并粘贴以下代码
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>Angular 2 Sample Application</h1>'
})
export class AppComponent { }
注意： 上面的“export”语句通知 TypeScript，这是一个包含公共类 AppComponent 的模块，并且应用程序中的其他模块可以访问此类。
现在右键单击 scripts 文件夹 à 客户端 --> 按名称“boot.ts”添加 TypeScript 文件。
打开 boot.ts 文件并添加以下代码
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
注意： 上面的 "import" 声明告知 TypeScript，通过使用此代码，特定组件/模块可以从确定的路径导入。
步骤 5 – 包含参考文件
打开 index.html 文件并粘贴以下代码
<html>
<head>
<title>Angular 2 Application</title>
<!-- 1. Load libraries -->
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'js'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
我们刚刚完成了第一个使用 TypeScript 和 VS2015 的 Angular2 示例应用程序 :)
结论
在本文中，我向你展示了 Visual Studio 和 TypeScript 将如何帮助你开发 Angular 2 应用程序。
在这里我只涵盖了基本和实用的概念，但如果你想阅读 Angular 2 理论，那么社区中有很多 Angular 2 理论资源可用。