[英]Add Angular 4 to an ASP.NETCore Project
I want to utilize Angular 4 in my ASP.NetCore 1.1 project, within Visual Studio 2017 (read as: *.csproj file) 我想在Visual Studio 2017中的ASP.NetCore 1.1项目中使用Angular 4(读作:* .csproj文件)
Previously with ASP.NET Core 1.0 and Visual Studio 2015, you could simply add AngularJS (1.xx) into the project.json
as a dependency and it would wire itself in. 以前使用ASP.NET Core 1.0和Visual Studio 2015,您只需将AngularJS(1.xx)作为依赖项添加到project.json
中,它就可以自行连接。
Now, with ASP.NetCore and VS2017, the project.json
file has gone away, and the only documentation I can find refers to STARTING an Angular 4 project by using the CLI and using the CLI to generate a NEW angular app. 现在,使用ASP.NetCore和VS2017, project.json
文件已经消失,我可以找到的唯一文档是通过使用CLI并使用CLI生成一个新的角度应用程序来启动Angular 4项目。 I don't really want a new project or have to refactor everything I have created to provide a service to a separate UI project. 我真的不想要一个新项目,或者必须重构我创建的所有内容,以便为单独的UI项目提供服务。 I just want to augment my app with some added client-side UI experience. 我只想通过一些额外的客户端UI体验来增强我的应用程序。
Any suggestions? 有什么建议么?
This questions has been getting a lot of views and the information is of little help so I'm providing this update. 这个问题得到了很多观点,而且这些信息没什么帮助,所以我提供了这个更新。
Visual Studio 2017 ( *.csproj
) Visual Studio 2017( *.csproj
)
Asp.Net Core 2.0 + Angular (v2.0~v4.0) :: Use the built in template! Asp.Net Core 2.0 + Angular(v2.0~v4.0)::使用内置模板! Best option IMO. 最佳选择IMO。
Asp.Net Core 1.X + Angular (v2.0~v4.0) Asp.Net Core 1.X + Angular(v2.0~v4.0)
Visual Studio 2015 ( project.json
) Visual Studio 2015( project.json
)
Tooling: up to version -preview2 - No further updates, all new .NET Core features will be moving to VS 2017 工具:最高版本-preview2 - 没有进一步的更新,所有新的.NET Core功能都将转移到VS 2017
Asp.Net Core 1.X + Angular (v2.0~v4.0) Asp.Net Core 1.X + Angular(v2.0~v4.0)
Asp.Net Core 1.X + AngularJS (~1.5) Asp.Net Core 1.X + AngularJS(~1.5)
Asp.Net MVC 5 + AngularJS (~1.5) Asp.Net MVC 5 + AngularJS(~1.5)
Notes: There are many other ways to get Angular to work with ASP.Net / .NetCore projects such as NPM, Bower, NuGet, etc. I tried to highlight the ones which are simple and actually work. 注意:还有很多其他方法可以让Angular与ASP.Net / .NetCore项目(如NPM,Bower,NuGet等)一起工作。我试图强调那些简单且实际工作的项目。 Also these are in line with the direction Microsoft is moving in, according to the Pluralsight blog post above. 根据上面的Pluralsight博客文章,这些也符合微软的发展方向。
[i am aware you didn't ask this specifically but just wanted to share a thought which is very relevant in my opinion] [我知道你并没有特别提出这个问题,只是想分享一个在我看来非常相关的想法]
I was at the exactly the same point a few months ago and i decided going with angular cli. 几个月前,我处于完全相同的位置,我决定采用角度cli。 and i thank God i made that decision. 我感谢上帝,我做出了这个决定。 Uncomparably more clear and it actually put things how they should be: .net core web api backend and completely separated angular client. 无比的更清晰,它实际上把它们应该是:.net core web api后端和完全分离的角度客户端。 just exactly the same as you wouldn't put your iphone/android app into VS solution, there is no real reason to put angular one neither. 就像你不会将你的iphone / android应用程序放入VS解决方案一样,没有真正的理由不设置角度。
UPDATE Either use MVC with Razor, OR use Angular as a SPA, and if you use Angular, use the Angular CLI. 更新要么使用MVC和Razor,要么使用Angular作为SPA,如果使用Angular,请使用Angular CLI。 And if you use angular, feed data into it with asp.net (core) Web Api as a REST backend 如果你使用angular,使用asp.net(核心)Web Api作为REST后端将数据输入到它中
I can see how this is confusing, but dee zg is correct. 我可以看到这是多么令人困惑,但dee zg是正确的。 You're going to want two separate projects. 你将需要两个独立的项目。 One will be the .net core backend api (REST) and the other will be the Angular 2 spa. 一个是.net核心后端api(REST),另一个是Angular 2 spa。 There will be a complete separation. 将完全分离。
With AngularJS, you could just drop in the js file into a razor view and call it a day. 使用AngularJS,您可以将js文件放入剃刀视图中并将其称为一天。 However, with Angular 2/4 and React, it's best to host each project in it's own solution. 但是,使用Angular 2/4和React,最好将每个项目托管在自己的解决方案中。 This might seem silly at the beginning, but when you build out your api, it can be easily future proofed by having the capability of also being consumed by mobile apps, desktop apps, etc. 这可能在开始时看起来很愚蠢,但是当你构建你的api时,它可以通过移动应用程序,桌面应用程序等消耗的能力轻松地进行未来验证。
I know there is a dotnet spa services angular cli powershell command for .net core, but it is really kind of a mess and actually outputs invalid html that could possibly be detrimental to SEO, etc. It's best, IMO, to just use the angular CLI in a separate project. 我知道.net核心有一个dotnet spa服务angular cli powershell命令,但它实际上有点混乱,实际上输出的无效html 可能对SEO等有害。最好,IMO,只使用角度CLI在一个单独的项目中。
When it comes to production, you'll host the .net core api and the angular 2 projects separately. 在生产方面,您将分别托管.net核心API和角度2项目。
Hope that helps. 希望有所帮助。
It's not totally clear to me what you mean by "Add Angular 4 to an ASP.NET Core Project", but one way to do this is the following: “将Angular 4添加到ASP.NET核心项目”对我来说并不完全清楚,但有一种方法是:
On my blog, I have a detailed tutorial demonstrating this approach . 在我的博客上, 我有一个详细的教程来演示这种方法 。
I have been working on a Angular 4(SPA) and .Net core web api. 我一直在研究Angular 4(SPA)和.Net核心web api。 You can check out the repository and you might get a better understanding. 您可以查看存储库,您可能会更好地理解。
I had to find solutions to many areas like authentication, authorisation, social login, MongoDB connector etc 我必须找到许多领域的解决方案,如身份验证,授权,社交登录,MongoDB连接器等
Hope this would save time for someone stumbling on this. 希望这可以节省绊倒这个的人的时间。
https://github.com/Sathya-B/Angular-.NetCore-MongoDB https://github.com/Sathya-B/Angular-.NetCore-MongoDB
I am using Angular 6 and ASP.NET CORE 2.1 but this might work on Angular 4. 我正在使用Angular 6和ASP.NET CORE 2.1,但这可能适用于Angular 4。
Run the command: 运行命令:
ng generate component component-name-with-lowercase ng生成组件component-name-with-lowercase
This will generate the .html, .spec.ts, .ts, .css files and update the app.module.ts 这将生成.html,.spec.ts,.ts,.css文件并更新app.module.ts
Run the command: 运行命令:
ng generate service _component-name-with-lowercase_
This will generate the .ts and .spec.ts by default in the \\app folder. 这将在\\ app文件夹中默认生成.ts和.spec.ts。 We can move these files on another folder like \\app\\_services 我们可以将这些文件移动到另一个文件夹,例如\\ app \\ _services
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.