使用Angular 2设置ASP.NET MVC 4或5项目

Question

我正在学习使用Typescript的角度2.

我正在使用以下资源. 使用Angular 2快速入门

现在从那里和其他例子我发现他们告诉创建package.json文件,列出项目的所有依赖项.

我想创建这个package.json文件并列出所有依赖包,在.NetCore Project中遵循这种结构.

在MVC 4或5中,我们有packages.config文件,它列出了我们将要使用的软件包.

我不是说当我们有package.config文件时我们不能使用package.json文件.

但是有没有简单的方法在使用NUGet包的MVC Webapplication项目中将Angular 2与typescript集成并开始使用？

如果没有,请告诉我如何在ASP.Net MVC 4或5中使用类型脚本设置Angular 2？

Answer 1

正如您所说,在ASP.NET MVC应用程序中,您有一个package.config文件.此文件包含有关您在应用中安装的NuGet包的信息.此文件与服务器端程序包相关.

package.json文件与应用程序的前端部分相关.它还包含您在应用中安装的软件包列表.这次npm包.它还包含有关您的应用程序的信息等.你可以在这里阅读更多相关信息.

你不能混合这些文件而你不想.首先,这些文件具有不同的格式(XML和JSON).另外,正如我之前所说,它们包含有关应用程序不同部分的信息.最后,这是我个人的观点,当您使用丰富的UI创建应用程序并使用Angular2时,最好将应用程序的各个部分拆分为2个不同的项目.其中一个使用Web API,第二个只使用UI部分.有了这样的结构,您就不需要packages.config在UI项目中,也不需要package.json在Web API项目中.

对于你的上一个问题,你可以从这里开始.您还可以查看此示例应用.

Answer 2

为了在ASP.NET MVC 4.5(VS 2015)中运行Angular 2:

1)安装Node.js(至少4.4.x),npm(至少3.xx)和TypeScript for Visual Studio 2015(VS - >工具 - >扩展和更新 - >在线).您可以通过在终端中运行以下命令来检查节点和npm的版本:"node -v"和"npm -v".

2)将QuickStart文件(quickstart-master constains,而不是文件夹本身)复制到项目中(包含.csproj文件的文件夹) - 您可以从以下网址下载QuickStart文件:https://github.com/angular /快速开始

3)在解决方案资源管理器中,单击"显示所有文件"(可能是右侧第三个图标,位于搜索栏上方).选择以下文件/文件夹并将其包含在项目中:

• app文件夹(如果要求搜索TypeScript类型,请回答否)
• styles.css的
• 的index.html
• 的package.json
• tsconfig.json
• typings.json

4)在Visual Studio中,右键单击"package.json"并选择"Restore Packages" - 这会将package.json中定义的所有包安装到项目中.

此操作的结果与从终端在项目位置运行"npm install"相同.

可能在"输出"窗口中会出现一些警告 - 忽略它们.将生成一个名为"node_modules"的新文件夹(您需要刷新解决方案资源管理器才能看到它) - 建议不要在项目中包含此文件夹.

5)在tsconfig.json文件中,在"compilerOptions"旁边添加以下内容:

"compileOnSave":是的

如下所示

{
  "compilerOptions": {
    ...
  },
  "compileOnSave": true
}

重新启动Visual Studio.

6)在Visual Studio中,右键单击"index.html"并单击"设置为起始页".

作为参考,这是在ASP.NET 4.x(Visual Studio 2015)中运行Angular 2(快速入门)的官方文档:https: //angular.io/docs/ts/latest/cookbook/visual-studio-2015. HTML