Suggested setup for angularJS development in Visual Studio 2013 [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 6 years ago.

Improve this question

I am starting with AngularJS. The back end will be Web API (which is new to me as well) and I'd like to use just one IDE, so I'm trying to figure out how to setup a project in Visual Studio 2013 for AngularJS. I'd like to keep it as a separate project, to keep it loosely coupled to the API (or keep the UI decoupled from the Web API). I'm having a hard time figuring out how to get this setup. So....

• What project type is best for a pure AngularJS (pure HTML 5) project?
• Is is suggested to use Grunt? Or is MS Build better to handle build tasks? I thinking here linting, minify, concatenating files into a single distribution file, maybe copying to a web server.
• How do you run tests? Is there a plugin to run Jasmin tests? Do you just run Karma separately?
• Are there any good templates for AngularJS? Any that use ngBoilerplate?

Any help would be appreciated.

Answer 1

We had the same choices to make.

We decided to :

• make the whole build process not depend on visual studio. We chose use tools that are considered mainstream in angular development world. This way getting support by the community is easier.

• use visual studio extensions when available to enhance the experience when possible

How :

• use grunt and karma. We scaffolded a project using yeoman angular and used this as a template to setup our own build process. Ours is almost as-is.

• install the Web Essentials 2013 extension. The extension uses the same .jscs and .jshintrc that your grunt build uses. We decided to let Web Essentials 2013 extension handle the .less files on save so that index.html can refer to main.css and no build process is required.

• make sure our visual studio editor settings are aligned with our .jscs and .jshintrc formatting rules (spacing, line ending, etc).

Also:

• we run karma watch (or grunt watch) on the command-line for our tests.

• attaching to running karma tests from visual studio works fine, you have to run your tests with IE. But we use the Chrome dev tools more often than not.

• we don't use the jasmine web runner at all. karma has all you need.

• to make things easy our app files are in /static/ inside our WebAPI project. This way you don't need another server to serve your static files.

• you can use NTVS to debug grunt or karma or any other tool included in your build process, from Visual Studio.

• integration with our CI (CCNet) was simple, just invoke grunt ci where ci is a task that does the build and then runs the tests using junit style reporters instead of console type reporters.

• we also made sure that running the build process is optional. The build process bundles stuff in a dist folder. We run integrated tests on this folder but at dev-time, we run on raw js files (not minified or concatenated). The yeoman angular template got us there easily.

I hope this helps