如何设置ASP.NET API/AngularJS项目 [英] How to set up a ASP.NET API / AngularJS project

问题描述

我正在启动自己的Angular Web应用程序.我有使用c#和angular进行编码的经验，但是我从来不需要设置自己的项目/解决方案.在这种情况下，我想设置一个将以JSON与Angular SPA前端通信的ASP.NET Web API(尽管前端应该是不可知的，但是任何使用JSON的应用程序都应该能够与之通信).

I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).

此外，我听说过有关grunt的好消息，因此我希望将其合并到项目中(至少要编译LESS并最小化和合并我的角度文件).

Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).

我正在使用Visual Studio Professional2013.我首先创建一个Web API项目并下载WebEssentials插件.

I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.

我对如何继续此处感到有些困惑.我应该在相同的解决方案中将我的角度拆分为一个单独的项目吗?如何包括咕gr声? 如何在Visual Studio的上下文中使用grunt将我的角度文件包含在index.html文件中?

I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt? How do I use grunt in the context of visual studio to include my angular files in my index.html file?

该项目带有一个Scripts文件夹和一个Views文件夹.我知道最好按功能构造角度文件，以便将控制器和视图放置在一起.我应该在脚本文件夹中包含我的视图吗?这对我的构建过程有什么影响?

The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?

我意识到这些问题可能是非常幼稚的问题.请多多包涵，关于这些任务，我是一个完整的初学者.我过去所做的基本上只是代码.

I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.

推荐答案

让我们一步一步来:

您可以将Web Api和Angular代码存储在同一解决方案和项目中.

You can store both Web Api and Angular code in same solution and project.

在这种情况下，您可以安排如下结构:

In this case you can arrange structure like this:

• 内容
• 控制器
• 模型
• 脚本(带有app/文件夹和供应商脚本，例如angular，jquery等)
• 观看次数

index.html用于角度应用程序，您可以将其放入Scripts/app文件夹. 您可以将Angular的所有视图放到Scripts/app/views文件夹中.

index.html for angular application you can put into Scripts/app folder. And all views for Angular you can put into Scripts/app/views folder.

Grunt/Gulp/Cake/Broccoli-这些工具只是一个javascript任务运行程序，它使您可以进行多种操作，例如将供应商脚本合并为一个文件，最小化并将脚本合并为一个文件，将LESS转换为CSS等.

Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.

要使用这些任务运行程序，可以使用项目构建事件.在项目构建事件中，您可以运行Grant/Gulp任务，这将为您做所有的魔术.

To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.

此外，Visual Studio扩展名为 任务运行器 .通过此扩展，您可以通过添加Task Runner Explorer窗口在Visual Studio中执行任何Grunt/Gulp任务或目标.

Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.

要通过Task Runner自动运行Gulp任务，您需要在gulpfile.js

To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js

/// <vs AfterBuild='<here is a name of your Gulp task>' />

此行将强制您的任务在每次重建项目后运行.

This line will force your task to run after each rebuild of your project.

要获取有关在ASP.NET上使用AngularJS的应用的其他信息，您可以查看John Papa的视频:"

To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"

使用完整的Gulp模块:

• gulp-useref -解析HTML中的构建块文件来替换对未优化脚本或样式表的引用.
• 无gulp -Gulp较少. /li>
• gulp-uglify -使用UglifyJS压缩文件.

• gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
• gulp-less - Less for Gulp.
• gulp-uglify - Minify files with UglifyJS.

这篇关于如何设置ASP.NET API/AngularJS项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！