CODEWITHSUNDEEP
javascriptc#asp.netjsonangularjs
pQuestions123
pQuestions123

Reputation: 4611

How to set up a ASP.NET API / AngularJS project

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).

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).

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

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?

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.

Upvotes: 2

Views: 1578

Answers (1)

Dmitry Zaets
Dmitry Zaets

Reputation: 3277

Let's go step by step:

Visual Studio Solution with Web Api and Angular JS

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

In this case you can arrange structure like this:

  • Content
  • Controllers
  • Models
  • Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
  • 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.

Using Grunt/Gulp

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.

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.

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.

Example of using Gulp in Visual Studio Project by using Task Runner

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.

Useful Info

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"

Usefull Gulp modules:

  • 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.

Upvotes: 3

Related Questions