AngularJS 2.0 和 Visual Studio 入门
4.04/5 (8投票s)
本文旨在提供关于 AngularJS 2.0 和 Visual Studio 的入门级理解。
项目说明：请通过命令提示符定位到您的项目，例如 [C:\Users\b\Desktop\WP\WP]，然后执行 npm install
引言
在本文中，我将演示如何使用 Microsoft TypeScript 2.0 结合 .NET Framework 和 Visual Studio 2015 来开始使用 Angular 2.0。
背景
Node.js 是一款 开源、 跨平台 的 JavaScript 运行时环境，用于开发各种工具和应用程序。Visual Studio 是微软开发和支持的用于开发各种应用程序的 IDE。在本文中，我将向您展示如何在 IDE Visual Studio 2015 中使用 Node.js。
先决条件
在我们开始之前，您需要确保您的系统满足以下几项要求。
NodeJS：它本质上是服务器端 JavaScript。您可以从 这里 下载适用于您计算机的 NodeJs 安装程序。
NPM：NPM 是一种资源管理器，用于管理多个脚本，这些脚本可能希望为单个项目协同工作，它为它们提供了环境。您可以在 这里 找到 npm。
TypeScript ^2.0：TypeScript 是一种编程语言，被 Angular 2.0 开发团队用作与 Angular 2.0 合作的核心语言。您可以从 这里 下载安装程序。
Visual Studio 2015 Update 3 是使用 Node.js 应用程序配置和设置所需的最低要求。
使用代码
现在，让我们开始构建一个简单的应用程序，并启动您的第一个应用程序。在此应用程序中，我们将通过 11 个简单步骤来启动该应用程序。我已尽力简化了步骤，并提供了尽可能详细的说明。虽然通常如此，但它可能需要在您的系统上进行特定调试，您可以在下方发表评论。
1) 文件 -> 新建 -> 项目 -> [从模板创建空 Web 项目] -> [单击确定并启动项目]
2) 复制项目路径并在命令提示符中打开它，为此，请右键单击解决方案资源管理器，然后选择 [在文件资源管理器中打开文件夹]
例如 cd C:\Users\b\Documents\visual studio 2017\Projects\StatWorkks\WebApplication1 或
cd {您的路径}
3) 运行以下命令以检查到目前为止一切是否正确：
node -v 应为 > v6.x.x
npm -v 应为 > v4.x.x
tsc -v 应为 > v2.x.x
如果您发现任何旧版本，请更新。如果 tsc 显示旧版本，则意味着您可能之前安装过任何版本的 TypeScript，并且可能需要更新系统变量。要执行此操作，请转到 **我的电脑 -> 属性（右键单击）-> 高级系统设置 -> 环境变量 -> 系统变量 -> path（单击编辑）**，然后找到 TypeScript 路径并将其更新为最新版本。
警告：如果您不确定，请小心更改系统变量，在进行任何更改之前请务必了解。
4) 现在，转到命令提示符并运行以下命令 _npm init_。在询问时将其命名为 'angular2'，并通过按 Enter 接受所有默认设置。最终它会在您的项目中添加一个 package.json 文件。通过右键单击将其包含在项目中。将代码更改为以下内容（请记住，我们可以直接通过 GUI 完成此操作，但我之所以这样做是为了让您了解 npm 通常的工作方式）。现在，将此代码复制并粘贴到您刚包含的 package.json 文件中。
{
"name": "angular2",
"version": "1.0.0",
"description": "This is demo app",
"main": "index.ts",
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.2",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"@types/jasmine": "^2.5.36",
"@types/node": "^6.0.46",
"canonical-path": "0.0.2",
"concurrently": "^3.1.0",
"http-server": "^0.9.0",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "~2.0.10"
},
"scripts": {
"test":
"echo \"Error: no test specified\" && exit 1"
},
"author": "ahmad anas",
"license": "MIT"
}
5) 在根目录下添加 typings.json，并在其中添加以下代码（您也可以在同一目录中使用命令提示符尝试此操作，执行命令 npm i -g typings）。
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
},
"name": "angular2"
}
6) 在根目录下添加 tsconfig.json 并包含以下代码（您也可以通过 npm install tsconfig 进行配置）。
{
"compilerOptions":
{
"experimentalDecorators": true,
"moduleResolution": "node"
}
}
7) 添加 index.html 并粘贴以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>
Loading AppComponent content here ...
</my-app>
</body>
</html>
8) 现在，在根目录下添加 app 文件夹，并在 app.component.ts、app.module.ts 和 index.ts 这三个文件中添加内容。
注意：如果出现任何配置弹出窗口，请单击“否”。
9) 在所有三个相关文件中添加以下代码。
app.component.ts
import { Component } from "@angular/core"
@Component({
selector: 'my-app',
template : `<h1>Welcome to Angular 2.0 Application<h1><div>{{ msg }}</div>`
})
export class AppComponent
{
msg: string = "Demo. Thanks You..!!"
}
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
{
}
index.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
10) 在根文件夹中添加 systemjs.config.js，并包含以下代码。
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: { // paths serve as alias
'npm:': 'node_modules/'
},
map: { // map tells the System loader where to look for things
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './index.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
11) 在同一目录下的命令提示符中执行命令 npm install。
注意：其他设置可能会让您感到困扰，请转到 工具 -> 选项 -> 项目和解决方案，单击外部 Web 工具，并将 $(PATH) 放在 $(DevEnvDir)\{Anything}.. 之前。
结论
完成此应用程序后，您应该能够使用 Visual Studio 2015 启动您的第一个 AngularJS 2.0 应用程序。这将是一个好的开始，您将能够顺利进行。祝您学习愉快，编码愉快！