将 Angular 4 添加到 ASP.NETCore 项目
Add Angular 4 to an ASP.NETCore Project
我想在我的 ASP.NetCore 1.1 项目中使用 Angular 4,在 Visual Studio 2017 年(读取为:*.csproj 文件)
以前使用 ASP.NET Core 1.0 和 Visual Studio 2015,您可以简单地将 AngularJS (1.x.x) 作为依赖添加到 project.json
中,并且它会自行连接。
现在,在 ASP.NetCore 和 VS2017 中,project.json
文件已经消失,我能找到的唯一文档是指通过使用 CLI 和启动 Angular 4 项目使用 CLI 生成新的 angular 应用程序。我真的不想要一个新项目或必须重构我创建的所有内容以向单独的 UI 项目提供服务。我只想通过添加一些客户端 UI 体验来增强我的应用程序。
有什么建议吗?
更新
这个问题得到了很多人的关注,而这些信息对我们帮助不大,所以我提供了这个更新。
Visual Studio 2017 (*.csproj
)
Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: 使用内置模板! IMO 的最佳选择。
Asp.Net核心1.X+Angular(v2.0~v4.0)
- 创建 VS 项目。
- 通过 Angular CLI 创建 Angular 项目
- 配置和设置详细信息:Link
Visual Studio 2015 (project.json
)
工具:最高版本 -preview2 - 没有进一步的更新,所有新的 .NET Core 功能都将移至 VS 2017
Asp.Net核心1.X+Angular(v2.0~v4.0)
- Asp.Net 核心模板包
- 注意:我不会认可糟糕的 VS 插件,Mads Kristensen 做得很好。
- 配置和设置详细信息:Blog post
Asp.Net 核心 1.X + AngularJS (~1.5)
- 配置和设置详细信息:Microsoft Tutorial
Asp.Net MVC 5 + AngularJS (~1.5)
注意:有 许多 其他方法可以使 Angular 与 ASP.Net / .NetCore 项目一起工作,例如 NPM、Bower、NuGet 等. 我试图突出显示那些简单且实际有效的方法。根据上面的 Pluralsight 博客 post,这些也符合 Microsoft 的发展方向。
[我知道你并没有专门问这个问题,只是想分享一个在我看来非常相关的想法]
几个月前我处于完全相同的状态,我决定使用 angular cli。我感谢上帝让我做出了那个决定。
无比清晰,它实际上把事情放在了它们应该的样子:.net 核心 web api 后端和完全分离的 angular 客户端。就像您不会将 iphone/android 应用程序放入 VS 解决方案中一样,没有真正的理由将 angular 一个也不放入。
更新
将 MVC 与 Razor 一起使用,或者将 Angular 用作 SPA,如果您使用 Angular,请使用 Angular CLI。
如果您使用 angular,则使用 asp.net(核心)Web Api 作为 REST 后端
将数据输入其中
我可以看出这是多么令人困惑,但 dee zg 是正确的。您将需要两个独立的项目。一个是 .net 核心后端 api (REST),另一个是 Angular 2 spa。会有彻底的分离。
使用 AngularJS,您可以将 js 文件放入 razor 视图中,然后收工。然而,对于 Angular 2/4 和 React,最好将每个项目托管在它自己的解决方案中。这在开始时可能看起来很愚蠢,但是当您构建 api 时,它可以很容易地通过移动应用程序、桌面应用程序等使用的能力来证明未来
我知道有一个用于 .net 核心的 dotnet spa 服务 angular cli powershell 命令,但它确实有点乱,实际上输出无效 html 可能 对 SEO 等有害。IMO,最好只在单独的项目中使用 angular CLI。
在生产环境中,您将分别托管 .net 核心 api 和 angular 2 个项目。
我不太清楚你所说的 "Add Angular 4 to an ASP.NET Core Project" 是什么意思,但一种方法如下:
- 创建一个 Angular 4 项目(使用 angular-cli)。
- 在与 Angular 项目相同的目录中创建一个 ASP.NET Core 项目(使用 .NET Core CLI)。
- 调整 webpack.config.js 文件(它是 angular-cli 安装的一部分)以便自动将捆绑文件放在 wwwroot 目录中(webpack 将负责此操作)。
在我的博客上,I have a detailed tutorial demonstrating this approach。
我一直在研究 Angular 4(SPA) 和 .Net 核心网络 api。您可以查看存储库,您可能会得到更好的理解。
我必须找到许多领域的解决方案,例如身份验证、授权、社交登录、MongoDB 连接器 e.t.c
希望这能为遇到此问题的人节省时间。
我正在使用 Angular 6 和 ASP.NET CORE 2.1,但这可能适用于 Angular 4。
在 VS2017 中新建 ANGULAR 项目:
- 在 VS 中创建一个新的 Web 应用程序。文件夹名称不应包含“.”自从
Angular不接受。例如:DatingApp-SPA。然后 select 'Blank'.
- 关闭 VS,这样它就不会为任何权限锁定文件夹
- 导航到项目文件夹的基本路径。
- 运行'ng new DatingApp-SPA'。这将为现有的 DatingApp-SPA 项目添加 Angular 个好东西。
- 在VS上再次打开解决方案
CREATE A NEW COMPONENT:
打开命令提示符并导航到项目文件夹
运行命令:
ng 生成组件 组件名称小写
这将生成 .html、.spec.ts、.ts、.css 文件并更新 app.module.ts
CREATE A NEW SERVICE:
打开命令提示符并导航到项目文件夹
运行命令:
ng generate service _component-name-with-lowercase_
默认情况下,这将在 \app 文件夹中生成 .ts 和 .spec.ts。我们可以将这些文件移动到另一个文件夹,例如 \app\_services
我想在我的 ASP.NetCore 1.1 项目中使用 Angular 4,在 Visual Studio 2017 年(读取为:*.csproj 文件)
以前使用 ASP.NET Core 1.0 和 Visual Studio 2015,您可以简单地将 AngularJS (1.x.x) 作为依赖添加到 project.json
中,并且它会自行连接。
现在,在 ASP.NetCore 和 VS2017 中,project.json
文件已经消失,我能找到的唯一文档是指通过使用 CLI 和启动 Angular 4 项目使用 CLI 生成新的 angular 应用程序。我真的不想要一个新项目或必须重构我创建的所有内容以向单独的 UI 项目提供服务。我只想通过添加一些客户端 UI 体验来增强我的应用程序。
有什么建议吗?
更新
这个问题得到了很多人的关注,而这些信息对我们帮助不大,所以我提供了这个更新。
Visual Studio 2017 (*.csproj
)
Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: 使用内置模板! IMO 的最佳选择。
Asp.Net核心1.X+Angular(v2.0~v4.0)
- 创建 VS 项目。
- 通过 Angular CLI 创建 Angular 项目
- 配置和设置详细信息:Link
Visual Studio 2015 (project.json
)
工具:最高版本 -preview2 - 没有进一步的更新,所有新的 .NET Core 功能都将移至 VS 2017
Asp.Net核心1.X+Angular(v2.0~v4.0)
- Asp.Net 核心模板包
- 注意:我不会认可糟糕的 VS 插件,Mads Kristensen 做得很好。
- 配置和设置详细信息:Blog post
Asp.Net 核心 1.X + AngularJS (~1.5)
- 配置和设置详细信息:Microsoft Tutorial
Asp.Net MVC 5 + AngularJS (~1.5)
注意:有 许多 其他方法可以使 Angular 与 ASP.Net / .NetCore 项目一起工作,例如 NPM、Bower、NuGet 等. 我试图突出显示那些简单且实际有效的方法。根据上面的 Pluralsight 博客 post,这些也符合 Microsoft 的发展方向。
[我知道你并没有专门问这个问题,只是想分享一个在我看来非常相关的想法]
几个月前我处于完全相同的状态,我决定使用 angular cli。我感谢上帝让我做出了那个决定。 无比清晰,它实际上把事情放在了它们应该的样子:.net 核心 web api 后端和完全分离的 angular 客户端。就像您不会将 iphone/android 应用程序放入 VS 解决方案中一样,没有真正的理由将 angular 一个也不放入。
更新 将 MVC 与 Razor 一起使用,或者将 Angular 用作 SPA,如果您使用 Angular,请使用 Angular CLI。 如果您使用 angular,则使用 asp.net(核心)Web Api 作为 REST 后端
将数据输入其中我可以看出这是多么令人困惑,但 dee zg 是正确的。您将需要两个独立的项目。一个是 .net 核心后端 api (REST),另一个是 Angular 2 spa。会有彻底的分离。
使用 AngularJS,您可以将 js 文件放入 razor 视图中,然后收工。然而,对于 Angular 2/4 和 React,最好将每个项目托管在它自己的解决方案中。这在开始时可能看起来很愚蠢,但是当您构建 api 时,它可以很容易地通过移动应用程序、桌面应用程序等使用的能力来证明未来
我知道有一个用于 .net 核心的 dotnet spa 服务 angular cli powershell 命令,但它确实有点乱,实际上输出无效 html 可能 对 SEO 等有害。IMO,最好只在单独的项目中使用 angular CLI。
在生产环境中,您将分别托管 .net 核心 api 和 angular 2 个项目。
我不太清楚你所说的 "Add Angular 4 to an ASP.NET Core Project" 是什么意思,但一种方法如下:
- 创建一个 Angular 4 项目(使用 angular-cli)。
- 在与 Angular 项目相同的目录中创建一个 ASP.NET Core 项目(使用 .NET Core CLI)。
- 调整 webpack.config.js 文件(它是 angular-cli 安装的一部分)以便自动将捆绑文件放在 wwwroot 目录中(webpack 将负责此操作)。
在我的博客上,I have a detailed tutorial demonstrating this approach。
我一直在研究 Angular 4(SPA) 和 .Net 核心网络 api。您可以查看存储库,您可能会得到更好的理解。
我必须找到许多领域的解决方案,例如身份验证、授权、社交登录、MongoDB 连接器 e.t.c
希望这能为遇到此问题的人节省时间。
我正在使用 Angular 6 和 ASP.NET CORE 2.1,但这可能适用于 Angular 4。
在 VS2017 中新建 ANGULAR 项目:
- 在 VS 中创建一个新的 Web 应用程序。文件夹名称不应包含“.”自从 Angular不接受。例如:DatingApp-SPA。然后 select 'Blank'.
- 关闭 VS,这样它就不会为任何权限锁定文件夹
- 导航到项目文件夹的基本路径。
- 运行'ng new DatingApp-SPA'。这将为现有的 DatingApp-SPA 项目添加 Angular 个好东西。
- 在VS上再次打开解决方案
CREATE A NEW COMPONENT:
打开命令提示符并导航到项目文件夹
运行命令:
ng 生成组件 组件名称小写
这将生成 .html、.spec.ts、.ts、.css 文件并更新 app.module.ts
CREATE A NEW SERVICE:
打开命令提示符并导航到项目文件夹
运行命令:
ng generate service _component-name-with-lowercase_
默认情况下,这将在 \app 文件夹中生成 .ts 和 .spec.ts。我们可以将这些文件移动到另一个文件夹,例如 \app\_services